jQuery

目录

• jQuery
  • 查找标签
    • 基本选择器
    • 组合选择器/分组与嵌套
  • 基本筛选器
    • 属性选择器
    • 表单筛选器
    • 筛选器方法
    • 操作标签
  • 事件
    • 阻止后续事件执行
    • 阻止事件冒泡
    • 事件委托
    • 页面加载
    • 动画效果
    • 补充

jQuery

基本语法： jQuery(选择器).action()或 $(选择器).action()

查找标签

基本选择器

选择器	演示
id选择器	$('#d1')
class选择器	$('.c1')
标签选择器	$('span')

注意：jQuery对象变成标签对象$('#d1')[0] ,document.getElementById('d1')

​ 标签对象如何转jQuery对象$(document.getElementById('d1'))

组合选择器/分组与嵌套

选择器	描述
$('div')	找到所有的div标签
$('div.c1')	找到所有div下class是c1的标签
$('div#d1')	找到div下id是d1的 标签
$('*')	找到所有的标签包括html head等
$('#d1,.c1,p')	并列+混用
$('div span')	后代
$('div>span')	儿子
$('div+span')	毗邻
$('div~span')	弟弟

<span>span</span>
<span>span</span>
<div id="d1">div
    <span>div>span</span>
    <p id="d2">div>p
        <span>div>p>span</span>
    </p>
    <span>div>span</span>
</div>
<div class="c1"></div>
<span>span</span>
<span>span</span>

基本筛选器

实例	描述
$('ul li')	索取所有的序列标签
$("p:first")	选取第一个
$("p:last")	选取最后一个
$("tr:even")	选取偶数索引(包含0)
$("tr:odd")	选取奇数索引
$('ul li:gt(2)')	选取索引大于2 的索引
$('ul li:lt(2)')	选取索引小于2 的索引
'ul li:not("#d1")')	移除满足条件的标签
$('div:has("p")')	选取出包含一个或多个标签在内的标签

<ul>
    <li>101</li>
    <li>102</li>
    <li>103</li>
    <li>104</li>
    <li>105</li>
    <li>106</li>
    <li class="c1">107</li>
    <li>108</li>
    <li id="d1">109</li>
    <li>110</li>
</ul>

------------------------------------------
<div>div
    <p></p>
    <span></span>

</div>
<div>div
    <a href=""></a>
</div>

属性选择器

属性	描述
[attribute=value]	属性等于
[attribute!=value]	属性不等于

// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签

表单筛选器

选择器	实例	描述
:text	$(':text')	所有带有 type="text" 的 input 元素
:password	$(':password')	所有带有 type="password" 的 input 元素

例如还有：:file , :radio , :checkbox , :submit , :reset , :button

表单对象属性

属性	实例	描述
:enabled	$(":enabled")	所有启用的元素
:disabled	$(":disabled")	所有禁用的元素
:checked	$(":checked")	所有选中的复选框选项
:selected	$(":selected")	所有选定的下拉列表元素

特殊案例

$('input:checked') # 自己加一个限制条件，$(':selected') # 它不会 只拿selected $('input:checked') # 自己加一个限制条件

筛选器方法

下一个标签

$("#id").next() , $("#id").nextAll() , $("#id").nextUntil("#i2")

上一个标签
$("#id").prev() , $("#id").prevAll() , $("#id").prevUntil("#i2")

父类标签

标签	描述
$("#id").parent()	找到它的父元素
$("#id").parents()	查找当前元素的所有的父辈元素
$("#id").parentsUntil()	查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

儿子和兄弟元素

标签	描述
$("#id").children();	儿子们
$("#id").siblings()；	兄弟们

查找

$("div").find("p") = $("div p")

筛选

$("div").filter(".c1") = $("div.c1")

补充

标签	描述
.first()	获取匹配的第一个元素
.last()	获取匹配的最后一个元素
.not()	从匹配元素的集合中删除与指定表达式匹配的元素
.has()	保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq()	索引值等于指定值的元素

操作标签

样式操作

操作	描述
addClass();	添加指定的css类名
removeClass();	移除指定的css类名
hasClass();	判断样式是否存在
taggleClass();	切换css类名，如果有就移除，没有就添加

如：开灯和模态框

CSS操作

<p>111</p>

<p>222</p>
将上列的第一个p标签变成红色，第二个p变成绿色

$('p').first().css('color','red').next().css('color','green')

​ 注意：jQuery的对象调用的jQuery方法之后返回的还是当前的 jQuery对象，就是继续调用其他的方法

位置操作

属性	描述
offset()	获取匹配元素在当前窗口的相对偏移或设置元素位置
position()	获取匹配元素相对父元素的偏移
scrollTop()	获取匹配元素相对滚动条顶部的偏移，加了参数就是设置
scrollLeft()	获取匹配元素相对滚动条左侧的偏移

如：回到顶部

