jQuery

最新推荐文章于 2025-06-05 21:40:57 发布
最新推荐文章于 2025-06-05 21:40:57 发布
阅读量252 收藏
点赞数
分类专栏： 前端 文章标签： javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u010247166/article/details/106319689
版权

文章目录

1.初识jQuery

本内容是根据尚硅谷老师讲解的内容进行整理，供平常查看使用

jQueryAPI在线文档
C在线文档
W3School

jQuery笔记 (完整详细版)
jQuery之从零开始的学习（完整）
在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>01_初识jQuery</title>

  <!--使用原生DOM-->
  <script type="text/javascript">
    window.onload = function () {
      var btn1 = document.getElementById('btn1')
      btn1.onclick = function () {
        var username = document.getElementById('username').value
        alert(username)
      }
    }
  </script>

  <!--使用jQuery实现-->
    <!--本引入-->
  <script type="text/javascript" src="js/jquery-1.12.3.js"></script>
    <!--远程引入-->
  <!--<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>-->
  <script type="text/javascript">
    //绑定文档加载完成的监听
    jQuery(function () {
      var $btn2 = $('#btn2')
      $btn2.click(function () { // 给btn2绑定点击监听
        var username = $('#username').val()
        alert(username)
      })
    })

    /*
    1. 使用jQuery核心函数: $/jQuery
    2. 使用jQuery核心对象: 执行$()返回的对象
     */
    //新的注释
  </script>
</head>
<body>
<!--
需求: 点击"确定"按钮, 提示输入的值
-->

用户名: <input type="text" id="username">
<button id="btn1">确定(原生版)</button>
<button id="btn2">确定(jQuery版)</button>

</body>

</html>

2.jQuery的二把利器

在这里插入图片描述

<html>

<head>
  <meta charset="UTF-8">
  <title>jQuery的二把利器</title>
</head>
<body>
<button>测试</button>
<!--
1. jQuery核心函数
  * 简称: jQuery函数($/jQuery)
  * jQuery库向外直接暴露的就是$/jQuery
  * 引入jQuery库后, 直接使用$即可
    * 当函数用: $(xxx)
    * 当对象用: $.xxx()
2. jQuery核心对象
  * 简称: jQuery对象
  * 得到jQuery对象: 执行jQuery函数返回的就是jQuery对象
  * 使用jQuery对象: $obj.xxx()
-->

<script type="text/javascript" src="js/jquery-1.12.3.js"></script>
<script type="text/javascript">
  //1.  jQuery函数: 直接可用
  console.log($, typeof $)
  console.log(jQuery===$) // true
  //2. jQuery对象: 执行jQuery函数得到它
  console.log($() instanceof Object) // true
  /*
  (function (window) {
    var jQuery = function () {
      return new xxx()
    }

    window.$ = window.jQuery = jQuery
  })(window)
  */
</script>
</body>
</html>

在这里插入图片描述

2.1 核心函数

在这里插入图片描述

<html>
<head>
  <meta charset="UTF-8">
  <title>03_jQuery核心函数</title>
</head>

<body>

<div>
  <button id="btn">测试</button>
  <br/>

  <input type="text" name="msg1"/><br/>
  <input type="text" name="msg2"/><br/>

</div>


<!--
1. 作为一般函数调用: $(param)
  1). 参数为函数 : 当DOM加载完成后，执行此回调函数
  2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象
  3). 参数为DOM对象: 将dom对象封装成jQuery对象
  4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象
2. 作为对象使用: $.xxx()
  1). $.each() : 隐式遍历数组
  2). $.trim() : 去除两端的空格
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
  /*
   需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框
   需求2. 遍历输出数组中所有元素值
   需求3. 去掉"  my atguigu  "两端的空格
   */
  /*需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框*/
  //1.1). 参数为函数 : 当DOM加载完成后，执行此回调函数
  $(function () { // 绑定文档加载完成的监听
    // 1.2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象
    $('#btn').click(function () { // 绑定点击事件监听
      // this是什么? 发生事件的dom元素(<button>)
      // alert(this.innerHTML)
      // 1.3). 参数为DOM对象: 将dom对象封装成jQuery对象
      alert($(this).html())
      // 1.4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象
      $('<input type="text" name="msg3"/><br/>').appendTo('div')
    })
  })

  /*需求2. 遍历输出数组中所有元素值*/
  var arr = [2, 4, 7]
  // 1). $.each() : 隐式遍历数组
  $.each(arr, function (index, item) {
    console.log(index, item)
  })
  // 2). $.trim() : 去除两端的空格
  var str = ' my atguigu  '
  // console.log('---'+str.trim()+'---')
  console.log('---'+$.trim(str)+'---')

</script>
</body>

</html>
2.1.1 基本选择器
<body>
<div id="div1" class="box">div1(class="box")</div>
<div id="div2" class="box">div2(class="box")</div>
<div id="div3">div3</div>
<span class="box">span(class="box")</span>

