jQuery

                          jQuery

                          jQuery对象

                          jQuery对象就是通过jQuery包装DOM对象后产生的对象。

                          jQuery对象是jQuery独有的。如果一个对象是jQuery对象,那么它就可以使用jQuery里的方法:例如$(“#i1”).html()。

                          $("#i1").html()的意思是:获取id值为i1的元素的html代码。其中是jQuery里的方法。

                          html()相当于: document.getElementById("i1").innerHTML;

                          一个约定,我们在声明一个jQuery对象变量的时候在变量名前面加上$:

                          var $variable = jQuery对像
                          var variable = DOM对象
                          $variable[0] // jQuery对象转成DOM对象

                          拿上面那个例子举例,jQuery对象和DOM对象的使用:

                          $("#i1").html(); // jQuery对象可以使用jQuery的方法 
                          $("#i1")[0].innerHTML; // DOM对象使用DOM的方法

                          jQuery基础语法

                          $(selector).action()

                          查找标签

                          基本选择器

                          id选择器:

                          $("#id")

                          标签选择器:

                          $("tagName")

                          class选择器:

                          $(".className")

                          配合使用:

                          $("div.c1")   // 找到有c1 class类的div标签

                          所有元素选择器:

                          $("*")

                          组合选择器:

                          $("#id, .className, tagName")

                          层级选择器

                          x和y可以为任意选择器

                          $("x y"); // x的所有后代y(子子孙孙) 
                          $("x > y"); // x的所有儿子y(儿子) 
                          $("x + y") // 找到所有紧挨在x后面的y 
                          $("x ~ y") // x之后所有的兄弟y

                          基本筛选器

                          :first // 第一个 
                          :last // 最后一个 
                          :eq(index) // 索引等于index的那个元素 
                          :even // 匹配所有索引值为偶数的元素,从0开始计数 
                          :odd // 匹配所有索引值为奇数的元素,从0开始计数 
                          :gt(index) // 匹配所有大于给定索引值的元素 
                          :lt(index) // 匹配所有小于给定索引值的元素 
                          :not(元素选择器) / / 移除所有满足not条件的标签 
                          :has(元素选择器) // 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

                          例子:

                          $("div:has(h1)") // 找到所有后代中有h1标签的div标签 
                          $("div:has(.c1)") // 找到所有后代中有c1样式类的div标签 
                          $( "li:not(.c1)") // 找到所有不包含c1样式类的li标签 
                          $("li:not(:has(a))") // 找到所有后代中不含a标签的li标签

                          属性选择器

                          [attribute]
                          [attribute =value] // 属性等于 
                          [attribute!=value] // 属性不等于

                          例子:

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

                          表单筛选器

                          :text
                          :password 
                          :file
                          :radio
                          :checkbox
                          :submit
                          :reset
                          :button

                          例子:

                          $(":checkbox")   // 找到所有的checkbox

                          表单对象属性:

                          :enabled
                          :disabled
                          :checked  //被选中的
                          :selected

                          例子:

                          找到可用的input标签

                          <form>
                            <input name="email" disabled="disabled" />
                            <input name="id" />
                          </form>
                          
                          $( "input:enabled")   // 找到可用的input标签

                          找到被选中的option:

                          <select id="s1">
                            <option value="beijing">北京市</option>
                            <option value="shanghai">上海市</option>
                            <option selected value="guangzhou">广州市</option>
                            <option value="shenzhen">深圳市</option>
                          </select>
                          
                          $( "option:selected")   // 找到所有被选中的option

                          筛选器方法

                          下一个元素:

                          $("#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")

                          eg:
                          $("div").find("p")
                          r.fn.init(6)?[p#p1, p.help-block, p#p2.divider, p#p3.divider, p, p, prevObject: r.fn.init(39)]
                                        
                          $("div p")
                          r.fn.init(6)?[p#p1, p.help-block, p#p2.divider, p#p3.divider, p, p, prevObject: r.fn.init(1)]

                          筛选

                          筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。

                          $("div").filter(".c1")   // 从结果集中过滤出有c1样式类的

                          等价于$("div.c1")

                          $("div").filter(".radio")
                          r.fn.init(2)?[div.radio, div.radio, prevObject: r.fn.init(39)]
                          
                          $("div.radio")
                          r.fn.init(2)?[div.radio, div.radio, prevObject: r.fn.init(1)]

                          补充:

                          .first() // 获取匹配的第一个元素 
                          .last() // 获取匹配的最后一个元素 
                          .not() // 从匹配元素的集合中删除与指定表达式匹配的元素 
                          .has() / / 保留包含特定后代的元素,去掉那些不含有指定后代的元素。
                          .eq() // 索引值等于指定值的元素
                          $(".checkbox").first()
                          r.fn.init?[div.checkbox, prevObject: r.fn.init(4)]
                          
                          $(".checkbox").last()
                          r.fn.init?[div.checkbox, prevObject: r.fn.init(4)]
                          
                          $(".checkbox").not(".radio")
                          r.fn.init(4)?[div.checkbox, div.checkbox, div.checkbox, div.checkbox, prevObject: r.fn.init(4)]
                          
                          $(".row").has(".o1")
                          r.fn.init?[prevObject: r.fn.init(5)]
                          
                          $(".row").has(".form-group")
                          r.fn.init?[div.row, prevObject: r.fn.init(5)]
                          
                          $(".row").eq(1)
                          r.fn.init?[div.row, prevObject: r.fn.init(5)]

                          操作标签

                          样式操作

                          样式类

                          addClass(); // 添加指定的CSS类名。
                          removeClass(); // 移除指定的CSS类名。
                          hasClass(); // 判断样式存不存在 
                          toggleClass(); // 切换CSS类名,如果有就移除,如果没有就添加。

                          CSS

                          css("color","red") // DOM操作:tag.style.color="red"
                          var a = $(".checkbox [type='checkbox']").first()
                          undefined
                          
                          console.log(a);
                          VM4225:1 r.fn.init?[input, prevObject: r.fn.init(4)]
                          undefined
                          
                          a.css("color","red")
                          r.fn.init?[input, prevObject: r.fn.init(4)]

                          示例:

                          $("p").css("color", "red"); // 将所有p标签的字体设置为红色

                          位置操作

                          offset() // 获取匹配元素在当前窗口的相对偏移或设置元素位置 
                          position() // 获取匹配元素相对父元素的偏移 
                          scrollTop() // 获取匹配元素相对滚动条顶部的偏移 
                          scrollLeft( ) // 获取匹配元素相对滚动条左侧的偏移

                          .offset()方法允许我们检索一个元素相对于文档(document)的当前位置。

                          .position()和的差别在于:是相对于相对于父级元素的位移。

                          height()
                          width()
                          innerHeight()
                          innerWidth()
                          outerHeight()
                          outerWidth()

                          文本操作

                          HTML代码:

                          html() // 取得第一个匹配元素的html内容 
                          html(val) // 设置所有匹配元素的html内容

                          文本值:

                          text() // 取得所有匹配元素的内容 
                          text(val) // 设置所有匹配元素的内容

                          值:

                          val() // 取得第一个匹配元素的当前值 
                          val(val) // 设置所有匹配元素的值 
                          val([val1, val2]) // 设置多选的checkbox、多选select的值

                          例如:

                          <select multiple id ="s1" >
                              <option value ="1" > 1 </option>
                              <option value ="2" > 2 </option>
                              <option value ="3" > 3 </option>
                              </select>
                          <body>
                           <input type ="checkbox" value ="basketball" name ="hobby" > 篮球
                           <input type ="checkbox" value ="football" name ="hobby" > 足球
                          </body>

                          设置值:

                          $("[name='hobby']").val(['basketball', 'football' ]);
                          $( "#s1").val(["1", "2"])
                          $("option")
                          r.fn.init(3)?[option, option, option, prevObject: r.fn.init(1)]
                          
                          $("option").html()
                          " 1 "
                          
                          $("option").text()
                          " 1  2  3 "
                          
                          $("option").html('hhhgfdghjhg')
                          r.fn.init(3)?[option, option, option, prevObject: r.fn.init(1)]
                          
                          $("option").text(123)
                          r.fn.init(3)?[option, option, option, prevObject: r.fn.init(1)]
                          
                          $("[name='hobby']").val(['basketball', 'football' ]);
                          r.fn.init(2)?[input, input, prevObject: r.fn.init(1)]
                          
                          $( "#s1").val(["1", "2"])
                          r.fn.init?[select#s1]

                          示例:

                          获取被选中的checkbox或radio的值:

                          <label for="c1">女</label>
                          <input name="gender" id="c1" type="radio" value="0">
                          <label for="c2">男</label>
                          <input name="gender" id="c2" type="radio" value="1">

                          可以使用:

                          $("input[name='gender']:checked").val()

                          prop和attr的区别:

                          attr全称attribute(属性)

                          prop全称property(属性)

                          虽然都是属性,但他们所指的属性并不相同

                          attr所指的属性是HTML标签属性

                          prop所指的是DOM对象属性

                          可以认为attr是显式的,而prop是隐式的

                          举个例子:

                          <input type="checkbox" id="i1" value="1">

                          针对上面的代码,

                          $("#i1").attr("checked")  // undefined
                          $("#i1").prop("checked")  // false

                          可以看到attr获取一个标签内没有的东西会得到undefined,而prop获取的是这个DOM对象的属性,因此checked为false。

                          如果换成下面的代码:

                          <input type="checkbox" checked id="i1" value="1">

                          再执行:

                          $("#i1").attr("checked")   // checked
                          $("#i1").prop("checked")  // true
                          $("#i1").attr("checked")
                          "checked"
                          $("#i1").prop("checked")
                          true

                          这已经可以证明attr的局限性,它的作用范围只限于HTML标签内的属性,而prop获取的是这个DOM对象的属性,选中返回true,没选中返回false。

                          接下来再看一下针对自定义属性,attr和prop又有什么区别:

                          <input type="checkbox" checked id="i1" value="1" me="自定义属性">

                          执行以下代码:

                          $("#i1").attr("me")   // "自定义属性"
                          $("#i1").prop("me")  // undefined
                          $("#i1").attr("me")
                          "自定义属性"
                          $("#i1").prop("me")
                          undefined

                          可以看到prop不支持获取标签的自定义属性。

                          总结一下:

                          1. 对于标签上有的能看到的属性和自定义属性都用attr
                          2. 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。

                          文档处理

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

                          $(A).append(B)// 把B追加到A
                          $(A).appendTo(B)// 把A追加到B
                          var a =$("#c1")
                          undefined
                          
                          a
                          r.fn.init?[input#c1]
                                     
                          var b = $("#i1")
                          undefined
                          
                          b
                          r.fn.init?[input#i1]
                                     
                          $(a).append(b)
                          r.fn.init?[input#c1]0: input#c1length: 1__proto__: Object(0)
                          $(b).appendTo(a)   //把b追加到a,和上年的例子一样

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

                          $(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()// 删除匹配的元素集合中所有的子节点。
                          var a = $("#c1")
                          undefined
                          
                          a.empty()

                          替换

                          replaceWith()   //这个替换不是交换,而是把前面一个替换掉
                          replaceAll()
                          var a = $("#i2")
                          undefined
                          var b = $("#i3")
                          undefined
                          a.replaceWith(b)

                          克隆

                          clone()// 参数   //可能在代码里面不显示,但是在浏览器上就会发现他克隆了
                          var a = $("#i1")
                          undefined
                          
                          a.clone();
                          r.fn.init?[input#i1, prevObject: r.fn.init(1)]

                          克隆示例:

                          <!DOCTYPE html>
                          <html lang="en">
                          <head>
                              <meta charset="UTF-8">
                              <title>Title</title>
                              <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
                              <link  rel="stylesheet">
                              <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
                          
                          </head>
                          <body>
                          <button>点我试试</button>
                          <script>
                              $("button").click(function () {
                                  $(this).clone(true).insertAfter(this)
                              })
                          </script>
                          </body>
                          </html>

                          事件

                          常用事件

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

                          事件绑定

                          两种绑定方法

                          方法一
                              $("button").click(function () {
                                  alert("您好啊")
                              })
                          
                          方法二(推荐)
                              $("button").on("click",function () {
                                  alert("你好啊")
                              })
                          1. .on( events [, selector ],function(){})
                          • events: 事件
                          • selector: 选择器(可选的)
                          • function: 事件处理函数

                          移除事件

                          1. .off( events [, selector ][,function(){}])

                          off() 方法移除用 .on()绑定的事件处理程序。

                          • events: 事件
                          • selector: 选择器(可选的)
                          • function: 事件处理函数

                          阻止后续事件执行

                          1. return false; // 常见阻止表单提交等
                          2. e.preventDefault();
                          3. 注意:

                          像click、keydown等DOM中定义的事件,我们都可以使用.on()方法来绑定事件,但是hover这种jQuery中定义的事件就不能用.on()方法来绑定了。

                          想使用事件委托的方式绑定hover事件处理函数,可以参照如下代码分两步绑定事件:

                          $('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件
                              $(this).addClass('hover');
                          });
                          
                          $('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件
                              $(this).removeClass('hover');
                          });

                          阻止事件冒泡

                          <!DOCTYPE html>
                          <html lang="en">
                          <head>
                              <meta charset="UTF-8">
                              <title>Title</title>
                              <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
                              <link  rel="stylesheet">
                              <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
                              <style>
                                  #a{
                                      width: 500px;
                                      height: 500px;
                                      background-color: red;
                                  }
                                   #b{
                                      width: 400px;
                                      height: 400px;
                                      background-color: green;
                                  }
                                  #c{
                                      width: 200px;
                                      height: 200px;
                                      background-color: black;
                                  }
                          
                              </style>
                              <script>
                            
                                   $(function(){
                          
                                      $("#a").on("click",function () {
                                          alert("第1")
                                      });
                                      $("#b").on("click",function (e) {
                                          alert("第2")
                                             e.stopPropagation()   //就这个东西阻止了事件冒泡
                                      });
                                      $("#c").on("click",function (e) {
                                          alert("第3");
                          
                                      });
                          
                                  })
                          
                          </script>
                          </head>
                          <body>
                          <div id="a">
                              <div id="b">
                                  <div id="c"></div>
                              </div>
                          </div>
                          
                          
                          </body>
                          </html>

                          事件委托

                          事件委托是通过事件冒泡的原理,利用父标签去捕获子标签的事件。

                          示例:

                          表格中每一行的编辑和删除按钮都能触发相应的事件。

                          $("table").on("click", ".delete", function () {
                            // 删除按钮绑定的事件
                          })

                          实时监听input输入值变化示例:

                          <!DOCTYPE html>
                          <html lang="en">
                          <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>实时监听input输入值变化</title>
                          </head>
                          <body>
                          <input type="text" id="i1">
                          
                          <script src="jquery-3.2.1.min.js"></script>
                          <script>
                            /*
                            * oninput是HTML5的标准事件
                            * 能够检测textarea,input:text,input:password和input:search这几个元素的内容变化,
                            * 在内容修改后立即被触发,不像onchange事件需要失去焦点才触发
                            * oninput事件在IE9以下版本不支持,需要使用IE特有的onpropertychange事件替代
                            * 使用jQuery库的话直接使用on同时绑定这两个事件即可。
                            * */
                            $("#i1").on("input propertychange", function () {
                              alert($(this).val());
                            })
                          </script>
                          </body>
                          </html>

                          动画效果

                          // 基本
                          show([s,[e],[fn]])  //里面是毫秒
                          hide([s,[e],[fn]])
                          toggle([s],[e],[fn])
                          // 滑动
                          slideDown([s],[e],[fn])
                          slideUp([s,[e],[fn]])
                          slideToggle([s],[e],[fn])
                          // 淡入淡出
                          fadeIn([s],[e],[fn])
                          fadeOut([s],[e],[fn])
                          fadeTo([[s],o,[e],[fn]])
                          fadeToggle([s,[e],[fn]])
                          // 自定义
                          animate(p,[s],[e],[fn])
                          相关文章
                          相关标签/搜索
                          白小姐四肖必选一肖四不像