一、Jquery的下载与安装

1.下载及其版本

有两个版本的 jQuery 可供下载：

Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）

这两个版本都可以从 jQuery.com 下载。

在页面中引入：

如果不想下载并存放 jQuery，那么也可以通过 CDN（内容分发网络）引用它。

谷歌和微软的服务器都存有 jQuery 。

(1).提供了强大的功能函数

(2).解决了浏览器兼容性问题

(3).实现丰富的UI和插件

(4).纠正错误的脚本知识

二、Jquery核心

$符号在jQuery中代表对jQuery对象的引用，“jQuery”是核心对象。

通过该对象可以获取jQuery对象，调用jQuery提供的方法等。只有jQuery对象才能调用jQuery提供的方法。

三、DOM对象与Jquery包装集对象

原始的DOM对象只有DOM接口提供的方法和属性，通过JS代码获取的对象都是DOM对象。而通过jquery获取的对象是jquery包装集对象，简称jquery对象。只有jquery对象才能使用jquery提供的方法。

1.DOM对象

JavaScript中获取DOM对象，DOM对象只有有限的属性和方法：

    let div = document.getElementById("testDiv")
    let div = document.getElementsByTagName("div")[0]

2.Jquery包装集对象

可以说是DOM对象的扩充。在jQuery的世界中将所有的对象，无论是一个还是一组，都封装成一个jQuery包装集，比如获取一个包含元素的jQuery包装集：

    let jqueryObject = $("#testDiv")
    let j = jqueryObject[0]

3.DOM对象转jQuery对象

DOM对象转为jQuery对象，只需要利用$()方法进行包装即可

    let div = document.getElementById("testDiv")
    let jqueryDiv = $(div)

4.jQuery对象转DOM对象

jQuery对象转DOM对象，只需要取元素中的数组即可

//第一种方式 获取jQuery对象
let jqueryDiv = jQuery("#testDiv")
//第二种方式 获取jQuery对象
jqueryDiv = $("testDiv")
//将已经获取的jQuery对象转为DOM对象
let dom = jqueryDiv[0]

通过遍历jQuery对象数组得到的对象是DOM对象，可以通过$()转为jQuery对象

四、jQuery选择器

和使用js操作Dom一样，获取文档中的节点对象是很频繁的一个操作，在iQuery中提供了简便的方式供我们查找定位元素，称为jQuery选择器，通俗的讲，Selector 选择器就是“一个表示特殊语意的字符串”。只要把选择器字符串传入上面的方法中就能够选择不同的Dom 对象并且以jQuery 包装集的形式返回。

jQuery 选择器按照功能主要分为“选择”和“过滤”。并且是配合使用的，具体分类如下。

1.基础选择器

id选择器中，如果有多个同名id，以第一个为准

2.层次选择器

3.表单选择器

五、jQuery Dom操作

jQuery也提供了对HTML节点的操作，而且在原生JS的基础之上进行了优化，使用起来更加方便。

常用的从几个方面来操作，查找元素（选择器已经实现）；创建节点对象；访问和设置节点对象的值，以及属性；添加节点；删除节点；删除、添加、修改、设定节点的CSS样式等。 注意：以下的操作方式只适用于jQuery对象。

1.操作元素的属性

(1).获取属性

属性的分类：

固有属性：元素本身就有的属性（id、name、class、style）
返回值是Boolean的属性：checked、selected、disabled
自定义属性：用户自己定义的属性

attr与prop的区别：

如果是固有属性，attr()和prop()方法均可获取
如果是自定义属性，attr()可获取，prop()不可获取
如果是返回值为Boolean类型的属性，若设置了属性，attr()返回具体的值，prop()返回true;若未设置属性，attr()返回undefined，prop()返回false

    <input type="checkbox" name="ch" checked="checked" id="aa" abc="aabbcc"/>aa
    <input type="checkbox" name="ch" id="bb">bb
    <script>
        //获取属性
        //固有属性
        let name = $("#aa").attr("name")
        console.log(name);  //ch
        let name2 = $("#aa").prop("name")
        console.log(name2); //ch
        //返回值是Boolean的属性,(元素设置了属性)
        let ck1 = $("#aa").attr("checked")
        console.log(ck1);   //checked
        let ck2 = $("#aa").prop("checked")
        console.log(ck2);   //true
        //返回值是Boolean的属性,(元素未设置属性)
        let ck3 = $("#bb").attr("checked")
        console.log(ck3);   //undefined
        let ck4 = $("#bb").prop("checked")
        console.log(ck4);   //false
        //自定义属性
        let abc1 = $("#aa").attr("abc")
        console.log(abc1);
        let abc2 = $("#aa").prop("abc")
        console.log(abc2);
    </script>

