jQuery学习

最新推荐文章于 2024-05-15 20:34:42 发布

悠闲的线程池

最新推荐文章于 2024-05-15 20:34:42 发布

阅读量262

点赞数 1

文章标签： jquery javascript 学习

本文链接：https://blog.csdn.net/weixin_44235759/article/details/125017343

版权

①HTML&css&js&jQuery 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

初始jQuery

  <!--使用原生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>

jQuery的两把利器

1. jQuery核心函数
  * 简称: jQuery函数($/jQuery)
  * jQuery库向外直接暴露的就是$/jQuery
  * 引入jQuery库后, 直接使用$即可
    * 当函数用: $(xxx)
    * 当对象用: $.xxx()

2. jQuery核心对象
  * 简称: jQuery对象
  * 得到jQuery对象: 执行jQuery函数返回的就是jQuery对象
  * 使用jQuery对象: $obj.xxx()

  //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)
  */

核心函数

1. 作为一般函数调用: $(param)
  1). 参数为函数 : 当DOM加载完成后，执行此回调函数
  2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象
  3). 参数为DOM对象: 将dom对象封装成jQuery对象
  4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象

2. 作为对象使用: $.xxx()
  1). $.each() : 隐式遍历数组
  2). $.trim() : 去除两端的空格

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

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

</div>

<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>

核心对象

即执行jQuery核心函数返回的对象
jQuery对象内部包含的是dom元素对象的伪数组(可能只有一个元素)
jQuery对象拥有很多有用的属性和方法, 让程序员能方便的操作dom

在这里插入图片描述

  * size()/length: 包含的DOM元素个数
  * [index]/get(index): 得到对应位置的DOM元素
  * each(): 遍历包含的所有DOM元素
  * index(): 得到在所在兄弟元素中的下标

  /*
   需求:
   需求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

使用jQuery核心函数

选择器

选择器本身只是一个有特定语法规则的字符串, 没有实质用处
它的基本语法规则使用的就是CSS的选择器语法, 并对基进行了扩展
只有调用$(), 并将选择器作为参数传入才能起作用
$(selector)作用 : 根据选择器规则在整个文档中查找所有匹配的标签的数组, 并封装成jQuery对象返回

在这里插入图片描述

基础选择器

<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>


<script type="text/javascript">
  //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>

层次选择器

<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>

<script type="text/javascript">
  //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>

过滤选择器

<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 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>

表单选择器

<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>

<script type="text/javascript">
  //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>

练习

代码传送门
在这里插入图片描述

工具

$.each(): 遍历数组或对象中的数据
$.trim(): 去除字符串两边的空格
$.type(obj): 得到数据的类型
$.isArray(obj): 判断是否是数组
$.isFunction(obj): 判断是否是函数
$.parseJSON(json) : 解析json字符串转换为js对象/数组

  //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字符串
  */

练习

代码传送门
在这里插入图片描述
隐式遍历，添加事件（类比委派添加事件）

  var $contents = $('#container>div')
  // 给3个li加监听
  /*$('#tab>li').click(function () { // 隐式遍历
    //alert('----')
    // 隐隐藏所有内容div
    $contents.css('display', 'none')
    // 显示对应的内容div
    // 得到当前点击的li在兄弟中下标
    var index = $(this).index()
    // 找到对应的内容div, 并显示
    $contents[index].style.display = 'block'
    // $($contents[index]).css('display', 'block')
  })*/

  var currIndex = 0 //当前显示的内容div的下标
  $('#tab>li').click(function () { // 隐式遍历
    //alert('----')
    // 隐藏当前已经显示的内容div
    $contents[currIndex].style.display = 'none'
    // 显示对应的内容div
      // 得到当前点击的li在兄弟中下标
    var index = $(this).index()
      // 找到对应的内容div, 并显示
    $contents[index].style.display = 'block'

    // 更新下标
    currIndex = index
  })

使用jQuery对象

