Jquery

jQuery是一个快速的、小型的、具有丰富功能的JavaScript库。它的出现使得网页中的DOM、事件、动画、Ajax等操作变得更加简单。“写更少的代码，做更多的事儿”是jQuery一直坚信的开发理念。

>引入jQuery

官方下载

<scripts src="path/to/jquery.xx.js" > </script>

引入 jQuery 库，实际就是向网页添加了一个新的函数$(jQuery)。

$ 是 jQuery 中的核心函数，jQuery 的所有功能都是通过该函数来进行的，

>jQuery 的核心函数

作为工具使用
jQuery.contains()
jQuery.isArray()
jQuery.isFunction()
jQuery.isNumeric()
……

var num = 10
fuction fn(){}
console.log($.isFunction(num)) // false
console.log($.inFunction(fn))  // true

作为函数使用

将一个函数作为$的参数，这个函数会在文档加载完毕之后执行，相当于document.addEventListener("DOMContentLoaded",function(){})

$(function(){
  alert("核心函数执行了~~")
}) //文档加载完毕后执行

alert("核心函数外部~~")

将选择器字符串作为参数，jQuery 自动去网页查找元素。类似于document.querySelectorAll("...")

<button id="btn"></button>
<button id="btn01"></button>

$(function(){
  $("#btn").click(function(){
    alert("你点了我哦~")
  })
})

需要注意的是，通过 jquery 核心函数查询到的结果并不是原生 DOM，而是经过包装的新对象，我们称之为 jquery 对象。

jquery对象中为我们提供了很多新的方法，方便我们做各种DOM 操作，但是jquery对象不能直接调用原生 DOM 对象的方法。

通过我们为 jquery 对象命名时，会使用$开头加以区分。

var $box1 = $("#box1") // 获取id为box1的元素
var $news = $(".news") // 获取class为news的元素
var $hello = $("[title=hello]") // 获取title属性为hello的元素

$(function () {

    $("#btn").click(function () {

        // alert("你点我干嘛~~")

        var btn = document.getElementById("btn01"); // [object HTMLButtonElement]

        var $btn = $("#btn01"); // [object Object]

    });
});

将 DOM 对象作为参数

可以将 DOM 对象转换为 jquery 对象，从而使用 jquery 对象的方法。

var box1 = document.getElementById("box1") // 获取DOM对象
var $box1 = $(box1) // 转换为jQuery对象

 $(function () {

    $("#btn").click(function () {

        // alert("你点我干嘛~~")

        var btn = document.getElementById("btn01"); // [object HTMLButtonElement]

        var $btn = $("#btn"); // [object Object]
        
        alert($(btn))

    });
});

将 HTML 代码作为参数

会根据 html 代码来创建元素

$(function () {

    $("#btn").click(function () {

        var $h1 = $("<h1>我是一个标题</h1>"); // 会根据html代码创建元素

        $("div").append($h1);

    });
});

>jQuery对象

通过 jQuery 核心函数获取到的对象就是jQuery对象。

jQuery对象是jQuery中定义的对象，可以将其理解为是DOM对象的升级版；在jQuery对象中为我们提供了很多简单易用的方法，来帮助我们简化DOM操作。

- jQuery对象本质上是一个DOM对象的数组（类数组）
  可以通过索引获取jQuery对象中的DOM对象

<button id="btn01">点我一下</button>
<ul>
    <li id="swk">孙悟空</li>
    <li id="zbj">猪八戒</li>
    <li>沙和尚</li>
    <li>唐僧</li>
    <li>白骨精</li>
</ul>

<script>
  $("#btn01").click(function () {
      var $li = $("li")
      // alert($li[0].textContent)
      
      var text = $li.text() // 读取文本，返回所有标签中的文本
      var id = $li.attr("id") // 读取属性时，返回第一个标签的属性
      alert(id)
  })
</script>

隐式迭代

当我们修改jQuery对象时，它会自动修改jQuery中的所有元素，这一特点称为jQuery的隐式迭代。

<script>
  $("#btn01").click(function () {
      var $li = $("li")    
      $li.text("新的文本内容")
  })
</script>

链式调用

