jQuery汇总

1 什么是jQuery

一个js插件， 相比较原生的DOM操作更简单、开发效率更高

2 jQuery的使用

1.先导入后使用
2.可以把jQuery.js下载到本地导入来使用，也可以不用下载使用CDN来在线使用。
什么是CDN,全称内容分发网络，好比我们在京东买东西，下单后由京东分布在全国的几个存储物流仓发货，所以速度快，CDN就是网上的内容服务商来分发内容。

3 jQuery对象和DOM对象

jQuery对象才能调用jQuery的方法，DOM对象只能调用DOM方法，不能乱调，二者可以相互转换。

代码块
 jQuery对象 --> DOM对象：$("div")  --> $("div")[0]

DOM对象    --> jQuery对象： this      --> $(this)
                        

4 ： jQuery语法

$("选择器").方法()
支持链式操作

4-1：基本选择器

代码块
1. $("div")  根据标签名
2. $("#d1") 根据ID
3. $(".c1")  根据class
4. $("*")    通用选择器

4-2组合选择器

代码块
$("div, .c1")      --> 找到所有div标签和有c1样式类的标签

4-3 层级选择器

代码块
$("#d1 span")      --> id是d1标签里面所有的span标签
2. $("#d1>span")      --> id是d1标签里面一层的span标签
3. $("label+input")   --> 找到紧挨着label标签的input标签
4. $(".c1~div")       --> 找到c1样式类下面的div标签

4-4 基本筛选器

代码块
1. :first/:last
2. :eq()/大于:gt()/小于:lt()
3. :even偶数/:odd奇数
4. $("div:not(.c1)")  --> 找到没有c1样式类的div标签
5. $("div:has(.c1)")  --> 找到后代中有c1样式类的后代div标签

4-5 属性选择器

代码块
$("[s14]")
$("[type='text']")
 $("[type!='text']")

4-6 表单选择器

代码块
$(":text")
 $(":password")

 $(":disabled")
 $("input:checked")
 $(":selected")

4-7：筛选器方法

代码块
. .next()/.prev()
 .parent()/.children()/.siblings()
.find('选择器条件')      --> 在后代查找符合要求的
.filter('选择器条件')    --> 根据条件对已经找到的结果进行二次过滤
.first()/.last()
 .not()/.has()
 .eq()

5 jQuery操作样式

5-1 获取css属性，修改css属性，设置新的属性

代码块
利用jQuery获取元素标签：$('.c1');

查看css属性颜色：$('.c1').css('color')

查看css属性字体大小： $('.c1').css('font-size')

设置颜色为红色，字体大小为30px：$('.c1').css({'color':'red','font-size':'30px'})

5-2 位置相关的获取与修改

代码块










    

代码块
1.获取class为c2相对浏览器的位置：$('.c2').offset();
{top: 100, left: 200}

2.获取class为c2相对父标签c1的位置：$('.c2').position();
{top: 100, left: 100}

括号里面添加参数可以修改位置

5-3 返回顶部的例子：

代码块










1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

返回顶部

5-4：获取表单的值，和修改表单的值

代码块



    
    
    




    
div的文本
        
p标签的文本呵呵哒~
    





    111
    222
    333





女

男



篮球

足球

双色球

代码块
获取input=text文本框的值：$('#i1').val();
修改input=text文本框的值：$('#i1').val('哪吒');

获取select下拉列表框的值：$('#s1').val();
修改select下拉列表框的值：$('#s1').val('杭州');

获取textarea文本框的值：$('#t1').val();
获取textarea文本框的值：$('#t1').val('明天我要嫁人了');

获取radio选中的value:$('input[name="gender"]:checked').val();

获取多选框的值：$('input[name="hobby"]:checked').val();

6 自定义登陆验证

代码块



  
  
  
  
  




  

    用户名
    
    
  
  

    密码
    
    
  
  

    
  

7 获取属性值和设置属性值

代码块
获取属性值：$('#d1').attr('s14');
修改属性值：$('#d1').attr('s14','hello');
删除属性：$('#d1').removeAttr('s14');

查看是否被选中：$('#i1').prop('checked');

8 绑定事件的方式

代码块
第一种方式：
var b1Ele = document.getElementById("b1");
    b1Ele.onclick=function (ev) {
        alert(123)
    };

第二种方式：
    $("#b1").click(function () {
        alert(123);
    });