1、初识jQuery

jQuery是一个别人封装好的模块（类库），代码量更少的实现我们想要的功能。

1）下载jQuery

jQuery官网》

有两个版本：

一个时压缩生产版本：Download the compressed, production jQuery 3.6.0 》jquery-3.6.0.min.js  (这里的min表示生产)

一个时非压缩开发版本：Download the uncompressed, development jQuery 3.6.0 >

2）代码引入

3）根据jQuery的用法来进行操作即可

2、jQuery教程》https://www.runoob.com/jquery/jquery-tutorial.html

参考文档：https://jquery.cuishifeng.cn/jQuery_selector_context.html

3、选择器

寻找想要的标签

1）ID选择器

2）class选择器

    
    


class的

1234567890

3）标签选择器

    
    


class的

1234567890

4）多选择器

    
    




1234567890

    sdf

5）层级选择器

    
    




1234567890

    

        sdf
    
    

        
xxx
        
xxx
    

4、筛选器

    
    


    

        

            sdfg
        
        

            
x1
            
x2
            
x3
        
    

5、样式操作

    
    



    

        sdf
    
    

        
xxx
        
xxx
    

6、链式编程

菜鸟教程连接https://www.runoob.com/jquery/jquery-chaining.html

下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动：

菜鸟教程!!
点我

 7、案例：

1）使用jQuery实现如下效果点击头部实现打开和闭合菜单

    
    
    


    

        

            
头部
            

                菜单1
                菜单2
            
        
        

            
头部
            

                菜单1
                菜单2
            
        
        

            
头部
            

                菜单1
                菜单2
            
        
    
    
    

2）实现点开任意一个其他都关闭

    
    
    


    

        

            
头部
            

                菜单1
                菜单2
            
        
        

            
头部
            

                菜单1
                菜单2
            
        
        

            
头部
            

                菜单1
                菜单2
            
        
    
    
    

 8、值和文本操作

1）值操作

// 获取值
$("#v1").val()

// 设置值
$("#v1").val("xxxxxx")

2)文本操作

xxxxx

//获取文本
$("#v2").text()

//设置文本
$("#v2").text(“yyyyyy”)

3）扩展

基于jQuery去创造标签。

$("").text(“yyyyyy”)

    
    


    
    刘思江博客
    
    

 10、prop属性，针对于checkbox的选项的使用

    
    



篮球
足球

案例：表格中的全选、取消和反选

    
    







    

    

        
选择
        
ID
        
姓名
    
    
    

    

        

        
1
        
大江东去
    
        

        

        
1
        
大江东去
    
        

        

        
1
        
大江东去
    
    

11、文档和标签的操作

1）创建标签

$("
")
$("")

    
adsgf
    //要想把标签添加到此处


var tag = $("
").text("xxxxx");
$("#content").append(tag)

    //要想把标签添加到此处，内部的顶部
    
adsgf


var tag = $("
").text("xxxxx");
$("#content").prepend(tag)；

//要想把内容添加到此处，使用before

    
adsgf

var tag = $("
").text("xxxxx");
$("#content").before(tag)；

    
adsgf

//要想把内容添加到此处，使用after
var tag = $("
").text("xxxxx");
$("#content").after(tag)；

    

        sdfg
    
    

        
x1
        
x2
        
x3
    
  

$("#xx").remove()

    asdfghjkl

$("#xxx").val("")

    
    




    
刘思江
        
周杰伦
        
江山
    

    
    




    
刘思江
        
周杰伦
        
江山