在这里插入图片描述

属性

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

  //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)
  })

CSS

在这里插入图片描述

设置css样式/读取css值

css()：设置css样式/读取css值

  //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
  })

获取/设置标签的位置数据

offset、position

  需求:
  1. 点击 btn1
    打印 div1 相对于页面左上角的位置
    打印 div2 相对于页面左上角的位置
    打印 div1 相对于父元素左上角的位置
    打印 div2 相对于父元素左上角的位置
  2. 点击 btn2
    设置 div2 相对于页面的左上角的位置

  $('#btn1').click(function () {
//    打印 div1 相对于页面左上角的位置
    var offset = $('.div1').offset()
    console.log(offset.left, offset.top) // 10 20
//    打印 div2 相对于页面左上角的位置
    offset = $('.div2').offset()
    console.log(offset.left, offset.top) // 10 70
//    打印 div1 相对于父元素左上角的位置
    var position = $('.div1').position()
    console.log(position.left, position.top) // 10 20
//    打印 div2 相对于父元素左上角的位置
    position = $('.div2').position()
    console.log(position.left, position.top) // 0 50
  })

  $('#btn2').click(function () {
    $('.div2').offset({
      left: 50,
      top: 100
    })
  })

scrollTop()

scrollLeft()

1. scrollTop():
  读取/设置滚动条的Y坐标
  
2. $(document.body).scrollTop()+$(document.documentElement).scrollTop()
  读取页面滚动条的Y坐标(兼容chrome和IE)
  
3. $('body,html').scrollTop(60);
  滚动到指定位置(兼容chrome和IE)

  /*
   需求:
   1. 得到div或页面滚动条的坐标
   2. 让div或页面的滚动条滚动到指定位置
   */
  //1. 得到div或页面滚动条的坐标
  $('#btn1').click(function () {
    console.log($('div').scrollTop())
    // console.log($('html').scrollTop()+$('body').scrollTop())
    console.log($(document.documentElement).scrollTop()+$(document.body).scrollTop()) // 兼容IE/Chrome
  })
  //2. 让div或页面的滚动条滚动到指定位置
  $('#btn2').click(function () {
    $('div').scrollTop(200)
    $('html,body').scrollTop(300)
  })

练习（回到顶部）

代码传送门

获取/设置标签的尺寸数据

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

筛选

在这里插入图片描述

过滤

在jQuery对象中的元素对象数组中过滤出一部分元素来

1. first()
2. last()
3. eq(index|-index)
4. filter(selector)
5. not(selector)
6. has(selector)

  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')

查找

在已经匹配出的元素集合中根据选择器查找孩子/父母/兄弟标签
1. children(): 子标签中找
2. find() : 后代标签中找
3. parent() : 父标签
4. prevAll() : 前面所有的兄弟标签
5. nextAll() : 后面所有的兄弟标签
6. siblings() : 前后所有的兄弟标签

  var $ul = $('ul')
  //1. ul标签的第2个span子标签
  //$ul.children('span:eq(1)').css('background', 'red')

  //2. ul标签的第2个span后代标签
  // $ul.find('span:eq(1)').css('background', 'red')

  //3. ul标签的父标签
  // $ul.parent().css('background', 'red')

  //4. id为cc的li标签的前面的所有li标签
  var $li = $('#cc')
  // $li.prevAll('li').css('background', 'red')

  //5. id为cc的li标签的所有兄弟li标签
  $li.siblings('li').css('background', 'red')

文档

在这里插入图片描述

1. 添加/替换元素
  * append(content)
    向当前匹配的所有元素内部的最后插入指定内容
  * prepend(content)
    向当前匹配的所有元素内部的最前面插入指定内容
  * before(content)
    将指定内容插入到当前所有匹配元素的前面
  * after(content)
    将指定内容插入到当前所有匹配元素的后面替换节点
  * replaceWith(content)
    用指定内容替换所有匹配的标签删除节点