<br>
<ul>
  <li>AAAAA</li>
  <li title="hello">BBBBB(title="hello")</li>
  <li class="box">CCCCC(class="box")</li>
  <li title="hello">DDDDDD(title="hello")</li>
</ul>

<!--
1. 是什么?
  - 有特定格式的字符串
2. 作用
  - 用来查找特定页面元素
3. 基本选择器
  - #id : id选择器
  - element : 元素选择器
  - .class : 属性选择器
  - * : 任意标签
  - selector1,selector2,selectorN : 取多个选择器的并集(组合选择器)
  - selector1selector2selectorN : 取多个选择器的交集(相交选择器)
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
  /*
   需求:
   1. 选择id为div1的元素
   2. 选择所有的div元素
   3. 选择所有class属性为box的元素
   4. 选择所有的div和span元素
   5. 选择所有class属性为box的div元素
   */
  //1. 选择id为div1的元素
  // $('#div1').css('background', 'red')

  //2. 选择所有的div元素
  // $('div').css('background', 'red')

  //3. 选择所有class属性为box的元素
  //$('.box').css('background', 'red')

  //4. 选择所有的div和span元素
  // $('div,span').css('background', 'red')

  //5. 选择所有class属性为box的div元素
  //$('div.box').css('background', 'red')

  //$('*').css('background', 'red')

</script>
</body>
2.1.2 层次选择器
<body>
<ul>
  <li>AAAAA</li>
  <li class="box">CCCCC</li>
  <li title="hello"><span>BBBBB</span></li>
  <li title="hello"><span class="box">DDDD</span></li>
  <span>EEEEE</span>
</ul>

<!--
层次选择器: 查找子元素, 后代元素, 兄弟元素的选择器
1. ancestor descendant
  在给定的祖先元素下匹配所有的后代元素
2. parent>child
  在给定的父元素下匹配所有的子元素
3. prev+next
  匹配所有紧接在 prev 元素后的 next 元素
4. prev~siblings
  匹配 prev 元素之后的所有 siblings 元素
-->

<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
  /*
   需求:
   1. 选中ul下所有的的span
   2. 选中ul下所有的子元素span
   3. 选中class为box的下一个li
   4. 选中ul下的class为box的元素后面的所有兄弟元素
   */

  //1. 选中ul下所有的的span
  // $('ul span').css('background', 'yellow')

  //2. 选中ul下所有的子元素span
  // $('ul>span').css('background', 'yellow')

  //3. 选中class为box的下一个li
  // $('.box+li').css('background', 'yellow')

  //4. 选中ul下的class为box的元素后面的所有兄弟元素
  $('ul .box~*').css('background', 'yellow')
</script>
</body>
2.1.3 过滤选择器
<body>

<div id="div1" class="box">class为box的div1</div>
<div id="div2" class="box">class为box的div2</div>
<div id="div3">div3</div>
<span class="box">class为box的span</span>
<br/>
<ul>
  <li>AAAAA</li>
  <li title="hello">BBBBB</li>
  <li class="box">CCCCC</li>
  <li title="hello">DDDDDD</li>
  <li title="two">BBBBB</li>
  <li style="display:none">我本来是隐藏的</li>
</ul>
<!--
在原有选择器匹配的元素中进一步进行过滤的选择器
  * 基本
  * 内容
  * 可见性
  * 属性
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">

  /*
   需求:
   1. 选择第一个div
   2. 选择最后一个class为box的元素
   3. 选择所有class属性不为box的div
   4. 选择第二个和第三个li元素
   5. 选择内容为BBBBB的li
   6. 选择隐藏的li
   7. 选择有title属性的li元素
   8. 选择所有属性title为hello的li元素
   */
  //1. 选择第一个div
  // $('div:first').css('background', 'red')

  //2. 选择最后一个class为box的元素
  //$('.box:last').css('background', 'red')

  //3. 选择所有class属性不为box的div
  // $('div:not(.box)').css('background', 'red')  //没有class属性也可以

  //4. 选择第二个和第三个li元素
  // $('li:gt(0):lt(2)').css('background', 'red') // 多个过滤选择器不是同时执行, 而是依次
  //$('li:lt(3):gt(0)').css('background', 'red')

  //5. 选择内容为BBBBB的li
  // $('li:contains("BBBBB")').css('background', 'red')

  //6. 选择隐藏的li
  // console.log($('li:hidden').length, $('li:hidden')[0])

  //7. 选择有title属性的li元素
  // $('li[title]').css('background', 'red')

  //8. 选择所有属性title为hello的li元素
  $('li[title="hello"]').css('background', 'red')

