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>

>选择器集合

基础选择器

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

层次选择器

表单选择器

>操作属性的元素

获取属性 attr

固有属性：元素本身就有的属性(id、name、class、style)，返回值是 Boolean 的属性：checked、selected、disabled

自定义属性：用户自己定义的属性

所以，attr()和prop()的区别是什么?

1. 如果是固有属性，attr 和 prop 方法均可操作。

2. 如果是自定义属性，attr 可操作，prop 不可操作。

3. 如果返回值是 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

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

总结：

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

>操作元素的样式

添加元素的具体样式

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>

>操作元素的内容

表单元素：

文本框 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>

>创建与添加元素

创建元素

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

添加元素

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

>删除元素

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

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

>复制元素

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

>筛选方法

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

• 获取所有的兄弟元素