2. 删除元素
  * empty()
    删除所有匹配元素的子元素
  * remove()
    删除所有匹配的元素

  //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()

练习（增删记录）

代码传送门

    //2. 生成对应的<tr>标签结构, 并插入#employeeTable的tbody中
    /*
     <tr>
       <td>Bob</td>
       <td>bob@tom.com</td>
       <td>10000</td>
       <td><a href="deleteEmp?id=003">Delete</a></td>
     </tr>
     */
    var $xxx = $('<tr></tr>')
      .append('<td>'+empName+'</td>') // 拼串
      .append('<td>'+email+'</td>')
      .append('<td>'+salary+'</td>')
      .append('<td><a href="deleteEmp?id="'+Date.now()+'>Delete</a></td>')
      .appendTo('#employeeTable>tbody')
      .find('a')
      .click(clickDelete)

  // 给所有删除链接绑定点击监听
  $('#employeeTable a').click(clickDelete)

  /*
  点击删除的回调函数
   */
  function clickDelete () {
    var $tr = $(this).parent().parent()
    var name = $tr.children(':first').html()
    if(confirm('确定删除'+name+'吗?')) {
      $tr.remove()
    }

    return false
  }

事件

在这里插入图片描述

绑定、解绑、坐标、相关处理

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()

  //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()
    }
  })

事件委托

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)

  // 设置事件委托
  $('ul').delegate('li span', 'click', function () {
    // console.log(this)
    $(this).parent().css("background","red")
    // this.style.background = 'red'
  })

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

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

代码传送门

面试题

	区别mouseover与mouseenter?
		* mouseover: 在移入子元素时也会触发, 对应mouseout
		* mouseenter: 只在移入当前元素时才触发, 对应mouseleave
									hover()使用的就是mouseenter()和mouseleave()
	区别on('eventName', fun)与eventName(fun)
		* on('eventName', fun): 通用, 但编码麻烦
		* eventName(fun): 编码简单, 但有的事件没有对应的方法

练习（轮播图）

代码传送门

效果

在这里插入图片描述

淡入淡出

淡入淡出: 不断改变元素的透明度(opacity)来实现的
1. fadeIn(): 带动画的显示
2. fadeOut(): 带动画隐藏
3. fadeToggle(): 带动画切换显示/隐藏

  var $div1 = $('.div1')

  $('#btn1').click(function () {
    // $div1.fadeOut()
    // $div1.fadeOut('slow')
    $div1.fadeOut(1000, function () {
      alert('动画完成了!!!')
    })
  })

  $('#btn2').click(function () {
    $div1.fadeIn()
  })

  $('#btn3').click(function () {
    $div1.fadeToggle()
  })

滑动

滑动动画: 不断改变元素的高度实现
1. slideDown(): 带动画的展开
2. slideUp(): 带动画的收缩
3. slideToggle(): 带动画的切换展开/收缩

  var $div1 = $('.div1')

  // 1. 点击btn1, 向上滑动
  $('#btn1').click(function () {
    $div1.slideUp(3000)
  })

  // 2. 点击btn2, 向下滑动
  $('#btn2').click(function () {
    $div1.slideDown()
  })

  // 3. 点击btn3, 向上/向下切换
  $('#btn3').click(function () {
    $div1.slideToggle()
  })

显示隐藏

显示隐藏，默认没有动画, 动画(opacity/height/width)
1. show(): (不)带动画的显示
2. hide(): (不)带动画的隐藏
3. toggle(): (不)带动画的切换显示/隐藏

  /*
  需求:
  1. 点击btn1, 立即显示
  2. 点击btn2, 慢慢显示
  3. 点击btn3, 慢慢隐藏
  4. 点击btn4, 切换显示/隐藏
   */
  var $div1 = $('.div1')
  //1. 点击btn1, 立即显示
  $('#btn1').click(function () {
    $div1.show()
  })

  //2. 点击btn2, 慢慢显示
  $('#btn2').click(function () {
    $div1.show(1000)
  })

  //3. 点击btn3, 慢慢隐藏
  $('#btn3').click(function () {
    $div1.hide(1000)
  })

  //4. 点击btn4, 切换显示/隐藏
  $('#btn4').click(function () {
    $div1.toggle(1000)
  })