</script>
</body>
2.1.4 表单选择器
<body>
<form>
  用户名: <input type="text"/><br>
  密 码: <input type="password"/><br>
  爱 好:
  <input type="checkbox" checked="checked"/>篮球
  <input type="checkbox"/>足球
  <input type="checkbox" checked="checked"/>羽毛球 <br>
  性 别:
  <input type="radio" name="sex" value='male'/>男
  <input type="radio" name="sex" value='female'/>女<br>
  邮 箱: <input type="text" name="email" disabled="disabled"/><br>
  所在地:
  <select>
    <option value="1">北京</option>
    <option value="2" selected="selected">天津</option>
    <option value="3">河北</option>
  </select><br>
  <input type="submit" value="提交"/>
</form>
<!--
表单选择器
  1). 表单
  2). 表单对象属性
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
  /*
   需求:
   1. 选择不可用的文本输入框
   2. 显示选择爱好 的个数
   3. 显示选择的城市名称
   */
  //1. 选择不可用的文本输入框
  // $(':text:disabled').css('background', 'red')

  //2. 显示选择爱好 的个数
  console.log($(':checkbox:checked').length)

  //3. 显示选择的城市名称
  $(':submit').click(function () {
    var city = $('select>option:selected').html() // 选择的option的标签体文本
    city = $('select').val()  // 选择的option的value属性值
    alert(city)


  })

</script>
</body>
2.1.5 $工具方法
<body>
<!--
1. $.each(): 遍历数组或对象中的数据
2. $.trim(): 去除字符串两边的空格
3. $.type(obj): 得到数据的类型
4. $.isArray(obj): 判断是否是数组
5. $.isFunction(obj): 判断是否是函数
6. $.parseJSON(json) : 解析json字符串转换为js对象/数组
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
  //1. $.each(): 遍历数组或对象中的数据
  var obj = {
    name: 'Tom',
    setName: function (name) {
      this.name = name
    }
  }
  $.each(obj, function (key, value) {
    console.log(key, value)
  })
  
  //2. $.trim(): 去除字符串两边的空格
  //3. $.type(obj): 得到数据的类型
  console.log($.type($)) // 'function'

  //4. $.isArray(obj): 判断是否是数组
  console.log($.isArray($('body')), $.isArray([])) // false true
  //5. $.isFunction(obj): 判断是否是函数
  console.log($.isFunction($)) // true
  //6. $.parseJSON(json) : 解析json字符串转换为js对象/数组
  var json = '{"name":"Tom", "age":12}'  // json对象: {}
  // json对象===>JS对象
  console.log($.parseJSON(json))
  json = '[{"name":"Tom", "age":12}, {"name":"JACK", "age":13}]' // json数组: []
  // json数组===>JS数组
  console.log($.parseJSON(json))
  /*
  JSON.parse(jsonString)   json字符串--->js对象/数组
  JSON.stringify(jsObj/jsArr)  js对象/数组--->json字符串
  */
</script>
</body>

2.2 核心对象

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>04_jQuery对象</title>
</head>

<body>
<button>测试一</button>
<button>测试二</button>
<button id="btn3">测试三</button>
<button>测试四</button>

<!--
1. jQuery对象是一个包含所有匹配的任意多个dom元素的伪数组对象
2. 基本行为
  * size()/length: 包含的DOM元素个数
  * [index]/get(index): 得到对应位置的DOM元素
  * each(): 遍历包含的所有DOM元素
  * index(): 得到在所在兄弟元素中的下标
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">

  /*
   需求:
   需求1. 统计一共有多少个按钮
   需求2. 取出第2个button的文本
   需求3. 输出所有button标签的文本
   需求4. 输出'测试三'按钮是所有按钮中的第几个
   */
  //需求1. 统计一共有多少个按钮
  var $buttons = $('button')
  /*size()/length: 包含的DOM元素个数*/
  console.log($buttons.size(), $buttons.length)

  //需求2. 取出第2个button的文本
  /*[index]/get(index): 得到对应位置的DOM元素*/
  console.log($buttons[1].innerHTML, $buttons.get(1).innerHTML)

  //需求3. 输出所有button标签的文本
  /*each(): 遍历包含的所有DOM元素*/
  /*$buttons.each(function (index, domEle) {
    console.log(index, domEle.innerHTML, this)
  })*/
  $buttons.each(function () {
    console.log(this.innerHTML)
  })


  //需求4. 输出'测试三'按钮是所有按钮中的第几个
  /*index(): 得到在所在兄弟元素中的下标*/
  console.log($('#btn3').index())  //2

  /*
  1. 伪数组
    * Object对象
    * length属性
    * 数值下标属性
    * 没有数组特别的方法: forEach(), push(), pop(), splice()
   */
  console.log($buttons instanceof Array) // false
  // 自定义一个伪数组
  var weiArr = {}
  weiArr.length = 0
  weiArr[0] = 'atguigu'
  weiArr.length = 1
  weiArr[1] = 123
  weiArr.length = 2
  for (var i = 0; i < weiArr.length; i++) {
    var obj = weiArr[i]
    console.log(i, obj)
  }
  console.log(weiArr.forEach, $buttons.forEach) //undefined, undefined