通常情况下，jQuery对象方法的返回值依然是一个jQuery对象。所以我们可以在调用一个方法后，继续调用其他的jQuery对象的方法。这一特性，称为jQuery对象的链式调用

<script>
  $("#btn01").click(function () {
      var $li = $("li")
      $li.text("新的文本内容").css({"color":"red"})
  })
</script>

>选择器集合

基础选择器

选择器	名称	举例
id选择器	$("ID属性值")	选择 id 为指定的元素对象
类选择器	$(".class属性值")	选择 class 为指定值的元素
元素选择器	$("标签名/元素名")	选择所有指定标签元素的对象
选择所有元素	$("*")	选中页面中所有的元素的对象
组合选择器	选择器1，选择器2...	选择指定选择器中的元素对象

<div id="mydiv1" class="blue">元素选择器</div>
<div id="mydiv1">id选择器1<span>span中的内容</span></div>
<span class="blue">样式选择器</span>

<script>

// id选择器
var $mydiv = $("#mydiv");
console.log($mydiv)

// 类选择器
var $class = $(".blue")
console.log($class)

// 元素选择器
var $span = $("span")
console.log($span)

// 通用选择器
var $all = $("*")
console.log($all)

</script>

层次选择器

选择器	名称	举例
后代选择器	$("父元素指定元素")	选择父元素的所有指定元素(包含第一代、第二代)
子代选择器	$("父元素 > 指定元素")	选择父元素的所有第一代指定元素
相邻选择器	$("元素 + 指定元素")	选择元素下一个指定元素(如果元素不存在，则获取不到)
同辈选择器	$("元素 ~ 指定元素")	选择元素下面的所有指定元素

表单选择器

Forms	名称	举例
表单选择器	:input	查找所有的input元素：$(":input")；注意：会匹配所有的input、textarea、select和button元素。
文本框选择器	:text	查找所有⽂本框：$(":text")
密码框选择器	:password	查找所有密码框：$(":password")
单选按钮选择器	:radio	查找所有单选按钮：$(":radio")
复选框选择器	:checkbox	查找所有复选框：$(“:checkbox”)
提交按钮选择器	:submit	查找所有提交按钮：$(“:submit”)
图像域选择器	:image	查找所有图像域：$(“:image”)
重置按钮选择器	:reset	查找所有重置按钮：$(“:reset”)
按钮选择器	:button	查找所有按钮：$(“:button”)
⽂件域选择器	:file	查找所有⽂件域：$(“:file”)

>操作属性的元素

获取属性 attr
固有属性：元素本身就有的属性(id、name、class、style)，返回值是 Boolean 的属性：checked、selected、disabled
自定义属性：用户自己定义的属性

方法	说明
attr(属性名)	设置/获取元素的指定属性
prop(属性名)	获取具有 true和false的属性值

所以，attr()和prop()的区别是什么?
如果是固有属性，attr 和 prop 方法均可操作。
如果是自定义属性，attr 可操作，prop 不可操作。
如果返回值是 boolean 类型的属性，若设置了属性，attr 返回具体的值，prop 返回 true，反之 undefined 和 false。

<input abd="aabbcc" checked="checked" id="aa" name="ch" type="checkbox"/> aa
<input id="bb" name="ch" type="checkbox"/> bb

<script>
    var name = $("#aa").attr("name");
    console.log(name); //ch
    var name2 = $("#aa").prop("name");
    console.log(name2); //ch
    // 返回值是 boolean 的属性 （元素设置了属性）
    var c1 = $("#aa").attr("checked");
    console.log(c1); //checked
    var c2 = $("#aa").prop("checked");
    console.log(c2); //true
    // 返回值是 boolean 的属性 （元素未设置属性）
    var c3 = $("#bb").attr("checked");
    console.log(c3); //undefined
    var c4 = $("#bb").prop("checked");
    console.log(c4); //false
    // 自定义属性
    var abc1 = $("#aa").attr("abd");
    console.log(abc1); //aabbcc
    var abc2 = $("#aa").prop("abd");
    console.log(abc2); //undefined
</script>

设置属性 prop

<input abd="aabbcc" checked="checked" id="aa" name="ch" type="checkbox"/> aa
<input id="bb" name="ch" type="checkbox"/> bb