自定义动画

jQuery动画本质 : 在指定时间内不断改变元素样式值来实现的
1. animate(): 自定义动画效果的动画
2. stop(): 停止动画

  /*
   需求：
    1. 逐渐扩大
      1). 宽/高都扩为200px
      2). 宽先扩为200px, 高后扩为200px
    2. 移动到指定位置
      1).移动到(500, 100)处
      2).移动到(100, 20)处
    3.移动指定的距离
      1). 移动距离为(100, 50)
      2). 移动距离为(-100, -20)
    4. 停止动画
   */
  var $div1 = $('.div1')

  /*
   1. 逐渐扩大
     1). 宽/高都扩为200px
     2). 宽先扩为200px, 高后扩为200px
   */
  $('#btn1').click(function () {
    /*
    $div1.animate({
      width: 200,
      height: 200
    }, 1000)
    */
    $div1
      .animate({
        width: 200
      }, 1000)
      .animate({
        height: 200
      }, 1000)

  })

  /*
   2. 移动到指定位置
     1).移动到(500, 100)处
     2).移动到(100, 20)处
   */
  $('#btn2').click(function () {
    // 1).移动到(500, 100)处
    /*
    $div1.animate({ // 向右下移动
      left: 500,
      top: 100
    }, 1000)
    */

    // 2).移动到(100, 20)处
    $div1.animate({ // 向左上移动
      left: 100,  // 300
      top: 20  // 50
    }, 1000)
  })

  /*
   3.移动指定的距离
     1). 移动距离为(100, 50)
     2). 移动距离为(-100, -20)
   */
  $('#btn3').click(function () {
    // 1). 移动距离为(100, 50)
    /*$div1.animate({
      left: '+=100',
      top: '+=50'
    }, 1000)*/

    // 2). 移动距离为(-100, -20)
    $div1.animate({
      left: '-=100',
      top: '-=20'
    }, 3000)
  })

  $('#btn4').click(function () {
    $div1.stop()
  })

补充内容

多库共存

问题 : 如果有2个库都有 $, 就存在冲突解决 : j Q u e r y 库可以释放$ 的使用权, 让另一个库可以正常使用, 此时jQuery库只能使用jQuery了
API : jQuery.noConflict()

(function (w) {
    w.$ = function () {
        console.log('aaa')
    }
})(window)

<script src="js/myLib.js" type="text/javascript"></script>
<script src="js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  //释放$的使用权,让另一个库可以正常使用
  jQuery.noConflict()

  //使用的是myLib.js中的$
  $()

  //使用jQuery
  jQuery(function () {
    jQuery('body')
  })
</script>

window.onload与 $(document).ready()

区别: window.onload与 $(document).ready()
  * window.onload
    * 包括页面的图片加载完后才会回调(晚)
    * 只能有一个监听回调

  * $(document).ready()
    * 等同于: $(function(){})
    * 页面加载完就回调(早)
    * 可以有多个监听回调

  /*
   需求：
   1. 直接打印img的宽度，观察其值
   2. 在 $(function(){}) 中 打印 img 的宽度
   3. 在 window.onload 中打印宽度
   4. 在 img 加载完成后打印宽度
   */
  var $logo = $('#logo')
  console.log($logo.width()) // 0
  $(function () {
    console.log('$1()', $logo.width())
  })
  $(function () {
    console.log('$2()', $logo.width())
  })

  window.onload = function () {
    console.log('onload1()')
  }
  window.onload = function () {
    console.log('onload2()', $logo.width())
  }

  $logo.on('load', function () {
    console.log('load', this.width)
  })

