jquery
# jquery
jquery是js的一个类库（javascript函数库），将js中的常见功能封装，提高开发效率
jquery2.0以上不支持ie6,7,8
- html元素选取
- html元素操作
- css操作
- html事件
- js特效
- 遍历(目的也是元素选取)
- ajax
bootCDN
$("#div1") //jquery $("字符串") jquery对象，可以使用jquery的内置方法
$("#div1").html(); //如果 jquery提供的函数参数为空 相当于在get 获取
$("#div1").html("");//如果 jquery提供的函数参数不为空 相当于在set 设置
$("#div1").text();
$("#div1").attr("class")//获取属性的attr方法 需要有两个参数，1，是你需要获得的值 2，你想改变的值
$("#div1").attr("class","新值");
$("#div1").removeAttr("需要移除的属性名")
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 1、jquery选择器
- 选择器的结构$()
- 基于css3和其他已定义选择器查找html元素
<style>
div{
width: 100px;;
border: 1px solid #aaa;
margin: 10px;
}
</style>
<div id="div1" class="div">1</div>
<div id="div2" class="div">
<div id="div3" class="div">2
<div>3</div>
<div>4</div>
</div>
</div>
<div></div>
<div></div>
<ul>
<li id="li">兄弟们好</li>
<li style="display: none">兄弟们好</li>
<li>兄弟们好</li>
<li>兄弟们好</li>
<li>兄弟们好</li>
</ul>
<input type="radio" checked>
<select name="" id="" >
<option value="1" >123132</option>
<option value="1" selected="selected">7677</option>
</select>
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
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
# 1. 基本选择器
//原生
document.getElementById("div1");
//jquery
$("#div1"); //id选择器
$("div"); //元素选择器
$(".div"); //类选择器
$("#div1,#div2"); //组合选择器
1
2
3
4
5
6
7
2
3
4
5
6
7
# 2. 层次选择器
$("#div2 div"); //后代选择器 *
$("#div2>div"); //子元素选择器 *
$("#div3+div"); //紧邻下一个元素选择器
$("#div3~div"); //紧邻下n个元素选择器
1
2
3
4
2
3
4
# 3. 过滤选择器
$("li:first") //第一个li
$("li:last") //最后一个li
$("li:even") //挑选下标为偶数的li *
$("li:odd") //挑选下标为奇数的li *
$("li:eq(4)") //下标等于 4 的li(第五个 li 元素) *
$("li:gt(2)") //下标大于 2 的li 是无法取到等于的
$("li:lt(2)") //下标小于 2 的li 是无法取到等于的
$("li:not(#li)") //挑选除 id="li" 以外的所有li
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
- 2内容过滤选择器
$("div:contains('1')") // 包含1文本的元素
$("div:empty") //不包含子元素或者文本的空元素
$("div:has(.div)") //子元素中含有has（）里面属性的元素
1
2
3
2
3
- 3可见性过滤选择器
$("li:hidden") //匹配所有不可见元素，或type为hidden的元素
$("li:visible") //匹配所有可见元素
1
2
2
- 4属性过滤选择器
//不适用于class 因为class有自己的class的选择
//适用于有且只有一个值的情况
//<input type="text"/>
$("div[id]") //所有含有 id 属性的 div 元素 *
$("div[id='div1']") // id属性值为123的div 元素 *
$("div[id][class='div']") //多属性选过滤，同时满足两个属性的条件的元素
1
2
3
4
5
6
2
3
4
5
6
- 5状态过渡选择器
$("input:checked") // 匹配选中的 input
$("option:selected") // 匹配选中的 option
1
2
2
# 2、DOM元素操作
# 1. 设置、获取元素内容 //他们是一系列的函数
html() //设置或返回所选元素的内容(包含文本)
text() //设置或返回所选元素的文本内容
val() //设置或返回表单字段的值
get() //获取选择器中的dom元素 get(0) 数字是被选中元素组成的数组中的元素位置
index() //返回指定元素相对其他指定元素位置 ***
size() //返回被Jquery选择器匹配的dom元素数量
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 2. 设置、获取元素属性
attr()
$("#div1").attr("class") //获取属性
$("#div1").attr("class","div2") //设置属性
$("#div1").attr({ //设置一组属性
"class":"div3",
"style":"background-color:red"
})
$('#div1').removeAttr('style'); //溢出属性
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 3. 创建、添加、删除元素
//创建元素 只需要用$()
var button=$("<button>点我呀</button>");
//插入元素
append() //在被选元素的结尾插入内容（内部新增）*
prepend() //在被选元素的开头插入内容（内部新增）
after() //在被选元素之后插入内容（兄弟）
before() //在被选元素之前插入内容（兄弟）
//删除元素
remove() //删除元素及其子元素
$("div").remove(".div") //删除所有带有class=div的div
empty() //删除子元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 3、操作CSS
//css类操作 他可以不影响之前已存在的class类，只关注于新增的新类和要删除的类
addClass( 'class1 class2 class3' ) //添加一个或多个类 *
removeClass( 'class1 class2 class3' ) //删除一个或多个类 *
toggleClass() //对被选元素进行添加/删除类的切换操作
//css方法操作
css("display") //返回样式
css("background-color","yellow"); //设置样式
css({ //设置多个样式
"background-color":"red","font-size":"30px"
})
width(); //设置获取宽度
height(); //设置获取高度
offset() //获取某个元素相对于浏览器窗口(可视区域的距离)
$(document).scrollTop() //获取垂直滚动条的值；
$(document).scrollTop(value)//设置垂直滚动条的值;
$(document).scrollLeft() //获取水平滚动条的值；
$(document).scrollLeft(value)//设置水平滚动条的值;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 4、html事件
# 1. jquery事件的绑定
$(selector).bind(event,function) //bind方法绑定
$(selector).on(event,[childSelector],function) //on方法绑定 事件委托
$(selector).one(event,function) //one方法， 执行一次后销毁
1
2
3
2
3
# 2. jquery事件的移除
$(selector).unbind(event)
$(selector).off(event)
1
2
2
# 3. jquery提供的可直接使用的事件
$(selector).click(function)
1
# 5、js特效
# 1. 显示隐藏
//1普通显示隐藏
show() //显示
hide() //隐藏
toggle() //切换
//可以传参,数字代表多少毫秒，
//内置三种参数：
//'fast' ：200毫秒 ''(默认值):400毫秒 'slow'：600毫秒
//2滑动显示隐藏
slideUp() //向上滑动（隐藏）
slideDown() //向下滑动（显示）
slideToggle() //滑动（自动）
//3淡入淡出
fadeOut() //淡出（隐藏）
fadeIn() //淡入（显示）
fadeToggle() //显示隐藏（）自动
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 2. 自定义动画
<div style="background:red;height:100px;width:100px;position:absolute;">
1
$(selector).animate({params},speed,callback);//params形成动画的CSS属性，speed时长，动画结束后回调函数
$("button").click(function(){
$("div").animate({left:'250px'});
});
$("button").click(function(){ //操作多个属性
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
$("button").click(function(){ //使用相对值
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
$("button").click(function(){ //队列功能
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
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
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
$(selector).stop(stopAll,goToEnd);//停止动画
//可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
//可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
1
2
3
4
2
3
4
# 6、jquery遍历
目的：找到期望获取的元素
# 1. 找祖先
parent() //无参数，找到直接父元素（一个）*
parents() //可有参数，找到所有父元素（N个），加参数是返回父元素中的符合参数选择器的元素
parentsUntil() //必有参数，返回介于两个元素之间的所有祖先元素
1
2
3
2
3
# 2. 找后代
children() //可有参数，返回被选元素所有直接子元素（只有下一级的元素），加参数是返回子元素中符合参数选择器的元素
find() //必有参数，返回被选元素的全部后代元素！！当参数为*时，返回全部后代
1
2
2
# 3. 找同胞
siblings() //可有参数，返回所有同胞元素，带参数是返回参数选择器中的全部dom元素 *
next() //无参数，返回下一个同胞元素
nextAll() //无参数，返回后面的全部同胞元素
nextUntil() //必有参数，返回参数选择器到指定dom元素中的全部后代同胞
prev() //无参数，返回前一个同胞元素
prevAll() //无参数，返回前面的全部同胞元素
prevUntil() //必有参数，返回参数选择器到指定dom元素中的全部前面同胞
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 4. 过滤
eq() //必有参数，返回被选中元素中带有指定索引号的元素，从0开始
//$("div:eq(2)") 第三个DIV
//$("div").eq(2);
1
2
3
2
3
# 7、jquery ajax
$.ajax({
url:"", //路径
type:"post", //请求方式
data:{"键":"值"}, //传入的数据
success:function(data){ //成功后的回调函数，参数是responseText
}
})
$.get("url",function(data,status){
})
$.post("url",data,function(data,status){
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 8、插件！
jquery插件是以jquery核心代码作为基础，编写出的实现一定特效的代码，极大地减少开发成本。
以引入js的方式使用，设置初值即可。
jquery插件的分类有很多，大致分为：
ui类，表单验证，输入，特效，ajax，滑动，图形展示，导航，综合工具，动画等
著名插件！
jquery validate
<script src="jquery.js"></script>
<script src="jquery.validate.js"></script>
<script src="messages_zh.js"></script>
1
2
3
2
3
# 9、jquery插件制作
# 1. 树形菜单
- event.stopPropagation(); 停止冒泡
- 模拟后台数据（json格式），同级菜单以数组保存，上下级菜单，是将下级菜单的数组放置到上级菜单的属性中（如children:[]）
- 模拟后台数据时，注意格式要对应（用递归的方式取值）
# 2. 轮播
- 小技巧，切换显示时，可以关闭全部，打开当前
- $(selector).index() 是返回选择器在当前DOM结构节点下所处位置
jquery插件：
$().on("",function(){
return false //相当于既停止冒泡，又阻止默认行为
event.preventDefault();
event.stopPropagation();
})
$.extend()//创建jquery 工具插件 方法
//创建好后，被放在$.prototype的constructor中
$.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
$.min(2,3); // 2
$.max(4,5); // 5
$.fn.extend()//创建jquery 对象插件 方法 $.fn是jQuery原型对象
//创建好后，被放在$.prototype中
$.fn.extend({
alertWhileClick:function() {
$(this).click(function(){
alert($(this).val()); //弹出input窗里的内容
});
}
});
$("#input1").alertWhileClick();
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
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