<script>
    // 固有属性
    $('#aa').attr("value", "123");
    $('#bb').prop("value", "456");
    // 返回值是 boolean 的属性
    $('#aa').attr("checked", false);
    $('#bb').prop("checked", "checked");
    // 自定义属性
    $('#aa').attr("username", "admin");
    $('#bb').prop("username", "guest"); // prop() 不会解析 boolean 值
</script>

移除属性 removeAttr

方法	说明
removeAttr(”属性名“)	移除元素的指定属性

<script>
    var name = $("#aa").removeAttr("checked");
</script>

总结：
如果属性的类型是 boolean，则使用 prop( )方法，反之使用 attr( )方法。

>操作元素的样式

方法	说明
attr("class")	获取 class 属性的值，即样式名称
attr("class","样式名")	修改 class 属性的值，会覆盖原始样式
addClass(”样式名“)	添加样式的名称
css( )	添加具体的样式
removeClass("样式名")	移除样式名称

添加元素的具体样式
1)）css({'样式名':'样式值'，'样式名2','样式值2'})
例：css({'background-color':'red','color':'#fff'});
2）css('样式名','样式值')
例：css('color','white')

<script>
    $("#aa").attr('color','blue');
    $("#aa").addClass('px-2');
    $("#aa").css({'background-color':'red','color':'#fff'});
    $("#aa").removeClass("px-2")
</script>

>操作元素的内容

方法	说明
html( )	获取元素的 html 内容（非表单元素）
html("html","内容")	设置元素的 html 内容（非表单元素）
text( )	获取元素的文本内容，不包含 html（非表单元素）
text("html","内容")	设置元素的文本内容，不包含 html （非表单元素）
var( )	获取元素value 值（表单元素）
var('值')	设定元素的 value 值（表单元素）

表单元素：
文本框 text；密码框 password；单选框 radio；复选框 checkbox；隐藏域 hidden；文本域 textarea；下拉框select
非表单元素：
div；span；h1~h6；ul；li...

<div id="html1"></div>
<div id="html2"></div>
<div id="text"></div>
<input type="text" name="username" id="oop" value="oop" /> 

<script>
    // 非表单元素
    $("#html1").html("青岛");
    $("#html2").html("<h2>TsingTao<h2>");
    $("#text").text("山东") //山东
    $("#text").text("<h2>TsingTao<h2>") // <h2>TsingTao<h2>
    // 表单元素
    $("#oop").var("青岛啤酒")
</script>

>创建与添加元素

创建元素

方法	说明
$('元素内容')	$('<p>欢迎来到青岛</p>')

<script>
    var p = $('<p>欢迎来到青岛</p>')
</script>

添加元素

方法	说明
(指定元素).prepend("内容")	在指定元素内部的最前面追加内容
$("内容").prependTo("指定元素")	把内容追加到指定元素内部最前面
(指定元素).append"内容")	在指定元素内部最后面追加内容
$("内容").appendTo("指定元素")	把内容追加到指定元素内部最后面
$("元素").before( )	在指定元素的前面追加内容
$("元素").after( )	在指定元素的后面追加内容
$("元素").wrap()	为当前元素添加一个容器
$("元素").wrapAll()	为当前所有元素统一添加一个容器
$("元素").wrapInner()	为当前元素添加一个内部容器

<div id="html"></div>
<div id="text"></div>

<script>
    // 创建元素
    var test = "<span class='bg-black text-sm'>china</span>"
    $("html").prepend(test)
    $(test).prependTo("#html")

    var test2 = "<span class='bg-black text-sm'>TsingTao</span>"
    $("#text").before("test2")
</script>

>删除元素

方法	说明
$("元素").remove()	完全删除(事件清空)
$("元素").empty()	清空所有的子元素
$("元素").detach()	删除元素(不会清空事件)
$("元素").unwrap()	删除外层父元素

<div id="html"></div>
<div id="text"></div>

<script>
    $("html").remove()
    $("text").detach()
</script>

>复制元素

方法	说明
$("元素").clone()	用来复制 jQuery 对象

<button id="btn"> 点我一下 </button>