jQuery插件

在这里插入图片描述

基本扩展方式

扩展方式

1. 扩展jQuery的工具方法
  $.extend(object)
  
2. 扩展jQuery对象的方法
  $.fn.extend(object)

/*
 扩展jQuery的工具方法 : $.extend(object)
   min(a, b) : 返回较小的值
   max(c, d) : 返回较大的值
   leftTrim() : 去掉字符串左边的空格
   rightTrim() : 去掉字符串右边的空格
 */

//正则
/*
 ^   匹配字符串开始
 \s  匹配空格
 +   匹配一次或者多次
 $   匹配字符串的末尾
 */
//扩展$ 
$.extend({
  min: function (a, b) {
    return (a < b) ? a : b
  },
  max: function (a, b) {
    return (a > b) ? a : b
  },
  leftTrim: function (strToBeTrimed) {
    return strToBeTrimed.replace(/^\s+/, '')
  },
  rightTrim: function (strToBeTrimed) {
    return strToBeTrimed.replace(/\s+$/, '')
  }
})


//扩展 $('#id').XXXXX
//$.fn.extend(object)
// checkAll() : 全选
// unCheckAll() : 全不选
// reverseCheck() : 全反选
$.fn.extend({
  checkAll: function () {
    // console.log('checkAll')
    this.prop('checked', true)
  },
  unCheckAll: function () {
    this.prop('checked', false)
  },
  reverseCheck: function () {
    this.each(function () {
      this.checked = !this.checked
    })
  }
})

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

  // 得到最大最小值
  var a = 1
  var b = 2
  var result_min = $.min(a, b)
  var result_max = $.max(a, b)
  console.log(result_min)
  console.log(result_max)

  // 左trim 右trim
  var str = '   悟空    '
  console.log('|' + str + '|')
  var resultStrLeft = $.leftTrim(str)
  console.log('|' + resultStrLeft + '|')
  var resultStrRight = $.rightTrim(str)
  console.log('|' + resultStrRight + '|')

  //全选
  $('#checkedAllBtn').click(function () {
    $(':checkbox').checkAll()
  })

  //全不选
  $('#checkedNoBtn').click(function () {
    $(':checkbox').unCheckAll()
  })

  //反选
  $('#reverseCheckedBtn').click(function () {
    $(':checkbox').reverseCheck()
  })

validate

<form id="myForm" action="xxx">
  <p>用户名(必须的, 最小2位): <input name="name" type="text" required minlength="2"></p>
  <p>密码(必须的, 6到8位): <input id="password" name="pwd" type="password" required minlength="6" maxlength="8"></p>
  <p>确认密码(与密码相同): <input name="pwd2" type="password" equalTo="#password"></p>
  <input class="submit" type="submit" value="提交">
</form>

<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
  /*
  声明式验证
   */
  $(function () {
    $('#myForm').validate({
      messages: {
        name: {
          required: '用户名是必须的',
          minlength: '用户名的最小长度是2'
        },
        pwd: {
          required: '密码是必须的',
          minlength: '密码的最小长度是6',
          maxlength: '密码的最大长度是8'
        },
        pwd2: {
          equalTo: '确认密码必须与密码相同'
        }
      }
    })
  })
</script>

悠闲的线程池

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
1
评论
jQuery学习

文章目录初始jQueryjQuery的两把利器核心函数核心对象使用jQuery核心函数选择器练习工具练习使用jQuery对象属性CSS设置css样式/读取css值获取/设置标签的位置数据练习（回到顶部）获取/设置标签的尺寸数据筛选过滤查找文档练习（增删记录）事件绑定、解绑、坐标、相关处理事件委托面试题练习（轮播图）效果淡入淡出滑动显示隐藏自定义动画补充内容多库共存window.onload与 $(document).ready()jQuery插件基本扩展方式validate初始jQuery <!
复制链接

扫一扫