尺寸

$('p').height()  # 文本
20
$('p').width()
1670
$('p').innerHeight()  # 文本+padding
26
$('p').innerWidth()
1674
$('p').outerHeight()  # 文本+padding+border
26
$('p').outerWidth()
1674

文本操作

对比js和jquery

js	jQuery
innerText	text()括号内不加参数就是获取加了就是设置
innerHTML	html()

• 实例：

  $('div').text('1')
  $('div').html('2')
  $('div').text('<h1>1</h1>')
  $('div').html('<h1>2</h1>')js
  

获取值操作

对比js和jQuery

j's	jQuery
.value	.val()

• 实例

  
  $('#d1').val()
  "sasdasdsadsadad"
  $('#d1').val('520快乐')  # 括号内不加参数就是获取加了就是设置
  
  w.fn.init [input#d1]
  $('#d2').val()
  "C:\fakepath\01_测试路由.png"
  $('#d2')[0].files[0]  # 牢记两个对象之间的转换
  File {name: "01_测试路由.png", lastModified: 1557043083000, lastModifiedDate: Sun May 05 2019 15:58:03 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 28733, …}
  

属性操作

对比js和jquery

j's	jquery	描述
setAttribute()	attr(name,value)	为所有匹配元素设置一个属性值
getAttribute()	attr(name)	返回第一个匹配元素的属性值
removeAttribute()	removeAttr(name)	从每一个匹配的元素中删除一个属性

prop和attr的区别：

• 对于标签上有的能看到的属性和自定义属性都用attr

• 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。

文档处理

对比js和jQuery

js	jQuery
createElement('p')	$('<p>')
appendChild()	append()

添加到指定元素内部的后面

操作	描述
$(A).append(B)	把B追加到A
$(A).appendTo(B	把A追加到B

添加到指定元素内部的前面

操作	描述
$(A).prepend(B)	把B前置到A
$(A).prependTo(B)	把A前置到B

添加到指定元素外部的后面

操作	描述
$(A).after(B)	把B放到A的后面
$(A).insertAfter(B)	把A放到B的后面

添加到指定元素外部的前面

操作	描述
$(A).before(B)	把B放到A的前面
$(A).insertBefore(B)	把A放到B的前面

移除和清空元素

操作	描述
remove()	从DOM中删除所有匹配的元素
empty()	删除匹配的元素集合中所有的子节点。

• 实例

  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>克隆</title>
    <style>
      #b1 {
        background-color: deeppink;
        padding: 5px;
        color: white;
        margin: 5px;
      }
      #b2 {
        background-color: dodgerblue;
        padding: 5px;
        color: white;
        margin: 5px;
      }
    </style>
  </head>
  <body>
  
  <button id="b1">屠龙宝刀，点击就送</button>
  <hr>
  <button id="b2">屠龙宝刀，点击就送</button>
  
  <script src="jquery-3.2.1.min.js"></script>
  <script>
    // clone方法不加参数true，克隆标签但不克隆标签带的事件
    $("#b1").on("click", function () {
      $(this).clone().insertAfter(this);
    });
    // clone方法加参数true，克隆标签并且克隆标签带的事件
    $("#b2").on("click", function () {
      $(this).clone(true).insertAfter(this);
    });
  </script>
  </body>
  </html>
  
  
  

事件

常用事件

click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})

事件的两种方式

// 第一种
    $('#d1').click(function () {
            alert('你好')
    });
  
// 第二种(功能更加强大 还支持事件委托)
    $('#d2').on('click',function () {
            alert('我不好')
    })

• 克隆事件

  <button id="d1">屠龙宝刀，点击就送</button>
  
  <script>
      $('#d1').on('click',function () {
          // console.log(this)  // this指代是当前被操作的标签对象
          // $(this).clone().insertAfter($('body'))  // clone默认情况下只克隆html和css 不克隆事件
          $(this).clone(true).insertAfter($('body'))  // 括号内加true即可克隆事件
  
      })
  </script>
  

• 自定义模态框

  """
  模态框内部本质就是给标签移除或者添加上hide属性
  """
  

• 左侧菜单

  <script>
      $('.title').click(function () {
          // 先给所有的items加hide
          $('.items').addClass('hide')
          // 然后将被点击标签内部的hide移除
          $(this).children().removeClass('hide')
      })
  </script>
  <!--尝试用一行代码搞定上面的操作-->
  

• 返回顶部

  <script>
      $(window).scroll(function () {
          if($(window).scrollTop() > 300){
              $('#d1').removeClass('hide')
          }else{
              $('#d1').addClass('hide')
          }
      })
  </script>
  