</script>
</body>
</html>
2.2.1 属性
<body>

<div id="div1" class="box" title="one">class为box的div1</div>
<div id="div2" class="box" title="two">class为box的div2</div>
<div id="div3">div3</div>
<span class="box">class为box的span</span>
<br/>
<ul>
  <li>AAAAA</li>
  <li title="hello" class="box2">BBBBB</li>
  <li class="box">CCCCC</li>
  <li title="hello">DDDDDD</li>
  <li title="two"><span>BBBBB</span></li>
</ul>

<input type="text" name="username" value="guiguClass"/>
<br>
<input type="checkbox">
<input type="checkbox">
<br>
<button>选中</button>
<button>不选中</button>

<!--
1. 操作任意属性
   attr()
   removeAttr()
   prop()
2. 操作class属性
   addClass()
   removeClass()
3. 操作HTML代码/文本/值
   html()
   val()
-->

<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
  /*
   需求:
   1. 读取第一个div的title属性
   2. 给所有的div设置name属性(value为atguigu)
   3. 移除所有div的title属性
   4. 给所有的div设置class='guiguClass'
   5. 给所有的div添加class='abc'
   6. 移除所有div的guiguClass的class
   7. 得到最后一个li的标签体文本
   8. 设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"
   9. 得到输入框中的value值
   10. 将输入框的值设置为atguigu
   11. 点击'全选'按钮实现全选
   12. 点击'全不选'按钮实现全不选
   */
  //1. 读取第一个div的title属性
  // console.log($('div:first').attr('title')) // one

  //2. 给所有的div设置name属性(value为atguigu)
  // $('div').attr('name', 'atguigu')

  //3. 移除所有div的title属性
  // $('div').removeAttr('title')

  //4. 给所有的div设置class='guiguClass'
  //$('div').attr('class', 'guiguClass')

  //5. 给所有的div添加class='abc'
  //$('div').addClass('abc')

  //6. 移除所有div的guiguClass的class
  //$('div').removeClass('guiguClass')

  //7. 得到最后一个li的标签体文本
  //console.log($('li:last').html())

  //8. 设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"
  //$('li:first').html('<h1>mmmmmmmmm</h1>')

  //9. 得到输入框中的value值
  //console.log($(':text').val()) // 读取

  //10. 将输入框的值设置为atguigu
  //$(':text').val('atguigu') // 设置      读写合一
  //11. 点击'全选'按钮实现全选
    // attr(): 操作属性值为非布尔值的属性
    // prop(): 专门操作属性值为布尔值的属性
  var $checkboxs = $(':checkbox')
  $('button:first').click(function () {
    $checkboxs.prop('checked', true)
  })

  //12. 点击'全不选'按钮实现全不选
  $('button:last').click(function () {
    $checkboxs.prop('checked', false)
  })
</script>
</body>
2.2.2 CSS
<body>
<p style="color: blue;">尚硅谷的后裔</p>
<p style="color: green;">太阳的后裔</p>

<!--
设置css样式/读取css值
  css()
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
  /*
   1. 得到第一个p标签的颜色
   2. 设置所有p标签的文本颜色为red
   3. 设置第2个p的字体颜色(#ff0011),背景(blue),宽(300px), 高(30px)
   */
  //1. 得到第一个p标签的颜色
  //console.log($('p:first').css('color'))

  //2. 设置所有p标签的文本颜色为red
  //$('p').css('color', 'red')

  //3. 设置第2个p的字体颜色(#ff0011),背景(blue),宽(300px), 高(30px)
  $('p:eq(1)').css({
    color: '#ff0011',
    background: 'blue',
    width: 300,
    height: 30
  })

</script>
</body>

<style>
  div {
    width: 100px;
    height: 150px;
    background: red;
    padding: 10px;
    border: 10px #fbd850 solid;
    margin: 10px;
  }
</style>
</head>

<body>
<div>div</div>

<!--
1. 内容尺寸
  height(): height
  width(): width
2. 内部尺寸
  innerHeight(): height+padding
  innerWidth(): width+padding
3. 外部尺寸
  outerHeight(false/true): height+padding+border  如果是true, 加上margin
  outerWidth(false/true): width+padding+border 如果是true, 加上margin
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script>
  var $div = $('div')
  // 1. 内容尺寸
  console.log($div.width(), $div.height())  // 100 150
  // 2. 内部尺寸
  console.log($div.innerWidth(), $div.innerHeight()) //120 170
  // 3. 外部尺寸
  console.log($div.outerWidth(), $div.outerHeight()) //140 190
  console.log($div.outerWidth(true), $div.outerHeight(true)) //160 210