(2).设置属性

attr("属性名","属性值")

prop("属性名","属性值")

//固有属性
$("#aa").attr("value","1")
$("#bb").attr("value","3")
//返回值是Boolean的属性
$("#bb").attr("checked","checked")
$("#bb").prop("checked",false)
//自定义属性
$("#aa").attr("uname","admin")
//$("#aa").prop("uage",18)   //prop获取不到自定义属性

(3).移除属性

removeAttr("属性名")

$("#aa").removeAttr("checked")

2.操作元素的样式

css():
设置单个样式： css("具体样式名","样式值")

设置多个样式： css("具体样式名":"样式值";"具体样式名":"样式值")

3.操作元素的内容

html()、html("html内容")、text()、text("text内容") 均操作非表单元素

html("html内容")可以在内容中设置样式；

使用text("text内容") 只能识别到文本内容，标签效果不识别

val()、val("值")操作表单元素

表单元素：

文本框text、密码框password、单选框radio、复选框checkbox、隐藏域hidden、文本域textarea、下拉框select

非表单元素：

div、span、h1~h6、table、tr、td、li、p等

4.创建元素

在jQuery中创建元素很简单，直接使用核心函数即可

    //创建元素
    let p = "<p>这是一个P标签</p>"
    console.log($(p));

5.添加元素

(1).前追加子元素

指定元素.prepend(内容) 在指定元素内部的最前面追加元素，内容可以是字符串、html元素或jQuery对象

$(内容).prependTo(指定元素) 把内容追加到指定元素内容的最前面，内容可以是字符串、html元素或jQuery对象

(2).后追加子元素

指定元素.append(内容) 在指定元素内部的最后面追加元素，内容可以是字符串、html元素或jQuery对象

$(内容).appendTo(指定元素) 把内容追加到指定元素内容的最后面，内容可以是字符串、html元素或jQuery对象

(3).前追加同级元素

before() 在指定元素的前面追加内容

(4).后追加同级元素

after() 在指定元素的后面追加内容

在添加元素时，如果元素本身不存在（新建的元素），此时会将元素追加到指定位置

如果元素本身存在（已有元素），会将原来元素直接剪切设置到指定位置

6.删除元素