• 自定义登陆校验

  # 在获取用户的用户名和密码的时候 用户如果没有填写 应该给用户展示提示信息
  <p>username:
      <input type="text" id="username">
      <span style="color: red"></span>
  </p>
  <p>password:
      <input type="text" id="password">
      <span style="color: red"></span>
  </p>
  <button id="d1">提交</button>
  
  <script>
      let $userName = $('#username')
      let $passWord = $('#password')
      $('#d1').click(function () {
          // 获取用户输入的用户名和密码 做校验
          let userName = $userName.val()
          let passWord = $passWord.val()
          if (!userName){
              $userName.next().text("用户名不能为空")
          }
          if (!passWord){
              $passWord.next().text('密码不能为空')
          }
      })
      $('input').focus(function () {
          $(this).next().text('')
      })
  </script>
  

• input实时监控

  <input type="text" id="d1">
  
  <script>
      $('#d1').on('input',function () {
          console.log(this.value)  
      })
  </script>
  

• hover事件

  <script>
      // $("#d1").hover(function () {  // 鼠标悬浮 + 鼠标移开
      //     alert(123)
      // })
  
      $('#d1').hover(
          function () {
              alert('我来了')  // 悬浮
      },
          function () {
              alert('我溜了')  // 移开
          }
      )
  </script>
  

• 键盘按键按下事件

  <script>
      $(window).keydown(function (event) {
          console.log(event.keyCode)
          if (event.keyCode === 16){
              alert('你按了shift键')
          }
      })
  </script>
  

阻止后续事件执行

<script>
    $('#d2').click(function (e) {
        $('#d1').text('宝贝 你能看到我吗?')
        // 阻止标签后续事件的执行 方式1
        // return false
        // 阻止标签后续事件的执行 方式2
        // e.preventDefault()
    })
</script>

阻止事件冒泡

<script>
        $('#d1').click(function () {
            alert('div')
        })
        $('#d2').click(function () {
            alert('p')
        })
        $('#d3').click(function (e) {
            alert('span')
            // 阻止事件冒泡的方式1
            // return false
            // 阻止事件冒泡的方式2
            // e.stopPropagation()
        })
</script>

事件委托

<button>是兄弟，就来砍我!!!</button>

<script>
    // 给页面上所有的button标签绑定点击事件
    // $('button').click(function () {  // 无法影响到动态创建的标签
    //     alert(123)
    // })

    // 事件委托     
    $('body').on('click','button',function () {
        alert(123)  // 在指定的范围内 将事件委托给某个标签 无论该标签是事先写好的还是后面动态创建的
    })
</script>

页面加载

# 等待页面加载完毕再执行代码
window.onload = function(){
  // js代码
}

"""jQuery中等待页面加载完毕"""
# 第一种
$(document).ready(function(){
  // js代码
})
# 第二种
$(function(){
  // js代码
})
# 第三种
"""直接写在body内部最下方"""

动画效果

$('#d1').hide(5000)
w.fn.init [div#d1]
$('#d1').show(5000)
w.fn.init [div#d1]
$('#d1').slideUp(5000)
w.fn.init [div#d1]
$('#d1').slideDown(5000)
w.fn.init [div#d1]
$('#d1').fadeOut(5000)
w.fn.init [div#d1]
$('#d1').fadeIn(5000)
w.fn.init [div#d1]
$('#d1').fadeTo(5000,0.4)
w.fn.init [div#d1]      

补充

# each()
# 第一种方式
$('div')
w.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]
$('div').each(function(index){console.log(index)})
VM181:1 0
VM181:1 1
VM181:1 2
VM181:1 3
VM181:1 4
VM181:1 5
VM181:1 6
VM181:1 7
VM181:1 8
VM181:1 9

$('div').each(function(index,obj){console.log(index,obj)})
VM243:1 0 <div>​1​</div>​
VM243:1 1 <div>​2​</div>​
VM243:1 2 <div>​3​</div>​
VM243:1 3 <div>​4​</div>​
VM243:1 4 <div>​5​</div>​
VM243:1 5 <div>​6​</div>​
VM243:1 6 <div>​7​</div>​
VM243:1 7 <div>​8​</div>​
VM243:1 8 <div>​9​</div>​
VM243:1 9 <div>​10​</div>​

# 第二种方式
$.each([111,222,333],function(index,obj){console.log(index,obj)})
VM484:1 0 111
VM484:1 1 222
VM484:1 2 333
(3) [111, 222, 333]
"""
有了each之后 就无需自己写for循环了 用它更加的方便
"""
# data()
"""
能够让标签帮我们存储数据 并且用户肉眼看不见
"""
$('div').data('info','回来吧，我原谅你了!')
w.fn.init(10) [div#d1, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]
               
$('div').first().data('info')
"回来吧，我原谅你了!"
$('div').last().data('info')
"回来吧，我原谅你了!"
               
$('div').first().data('xxx')
undefined
$('div').first().removeData('info')
w.fn.init [div#d1, prevObject: w.fn.init(10)]
           
$('div').first().data('info')
undefined
$('div').last().data('info')
"回来吧，我原谅你了!"