</script>
</body>
2.2.3 筛选过滤
<body>
<ul>
  <li>AAAAA</li>
  <li title="hello" class="box2">BBBBB</li>
  <li class="box">CCCCC</li>
  <li title="hello">DDDDDD</li>
  <li title="two"><span>BBBBB</span></li>
</ul>
<li>eeeee</li>
<li>EEEEE</li>
<br>

<!--
在jQuery对象中的元素对象数组中过滤出一部分元素来
1. first()
2. last()
3. eq(index|-index)
4. filter(selector)
5. not(selector)
6. has(selector)
-->

<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
  /*
   需求:
   1. ul下li标签第一个
   2. ul下li标签的最后一个
   3. ul下li标签的第二个
   4. ul下li标签中title属性为hello的
   5. ul下li标签中title属性不为hello的
   6. ul下li标签中有span子标签的
   */
  var $lis = $('ul>li')
  //1. ul下li标签第一个
  // $lis.first().css('background', 'red')
  // $lis[0].style.background = 'red'

  //2. ul下li标签的最后一个
  // $lis.last().css('background', 'red')

  //3. ul下li标签的第二个
  // $lis.eq(1).css('background', 'red')

  //4. ul下li标签中title属性为hello的
  // $lis.filter('[title=hello]').css('background', 'red')

  //5. ul下li标签中title属性不为hello的
  // $lis.not('[title=hello]').css('background', 'red')
  // $lis.filter('[title!=hello]').filter('[title]').css('background', 'red')

  //6. ul下li标签中有span子标签的
  $lis.has('span').css('background', 'red')
</script>
</body>
2.2.4 文档操作
<style type="text/css">
  * {
    margin: 0px;
  }

  .div1 {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 20px;
    left: 10px;
    background: blue;
  }

  .div2 {
    position: absolute;
    width: 100px;
    height: 100px;
    /*top: 50px;*/
    background: red;
  }

  .div3 {
    position: absolute;
    top: 250px;
  }
</style>

<body>
<ul id="ul1">
  <li>AAAAA</li>

  <li title="hello">BBBBB</li>
  <li class="box">CCCCC</li>

  <li title="hello">DDDDDD</li>
  <li title="two">EEEEE</li>
  <li>FFFFF</li>

</ul>
<br>
<br>
<ul id="ul2">
  <li>aaa</li>
  <li title="hello">bbb</li>
  <li class="box">ccc</li>
  <li title="hello">ddd</li>
  <li title="two">eee</li>
</ul>

<!--
1. 添加/替换元素
  * append(content)
    向当前匹配的所有元素内部的最后插入指定内容
  * prepend(content)
    向当前匹配的所有元素内部的最前面插入指定内容
  * before(content)
    将指定内容插入到当前所有匹配元素的前面
  * after(content)
    将指定内容插入到当前所有匹配元素的后面替换节点
  * replaceWith(content)
    用指定内容替换所有匹配的标签删除节点
2. 删除元素
  * empty()
    删除所有匹配元素的子元素
  * remove()
    删除所有匹配的元素
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
  /*
   需求:
   1. 向id为ul1的ul下添加一个span(最后)
   2. 向id为ul1的ul下添加一个span(最前)
   3. 在id为ul1的ul下的li(title为hello)的前面添加span
   4. 在id为ul1的ul下的li(title为hello)的后面添加span
   5. 将在id为ul2的ul下的li(title为hello)全部替换为p
   6. 移除id为ul2的ul下的所有li
   */

  //1. 向id为ul1的ul下添加一个span(最后)
  var $ul1 = $('#ul1')
  // $ul1.append('<span>append()添加的span</span>')
  $('<span>appendTo()添加的span</span>').appendTo($ul1)

  //2. 向id为ul1的ul下添加一个span(最前)
  // $ul1.prepend('<span>prepend()添加的span</span>')
  $('<span>prependTo()添加的span</span>').prependTo($ul1)

  //3. 在id为ul1的ul下的li(title为hello)的前面添加span
  $ul1.children('li[title=hello]').before('<span>before()添加的span</span>')

  //4. 在id为ul1的ul下的li(title为hello)的后面添加span
  $ul1.children('li[title=hello]').after('<span>after()添加的span</span>')

  //5. 将在id为ul2的ul下的li(title为hello)全部替换为p
  $('#ul2>li[title=hello]').replaceWith('<p>replaceAll()替换的p</p>')
  //6. 移除id为ul2的ul下的所有li
  // $('#ul2').empty()  // <p>也会删除
  $('#ul2>li').remove()
</script>
</body>
</html>
2.2.5 事件
<html>
<head>
  <meta charset="UTF-8">
  <title>18_事件绑定与解绑</title>