<ul id="list">
    <li>孙悟空</li>
    <li>猪八戒</li>
</ul>

<ul id="list2">
    <li>沙和尚</li>
    <li>唐僧</li>
</ul>


<script>
    $(function(){
    
        $("#list li:nth-child(1)").click(function(){
            alert("孙悟空")
        })
    
        var $swk = $("#list li:nth-child(1)").clone(true)
        var $list2 = $("#list2")
    
        $("#btn").click(function(){
            $list2.append($swk)
        })
    })  
</script>

>筛选方法

方法	说明
$("元素").eq( )	获取 jQuery 对象中指定索引的元素
$("内容").first( )	获取第一个元素
$("元素").last( )	获取最后一个元素
$("元素").even( )	获取索引为偶数的元素
$("元素").odd( )	获取索引为基数的元素
$("元素").slice( )	截取元素（切片）
$("元素").filter( )	过滤筛选元素

<button id="btn"> 点我一下 </button>

<div class="box1"></div>
<div class="box1"></div>
<div class="box1 a"></div>
<div class="box1 a"></div>
<div class="box1"></div>

<script>
    $(function(){ 
        $("#btn").click(function(){
           $(".box1").eq()
           $(".box1").filter(".a").css("background-color", "#bfa")
        })
    })  
</script>

>事件绑定

通过@指定方法

<a href="#">超链接</a>

<script>
    $(function(){ 
        $(".a").click(function(event){
             event.stopPropagation()
             event.preventDefault()
        })
    })  
</script>

通过 on( ) 方法

<button id="btn1"> 点我一下 </button>
<button id="btn2"> 点我一下 </button>

<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>

<script>
     // on()可以通过on()方法来绑定事件
     $("#btn1").on("click.a", function(){
          alert("通过on绑定的事件！")
     })

     // off()可以用来取消事件绑定
     $("#btn2").on("click.a", function(){
          $("#btn1").off("click")
     })
     // 为所有box1的类添加事件委托
     $(document).on("click",".box1", function(event){
         alert("哈哈")
     })  
</script>

通过 one( ) 方法

<script>
    // one()用来绑定一个一次性的事件
    $(".box1").one("click", function(){
        alert('嘻嘻')
    })
</script>

>jQuery方法

.addClass()

为jQuery对象添加一个或多个class

.hasClass()

检查jQuery对象是否含有某个class

.toggleClass()

切换jQuery对象的指定class

.insertAfter()

将元素添加到某元素的后边

.insertBefore()

将元素添加到某元素的前边

.replaceAll()

替换某个元素

.replaceWith()

被某个元素替换

.height()

读取/设置元素的高度

.width()

读取/设置元素的宽度

.innerHeight()

读取/设置元素的内部高度

.innerWidth()

读取/设置元素的内部宽度

.outerHeight()

读取/设置元素可见框的高度

.outerWidth()

读取/设置元素可见框的宽度

.offset()

读取/设置元素的偏移量

.position()

读取元素相当于包含块的偏移量

.scrollLeft()

读取/设置元素水平滚动条的位置

.scrollTop()

读取/设置元素垂直滚动条的位置

.has()

获取含有指定后代的元素

.is()

检查是否含有某元素

.map()

获取对象中的指定数据

.add()

创建包含当前元素的新的jQuery对象

.addBack()

将之前操作的集合中的元素添加到当前集合中

.contents()

获取当前jQuery对象的所有子节点（包括文本节点）

.end()

将筛选过的列表恢复到之前的状态

.not()

从列表中去除符合条件的元素

.children()

获取子元素

.closest()

获取离当前元素最近的指定元素

.find()

查询指定的后代元素

.next()

获取后一个兄弟元素

.nextAll()

获取后边所有的兄弟元素

.nextUntil()

获取后边指定位置的兄弟元素

.offsetParent()

获取定位父元素

.parent()

获取父元素

.parents()

获取所有的祖先元素

.parensUntil()

获取指定的祖先元素

.prev()

获取前边的兄弟元素

.prevAll()

获取前边所有的兄弟元素

.prevUntil()

获取指定的兄弟元素

.siblings()

获取所有的兄弟元素