jQuery (JavaScript)进阶使用

• jQuery 是一个 JavaScript 库。

• 所谓的库，就是一个 JS 文件，里面封装了很多预定义的函数，比如获取元素，执行隐藏、移动等，目的就 是在使用时直接调用，不需要再重复定义，这样就可以极大地简化了 JavaScript 编程。

1、JS对象和JQuery对象转换

---

• jQuery 本质上虽然也是 JS，但如果想使用 jQuery 的属性和方法那么必须保证对象是 jQuery 对象，而不是 JS 方式获得的 DOM 对象，二者的 API 方法不能混合使用，若想使用对方的 API，需要进行对象的转换。

• JS 的 DOM 对象转换成 jQuery 对象

// JS方式，通过id属性值获取div元素

letjsDiv=document.getElementById("div");

// 将 JS 对象转换为jQuery对象

letjq=$(jsDiv);

• jQuery 对象转换成 JS 对象

/*jQuery 对象[索引];

jQuery 对象.get(索引);*/

// jQuery方式，通过id属性值获取div元素

letjqDiv=$("#div");

// 将 jQuery对象转换为JS对象

letjs=jqDiv[0];

3、事件的绑定和解绑

---

• 绑定事件

//jQuery 对象.on(事件名称,执行的功能);

• 解绑事件

如果不指定事件名称，则会把该对象绑定的所有事件都解绑

//jQuery 对象.off(事件名称);

常用事件：

4、事件的切换

---

事件的切换：需要给同一个对象绑定多个事件，而且多个事件还有先后顺序关系。

方式一：单独定义

$(元素).事件方法名1(要执行的功能);

$(元素).事件方法名2(要执行的功能);

方式二：链式定义

$(元素).事件方法名1(要执行的功能)

.事件方法名2(要执行的功能);

5丶遍历：

    
    
    


    
    

        
传智播客
        
黑马程序员
        
传智专修学院
    

jQuery选择器：

1、基本选择器

---

• 选择器：类似于 CSS 的选择器，可以帮助我们获取元素。

• 例如：id 选择器、类选择器、元素选择器、属性选择器等等。

• jQuery 中选择器的语法：$();

代码实现

div1

div2

div3

3.2、层级选择器

---

• 代码实现

    
    
    


    

        s1
            s1-1
            s1-2
        
        s2
    
​
    

    
p1
    
p2

3.3、属性选择器

---

• 代码实现

3.4、过滤器选择器

---

• 代码实现

    
    
    


    
div1
    div2

div3

div4

3.5、表单属性选择器

---

• 代码实现

    
    
    


    
    
    男
    女
    学习
    睡觉
    
        ---请选择---
        本科
        专科
    

DOM：

操作文本：

• html（）获取标签的文本

• html（value）设置标签的文本内容，解析标签

操作对象：

操作属性：

操作样式：