</head>
<style type="text/css">
  * {
    margin: 0px;
  }

  .out {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 20px;
    left: 10px;
    background: blue;
  }

  .inner {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 50px;
    background: red;
  }

  .divBtn {
    position: absolute;
    top: 250px;
  }

</style>

<body style="height: 2000px;">

<div class="out">
  外部DIV
  <div class="inner">内部div</div>
</div>

<div class='divBtn'>
  <button id="btn1">取消绑定所有事件</button>
  <button id="btn2">取消绑定mouseover事件</button>
  <button id="btn3">测试事件坐标</button>
  <a href="http://www.baidu.com" id="test4">百度一下</a>
</div>

<!--
1. 事件绑定(2种)：
  * eventName(function(){})
    绑定对应事件名的监听,	例如：$('#div').click(function(){});
  * on(eventName, funcion(){})
    通用的绑定事件监听, 例如：$('#div').on('click', function(){})
  * 优缺点:
    eventName: 编码方便, 但只能加一个监听, 且有的事件监听不支持
    on: 编码不方便, 可以添加多个监听, 且更通用
2. 事件解绑：
  * off(eventName)
3. 事件的坐标
  * event.clientX, event.clientY  相对于视口的左上角
  * event.pageX, event.pageY  相对于页面的左上角
  * event.offsetX, event.offsetY 相对于事件元素左上角
4. 事件相关处理
  * 停止事件冒泡 : event.stopPropagation()
  * 阻止事件默认行为 : event.preventDefault()
-->
<script src="js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  /*
   需求：
   1. 给.out绑定点击监听(用两种方法绑定)
   2. 给.inner绑定鼠标移入和移出的事件监听(用3种方法绑定)
   3. 点击btn1解除.inner上的所有事件监听
   4. 点击btn2解除.inner上的mouseover事件
   5. 点击btn3得到事件坐标
   6. 点击.inner区域, 外部点击监听不响应
   7. 点击链接, 如果当前时间是偶数不跳转
   */
  //1. 给.out绑定点击监听(用两种方法绑定)
  /*$('.out').click(function () {
   console.log('click out')
   })*/
  $('.out').on('click', function () {
    console.log('on click out')
  })

  //2. 给.inner绑定鼠标移入和移出的事件监听(用3种方法绑定)
  /*
   $('.inner')
   .mouseenter(function () { // 进入
    console.log('进入')
   })
   .mouseleave(function () { // 离开
   console.log('离开')
   })
   */
  /*
   $('.inner')
   .on('mouseenter', function () {
   console.log('进入2')
   })
   .on('mouseleave', function () {
   console.log('离开2')
   })
   */
  $('.inner').hover(function () {
    console.log('进入3')
  }, function () {
    console.log('离开3')
  })


  //3. 点击btn1解除.inner上的所有事件监听
  $('#btn1').click(function () {
    $('.inner').off()
  })

  //4. 点击btn2解除.inner上的mouseenter事件
  $('#btn2').click(function () {
    $('.inner').off('mouseenter')
  })

  //5. 点击btn3得到事件坐标
  $('#btn3').click(function (event) { // event事件对象
    console.log(event.offsetX, event.offsetY) // 原点为事件元素的左上角
    console.log(event.clientX, event.clientY) // 原点为窗口的左上角
    console.log(event.pageX, event.pageY) // 原点为页面的左上角
  })

  //6. 点击.inner区域, 外部点击监听不响应
  $('.inner').click(function (event) {
    console.log('click inner')
    //停止事件冒泡
    event.stopPropagation()
  })
  
  //7. 点击链接, 如果当前时间是偶数不跳转
  $('#test4').click(function (event) {
    if(Date.now()%2===0) {
      event.preventDefault()
    }
  })
</script>
</body>
</html>

事件委托

<html>
<head>
  <meta charset="UTF-8">
  <title>20_事件委托2</title>
</head>

<body>
<ul>
  <li>1111</li>
  <li>2222</li>
  <li>3333</li>
  <li>4444</li>
</ul>

<li>22222</li>
<br>
<button id="btn1">添加新的li</button>
<button id="btn2">删除ul上的事件委托的监听器</button>

<!--
1. 事件委托(委派/代理):
  * 将多个子元素(li)的事件监听委托给父辈元素(ul)处理
  * 监听回调是加在了父辈元素上
  * 当操作任何一个子元素(li)时, 事件会冒泡到父辈元素(ul)
  * 父辈元素不会直接处理事件, 而是根据event.target得到发生事件的子元素(li), 通过这个子元素调用事件回调函数
2. 事件委托的2方:
  * 委托方: 业主  li
  * 被委托方: 中介  ul
3. 使用事件委托的好处
  * 添加新的子元素, 自动有事件响应处理
  * 减少事件监听的数量: n==>1
4. jQuery的事件委托API
  * 设置事件委托: $(parentSelector).delegate(childrenSelector, eventName, callback)
  * 移除事件委托: $(parentSelector).undelegate(eventName)