指定元素.remove(）

指定元素.empty()

7.遍历元素

each()

$(selector).each(function(index,element))：遍历元素

参数 function 为遍历时的回调函数

index 为遍历元素的序列号，从0开始。

element是当前的元素，此时是dom元素

六、jQuery事件

1.ready()加载事件

ready()预加载事件，当页面的dom结构加载完毕后执行，类似于onLoad()事件

ready()可以写多个，按照顺序执行

语法：$(document).ready(function(){})

简写：$(function(){})

2.bind()绑定事件

(1).绑定单个事件

bind绑定

$("元素").bind("事件类型",function(){})

<div id="test" style="cursor: pointer;">点击查看名言</div> </body> <script> /*绑定单个事件*/ $("#test").bind("click",function(){ console.log("世上无难事"); </script>

$("元素").事件名(function(){})

<div id="test" style="cursor: pointer;">点击查看名言</div> </body> <script> // 直接绑定 $("#test").click(function(){ console.log("世上无难事"); </script>

1.确定为哪些元素绑定事件

2.绑定声什么事件（事件类型）

第一个参数：事件的类型

3.相应事件触发的，执行的操作

第二个参数：函数

(2).绑定多个事件

bind绑定

1.同时为多个事件绑定同一个函数

指定元素.bind("事件类型1 事件类型2 ...",function(){})

<button type="button" id="btn1">按钮1</button> </body> <script> //绑定多个事件 $("#btn1").bind("click mouseout",function(){ console.log("按钮1..."); </script>

2.为元素绑定多个事件，并设置对应的函数

指定元素.bind("事件类型",function(){

}).bind("事件类型",function(){

<button type="button" id="btn2">按钮2</button> </body> <script> //2.为元素绑定多个事件，并设置对应的函数 $("#btn2").bind("click",function(){ console.log("按钮2被点击了"); }).bind("mouseout",function(){ console.log("按钮2移开了"); </script>

3.为元素绑定多个事件，并设置对应的函数

指定元素.bind({

"事件类型":function(){},

"事件类型":function(){}

<button type="button" id="btn3">按钮3</button> </body> <script> //3.为元素绑定多个事件，并设置对应的函数 $("#btn3").bind({ "click":function(){ console.log("按钮3被点击了"); "mouseout":function(){ console.log("按钮3移开了"); </script>

指定元素.事件名(function(){

}).事件名(function(){

<button type="button" id="btn4">按钮4</button> </body> <script> //直接绑定 $("#btn4").click(function(){ console.log("按钮4被点击了"); }).mouseout(function(){ console.log("按钮4移开了"); </script> $(document).ready(function(){}) $(function(){}) 如果获取的对象是 jQuery 对象，那么在变量前面加上$,例如：var $variable= jQuery 对象 1，判断页面是否存在某元素：if($(“#tt”).length>0){} 或者if($(“#tt”)[0]){}; 2，基本 选择器 实际上是一个代替符号，代替的是 jQuery ，在这里我们不使用$符号，使用 jQuery 发现同样可以生效。两者是不同的， DOM 对象只能使用 DOM 的方法， jQuery 对象只能使用 jQuery 的方法。我们先看一下 jQuery 对象，我现在有两个div，直接使用div查询会查询到两个div。在 jQuery 库中， jQuery 对象是顶级对象，就像在JS中，顶级对象为window。用 DOM 获取的对象就是 DOM 对象，用 jQuery 获取的对象就是 jQuery 对象。我们使用$就可以将 DOM 对象转换为 jQuery 对象。 jQuery ,是一个快速、简洁的 JavaScript 库,其设计的宗旨是“Write Less，Do More”，即倡导写更少的代码，做更多的事情。之前webAPIs, 其主要操作步骤可以归纳为: 获取元素---绑定事件 ---改变样式, jQuery 是与其相似的, 只不过进行了封... 事件被触发就会有事件对象的产生。function(event)中的event就是事件对象。阻止默认行为：event.preventDefault()或者return false。阻止事件冒泡：event.stopPropagation() 原生js中也有这个方法。 jQuery 对象 jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象。 jQuery 对象是 jQuery 独有的。如果一个对象是 jQuery 对象，那么它就可以使用 jQuery 里的方法：例如$(“#i1”). html ()。 // 例： $("#i1"). html ()的意思是：获取id值为 i1的元素的 html 代码。其中 html ()是 jQuery 里的方法。相当于 DOM ： documen... 美元符($),下划线(_)可以作为类名和方法名，其他特殊字符都不行 jquery 中不能定义美元符($)的方法 -- $(){} ，自定义的美元符方法会覆盖 jQuery 中的$ $是 jQuery 的入口，它本身是一个函数，可以传入不同类型的参数，字符串，匿名函数 //传入的函数==window.onload $(function(){ alert("ddd"); jQuery :类库(工具箱):宗旨是write less do more，功能： DOM 操作， DOM 获取，动画，数据交互(ajax),链式调用*。一、为什么 jQuery 可以使用链式调用因为 jQuery 一直遵循一个准则：一切不关心返回值的语句都会返回你调用这个方法的 jQuery 对象本身，才到导致可以使用“链式调用”的方法，就是讲多条语句整合成一条语句。二、 jQuery 的核心方法 1.在页面中查找与css 选择器 相匹配的元素,返回相匹配的 jQuery 对象 $(“css 选择器 ”) 2.将源生JS节点(Node Dom 对象：使用 javascript 的语法创建的对象叫做 dom 对象，也就是js 对象。 1.通过 getElementById()查询出来的标签对象是 Dom 对象 2.通过 getElementsByName()查询出来的标签对象是 Dom 对象 3.通过 getElementsByTagName()查询出来的标签对象是 Dom 对象 4.通过 createElement() 方法创建的对象，是 Dom 对象 DOM 对象 Alert 出来的效果是 jQuery 库包括以下功能： HTML 元素选取、 HTML 元素操作、CSS 操作、 HTML 事件、 JavaScript 特效和动画、HT DOM ML遍历和修改、AJAX、utilities 除此之外， jQuery 还提供了大量的插件 1.2如何使用 jQuery ？ jQuery 是一个JavaScr.