jQuery01

参考文档1：jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn)

参考文档2：jQuery 教程 (w3school.com.cn)，jQuery 教程 | 菜鸟教程 (runoob.com)

1.jQuery基本介绍

1. jQuery是一个快速的，简洁的JavaScript库，使用户能更加方便地处理HTML，css，dom...
2. 提供方法、events、选择器，并且方便地为网站提供AJAX交互
3. 其宗旨是WRITE LESS,DO MORE。写更少的代码，做更多的事情。
4. jQuery实现了浏览器的兼容问题

• jQuery的原理示意图

2.jQuery的基本开发步骤

1. 下载jQuery：点击下载，在弹出的页面右击另存为js文件即可

   下载链接：Download jQuery

   说明：带有compressed的是压缩过的，uncompressd是没有压缩过得，第一个即可。

   

2. 使用标签script引入jQuery库文件，即可使用jQuery相关的函数和对象。

2.1jQuery快速入门

1. 需求：点击按钮，弹出“hello，jQuery”
2. 使用传统的dom编程/原生js，完成
3. 使用jQuery完成，体会jQuery的WRITE LESS,DO MORE
4. 使用两种方式的代码完成，体会两种方式的不同

    
    
    
    
    


按钮1

2.2入口函数

jQuery 入口函数：

$(document).ready(function(){
    // 执行代码
});
或者
$(function(){
    // 执行代码
});

JavaScript 入口函数：

window.onload = function () {
    // 执行代码
}

jQuery 入口函数与 JavaScript 入口函数的区别：

• jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
• JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

3.jQuery对象和DOM对象

3.1什么是jQuery对象

什么是jQuery对象：

1. jQuery对象就是对dom对象进行包装后产生的对象

   比如：$("test").html()意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法。这端代码等同于用dom实现代码document.getElementById("id").innerHTML;

2. jQuery对象是jQuery独有的。如果一个对象是jQuery对象，那么它就可以使用jQuery里面的方法

3. 约定：如果获取的是jQuery对象，那么要在变量前面加上$

   比如var $variable=jQuery对象，var variable=DOM对象

3.2DOM对象转成jQuery对象

1. 对于一个DOM对象，只需要用\(()把dom对象包装起来，就可以得到一个jquery对象了。`\)(DOM对象)`
2. DOM对象转成jQuery对象后，就可以使用jquery的方法了

应用实例

    
    
    
    


用户名：

3.3jQuery对象转成DOM对象

1. 两种转换方式将一个jQuery对象转换成dom对象：[index]和.get(index);

   

2. jQuery对象是一个数组对象，可以通过数组[index]的方法，得到其中某一个它封装的dom对象

3. jQuery本身提供通过.get(index)方法，得到对象的dom对象

应用实例

    
    
    
    


用户名：

4.jQuery选择器

4.1jQuery选择器介绍

https://www.w3school.com.cn/jquery/jquery_selectors.asp

1. 选择器是jQuery的核心，在jQuery中，对事件处理，遍历dom和ajax操作都依赖于选择器

2. jQuery选择器的优点

   • 简洁的写法

     $("#id")等价于document.getElementById("id");

     $("tagName")等价于document.getElementsByTagName("tagName");

   • 完善的处理机制

应用实例-jQuery选择器使用特点

    
    
    
    


用户名：

4.2jQuery基本选择器

基本选择器是jQuery中最常见的选择器，也是最简单的选择器，它通过元素id，class和标签名来查找dom元素

$("#id")            //ID选择器
$("div")            //元素选择器
$(".classname")     //类选择器
$(".classname,.classname1,#id1")     //组合选择器

1. #id -id选择器，用法：$("#myDiv"); ，返回值：单个元素的组成的集合

   说明：这个就是直接选择html中的id=“myDiv”

2. Element -元素选择器，用法：$("div")，返回值：集合元素

   说明：element意为“元素”，element其实就是html已经定义的标签元素，例如div，input，a等等

3. class -类选择器，用法：$(".myClass")，返回值：集合元素

   说明：这个标签是直接选择html代码中的class=“myClass”的元素或者元素组(因为在同一html页面中class是可以存在多个同样值的)

4. *，用法：$("*")，返回值：集合元素

   说明：匹配所有元素，多用于结合上下文来搜索

5. selector1，selector2，selectorN -组合选择器，用法：$("div,span,p.myClass")，返回值：集合元素。说明：将每一个选择器匹配到的元素合并后一起返回。你可以任意指定多个选择器，并将匹配到的元素合并到一个结果内。其中p.myClass是表示匹配元素 p class=“myClass”

基本选择器应用实例

1. 改变id为one的元素的背景色为#0000FF
2. 改变class为mini的所有元素的背景色为#FF0033
3. 改变元素名为< div>的所有元素的背景色为#00FFFF
4. 改变所有元素的背景色为#00FF33
5. 改变所有的< span>元素和id为two，class为.mini 的元素的背景色为 #3399FF

    
    
    
    
    








div id 为 one
div id 为 two
div id 为 three
span one
span two

4.3层次选择器

$("#id >.classname ")    //子元素选择器
$("#id .classname ")    //后代元素选择器
$("#id + .classname ")    //紧邻下一个元素选择器
$("#id ~ .classname ")    //兄弟元素选择器

如果想通过dom元素之间的层次关系来获取特定元素，例如后代元素，子元素，相邻元素，兄弟元素等，则需要使用层次选择器。

1. ancestor descendant（祖先 后代）

   用法: $("body input");，返回值：集合元素
   说明: 在给定的祖先元素下匹配所有后代元素

2. parent > child
   用法: $("body > input");，返回值：集合元素
   说明: 在给定的父元素下匹配所有子元素，注意：要区分好后代元素与子元素

3. prev + next

   用法: $("label + input");返回值：集合元素
   说明: 匹配所有紧接在 prev 元素后的 next 元素

4. prev ~ siblings
   用法: $("form ~ input");，返回值：集合元素
   说明: 匹配 prev 元素之后的所有 siblings 元素。

   注意：是匹配的元素的之后的元素，不包含匹配元素在内，并且 siblings 匹配的是和 prev 同辈的元素，其后辈元素不被匹配。(“prev ~ div”) 选择器只能选择 “# prev ” 元素后面的同辈元素；而 jQuery中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取

层次选择器应用实例

1. 改变 < body> 内所有 < div> 的背景色为 #0000FF
2. 改变 < body> 内子 < div> 的背景色为 #FF0033
3. 改变 id 为 one 的下一个 < div> 的背景色为 #0000FF
4. 改变 id 为 two 的元素后面的所有兄弟< div>的元素的背景色为 #0000FF
5. 改变 id 为 two 的元素所有兄弟< div> 元素的背景色为 #0000FF

    
    
    
    
    









    div id 为 one


    div id 为 two
    

        id two01
    
    

        id two02
    


    div id 为 three
    

        id three01
    

4.4基础过滤选择器