-->
<script src="js/jquery-1.10.1.js"></script>
<script>
  // 设置事件委托
  $('ul').delegate('li', 'click', function () {
    // console.log(this)
    this.style.background = 'red'
  })

  $('#btn1').click(function () {
    $('ul').append('<li>新增的li....</li>')
  })

  $('#btn2').click(function () {
    // 移除事件委托
    $('ul').undelegate('click')
  })

</script>
</body>
</html>

3.插件

在这里插入图片描述

<html>
<head>
  <meta charset="UTF-8">
  <title>25_扩展插件</title>
  <style type="text/css">
    * {
      margin: 0px;
    }

    .div1 {
      position: absolute;
      width: 100px;
      height: 100px;
      top: 50px;
      left: 10px;
      background: red;
    }
  </style>
</head>
<body>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球
<br/>
<input type="button" id="checkedAllBtn" value="全　选"/>
<input type="button" id="checkedNoBtn" value="全不选"/>
<input type="button" id="reverseCheckedBtn" value="反选"/>

<!--
1. 扩展jQuery的工具方法
  $.extend(object)
2. 扩展jQuery对象的方法
  $.fn.extend(object)
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript" src="js/my_jQuery-plugin.js"></script>
<script type="text/javascript">
  /*
   需求：
   1. 给 $ 添加4个工具方法:
     * min(a, b) : 返回较小的值
     * max(c, d) : 返回较大的值
     * leftTrim() : 去掉字符串左边的空格
     * rightTrim() : 去掉字符串右边的空格
   2. 给jQuery对象 添加3个功能方法:
     * checkAll() : 全选
     * unCheckAll() : 全不选
     * reverseCheck() : 全反选
   */
  console.log($.min(3, 5), $.max(3, 5))
  var string = '   my atguigu    '
  console.log('-----' + $.leftTrim(string) + '-----')
  console.log('-----' + $.rightTrim(string) + '-----')

  var $items = $(':checkbox[name=items]')
  $('#checkedAllBtn').click(function () {
    $items.checkAll()
  })
  $('#checkedNoBtn').click(function () {
    $items.unCheckAll()
  })
  $('#reverseCheckedBtn').click(function () {
    $items.reverseCheck()
  })
</script>
</body>
</html>

my_jQuery-plugin.js:

/*
 需求：
 1. 给 $ 添加4个工具方法:
   * min(a, b) : 返回较小的值
   * max(c, d) : 返回较大的值
   * leftTrim() : 去掉字符串左边的空格
   * rightTrim() : 去掉字符串右边的空格
 2. 给jQuery对象 添加3个功能方法:
 * checkAll() : 全选
 * unCheckAll() : 全不选
 * reverseCheck() : 全反选
 */
(function () {

  // 扩展$的方法
  $.extend({
    min: function (a, b) {
      return a < b ? a : b
    },
    max: function (a, b) {
      return a > b ? a : b
    },
    leftTrim: function (str) {
      return str.replace(/^\s+/, '')
    },
    rightTrim: function (str) {
      return str.replace(/\s+$/, '')
    }
  })

  // 扩展jQuery对象的方法
  $.fn.extend({
    checkAll: function () {
      this.prop('checked', true) // this是jQuery对象
    },
    unCheckAll: function () {
      this.prop('checked', false)
    },
    reverseCheck: function () {
      // this是jQuery对象
      this.each(function () {
        // this是dom元素
        this.checked = !this.checked
      })
    }
  })

})()
JQuery特点、优缺点及其常用操作
sk_shenghuo的博客
10-17 1万+
1.什么是JQuery? JQuery是一个优秀的javascript框架。 JQuery是继Prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。它是轻量级的js库，这是其它的js库所不及的，它兼容CSS3，还兼容各种常用浏览器。 JQuery是一个快速的，简洁的JavaScript库，使用户能更方便地处理HTM...
jQuery选择器
m0_57774967的博客
06-16 4859
jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素（注意：jQuery选择器返回的是jQuery对象）jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器jQuery选择器虽然很多，但是选择器之间可以互相替代，就是说获取一个元素，会有很多种方法获取到，所以平时真正能用到的只是少数的最常用的选择器...
jquery有哪些优点？
wangzai_dreamer的博客
06-29 2124
1.轻量级； 2.完备的学习文档； 3.完善的事件处理机制； 4.不污染全局空间，使用一个全局的jquery即可调用所有方法； 5.开源； 6.完善的ajax； 7.链式操作； 8.丰富的插件支持； 9.隐士迭代，减少循环体的使用，节省代码量； 10.完善的浏览器兼容。
JQuery的引用
zwjl1017的博客
04-01 4186
最近在做的项目是用JQuery开发的，但是在JQuery这项技术上，资质尚浅，特意学习一下，做一些笔记，有不对之处希望大佬们多多指教！ JQuery的下载和引入 在JQuery官网上 （Download jQuery | jQuery）jQuery: The Write Less, Do More, JavaScript Libraryhttps://jquery.com/download/ 标记的是开发环境下的版本，按个人需要去使用版本，点开以后直接全选复制，在项目中创建一个js文件（例：JQue
前端基础之jQuery
qq_53350943的博客
04-07 3968
jQuery是一个封装JS的框架。 使用jQuery可以更方便的编写JS脚本实现的功能。 jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX（重要
jQuery 遍历对象
m0_67458498的博客
03-28 4378
遍历对象 $.each(对象，function(k 对象属性变量，v对象属性值变量） var cat={ name:'kitty'; age:5 climb:function(){ console.log('在爬树') } $.each (cat,function(k,v){ console.log(k+':'+v); }) 遍历数组 $.each(数组，function(k元素下标变量，v元素值变量{});) var color=['red','blu
jquery在线引用
jiufu_的博客
07-15 5221
直接引如下的即可 <scripttype="text/javascript"src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
jQuery-3.4.1下载
cheng1a的博客
02-11 6012
jQuery-3.4.1下载 链接：https://pan.baidu.com/s/1Z1mjG00jzSzXEmXNtvFT8g 提取码：0430
jQuery的下载及安装
weixin_64812436的博客
10-17 5655
1、下载地址：https://jquery.com/，点击Download jQuery下载 2、继续点击如下图所示 3、点击后会出现如图所示清况，先Ctrl+A全选，再Ctrl+C复制 4、在 vs code 新建js文件，名字自己取，我取的是jquery.js 5、使用时，用script标签导入jquery.js文件，即可正常调用jquery里面的方法
jquery-3.6.4.js 和 jquery-3.6.4.min.js 【jquery-3.6.4包合集】
02-17
jquery-3.6.4.js 和 jquery-3.6.4.min.js 【jquery-3.6.4包合集】 jquery-3.6.4包合集下载 包含： jquery-3.6.4.js jquery-3.6.4.min.js jQuery是一个快速、简洁的JavaScript框架，封装JavaScript常用的功能代码，...
jquery-3.6.1.js 和 jquery-3.6.1.min.js 【jquery-3.6.1包合集】
02-17
jquery-3.6.1.js 和 jquery-3.6.1.min.js 【jquery-3.6.1包合集】 jquery-3.6.1包合集下载 包含： jquery-3.6.1.js jquery-3.6.1.min.js jQuery是一个快速、简洁的JavaScript框架，封装JavaScript常用的功能代码，...
jquery-3.6.0.js 和 jquery-3.6.0.min.js 【jquery-3.6.0包合集】
02-17
jquery-3.6.0.js 和 jquery-3.6.0.min.js 【jquery-3.6.0包合集】 jquery-3.6.0包合集下载 包含： jquery-3.6.0.js jquery-3.6.0.min.js jQuery是一个快速、简洁的JavaScript框架，封装JavaScript常用的功能代码，...
jQuery源码 jQuery源码 jQuery源码
04-19
jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...
jquery-3.7.0.min.js（jQuery下载）
06-25
jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）...
JavaScript基础-数组/对象
m0_51324570的博客
06-03 1083
JavaScript 数组常用方法包括：`forEach`、`map`、等遍历方法，`push`/`pop`、`unshift`/`shift`、`splice` 等修改方法，以及 `slice`、`concat`。对象常用方法有：`Object.keys`、`values`、操作属性，`hasOwnProperty` 检查属性。Map 支持任意类型键的键值对存储，Set 用于存储唯一值。字符串可通过 [...str].reverse().join('') 翻转，用 includes 检查包含。
vue3 el-input type=“textarea“ 字体样式 及高度设置
往事知多少？
05-31 622
在Vue 3中，如果你使用的是Element Plus库中的<el-input>组件作为文本域（），你可以通过几种方式来设置字体样式和高度。
vue封装gsap自定义动画指令
m0_69250830的博客
06-04 211
gsap自定义动画指令封装
Vue3入门指南：从零到精通的快速上手
最新发布
2202_75362371的博客
06-05 702
index.ts//定义一个接口，用于限制Person对象的具体属性id:string,age:number//定义一个自定义类型Person.vue<template></div>let person:PersonInter = {id:'01',name:'齐爷',age:20} //接口规范let personList:Persons = [ //泛型约束{id:'01',name:'齐爷',age:20},{id:'02',name:'齐爷1',age:21},
深入解析jQuery对象
"深入理解jQuery（1）——探讨jQuery对象的创建和结构" 在JavaScript的世界里，jQuery是一个广泛使用的库，它极大地简化了DOM操作、事件处理、动画效果和Ajax交互。本文将深入解析jQuery对象的创建和结构，帮助...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值