1 JQuery选择器
分类：
- 通过css选择器选择元素
- 基本选择器
- 层次选择器
- 属性选择器
- 通过过滤选择器选择元素
- 基本过滤选择器
- 可见性过滤选择器
1.1 基本选择器
包括标签选择器、类选择器、id选择器、并集选择器、全局选择器
- element
- .class
- #id
- selector1，selector2，selectorN
*
1.2 层次选择器
通过DOM元素间的一个层次选择元素
-
ancestor descendant 后代选择器 选取 ancestor元素里的所有的descendant后代元素
-
parent > child 子选择其 选取parent元素下的child子元素
-
prev + next 相邻元素选择器 选择紧挨着prev元素之后的next元素
-
prev ~ siblings 同辈元素选择器 选取prev元素之后的所有的siblings
$(function(){
//使用后代选择器选择div下的所有的p元素 不仅包括儿子辈 也包括孙子辈
$(".textRight p").css("color","red");
// 子元素选择器 选择的直接子类 不涉及孙子辈
$(".textRight>p").css("color","red");
// 相邻元素选择器
$("h1+p").css("text-decoration","underline");
// 同辈元素选择器 选择同级的元素
$("h1~p").css("text-decoration","underline");
})
1.3 属性选择器
-
[attribute] 选取包含给定属性的元素
-
[attribute=value] 选取包含给定属性且属性值等于vaule
-
[attribute!=value] 选取包含给定属性且属性值不等于vaule
-
[attribute^=value] 选取给定属性是以特定值开头的元素
-
[attribute$=value] 选取给定属性是以特定值结尾的元素
-
[attribute*=value] 选取给定属性包含特定值的元素
-
[attrSel1][attrSel2][attrSelN] 属性并集选择器
$(function(){
$("#news a[class]").css("background","#dbdbdb");
$("#news a[class=hot]").css("background","red");
$("#news a[class!=hot]").css("background","green");
// 属性以特定值开头
$("#news a[href^='www']").css("background","#dbdbdb");
//属性值以特定值结尾
$("#news a[href$='html']").css("background","#dbdbdb");
//属性值包含特定值
$("#news a[href*='k2']").css("background","#dbdbdb");
});
1.4 过滤选择器
通过特定的过滤规则 筛选出所需的元素
分类：
- 基本过滤选择器
- 可见性过滤选择器
- 表单对象过滤选择器
- 内容过滤选择器
- 子元素过滤选择器
1.4.1 基本过滤选择器
-
:first 选取第一个元素
-
:not(selector) 选取所有去除与给定元素匹配的元素
-
:even 选取所有偶数索引的元素
-
:odd 选取所有索引为奇数的元素
-
:eq(index) 选取索引等于index的元素
-
:gt(index) 大于
-
:lang1.9+ 选择指定语言的所有元素。
-
:last 选取最后一个
-
:lt(index) 小于
-
:header 选取所有的标题元素
-
:animated 选取所有有动画的
-
:focus 选取当前获取焦点的元素
-
:root1.9+ 选择该文档的根元素。
2 JQuery事件
分类：
基础事件：
- 鼠标事件
- window事件
- 表单事件
复合事件：
- 鼠标悬停
- 鼠标连续点击
2.1 鼠标事件
-
[click([data],fn]) 鼠标单击事件
-
[mousedown([data],fn]) 鼠标按下
-
[mouseenter([data],fn]) 鼠标进入
-
[mouseleave([data],fn]) 鼠标离开
-
[mousemove([data],fn]) 鼠标移动
-
[mouseout([data],fn]) 鼠标离开
-
[mouseover([data],fn]) 鼠标经过
-
[mouseup([data],fn]) 鼠标释放
$(function(){
$(".nav-ul a").mouseover(function(){
$(this).css("background-color","green");
})
$(".nav-ul a").mouseout(function(){
$(this).css("background-color","#ff2832");
})
})
mouseover和mouseenter 都是鼠标进入触发 鼠标在其他被选元素的子元素上来回进入时 触发的mouseover 但是不会触发mouseenter
mouseout和mouseleave 鼠标离开触发 鼠标在子元素上触发 mouseout 不会触发mouseleave
2.2 键盘事件
-
keydown([data],fn]) 按下键盘时触发
-
[keypress([data],fn]) 产生可打印的字符时
-
[keyup([data],fn]) 释放键盘时触发
$(document).ready(function () {
$("[type=password]").keyup(function () {
$("#events").append("keyup");
}).keydown(function (e) {
$("#events").append(" keydown");
}).keypress(function () {
$("#events").append(" keypress");
});
$(document).keydown(function (event) {
if (event.keyCode == "13") {//按回车键
alert("确认要提交么？");
}
});
});
2.3 复合事件
hover() 相当于mouseover和mouseout事件的组合
hover（enter，leave）
$(".on").hover(function(){
$(".topDown").show();
},function(){
$(".topDown").hide();
})
2.4 窗口大小改变的时候 触发的时间
$(window).resize(function(){
alert("Stop it!");
});
3 事件的绑定和移除
//绑定
bind(type,[data],fn)
//移除
unbind([type],[fn()])
//unbind()不带参数时，表示移除所绑定的全部事件
type 事件类型 主要包括click moueseouver mouseout等事件
data 可选函数
fn 表示事件的处理函数
//绑定单个事件
$(function(){
$(".on").bind("mouseover",function(){
$(".topDown").show();
})
})
//绑定多个事件
$(function () {
$(".on").bind({
"mouseover": function () {
$(".topDown").show();
},
"mouseout": function () {
$(".topDown").hide();
}
})
})
//解除绑定
$("#del").click(function(){
$("#nav li:first").unbind("click",content1)
$("#nav li:first").unbind("click",bg1)
// 解除元素上绑定的所有事件
$("#nav li:first").unbind();
})
})
4 动画
//元素显示和隐藏
$(".on").hover(function(){
$(".topDown").show("slow");
},function(){
$(".topDown").hide("fast");
})
//元素的透明度
//fadeIn([s],[e],[fn])
//fadeOut([s],[e],[fn])
$(".on").hover(function(){
$(".topDown").fadeIn(1000);
},function(){
$(".topDown").fadeOut(2000);//淡出的时间 单位毫秒 slow nomal fast
})
//元素的高度
//slideDown([s],[e],[fn])
//slideUp([s,[e],[fn]])
$(".on").hover(function(){
$(".topDown").slideUp(1000);
},function(){
$(".topDown").slideDown(2000);//淡出的时间 单位毫秒
})
5 JQuery中的DOM操作
- 样式操作
- 内容及value值的操作
- 节点操作
- 节点属性操作
- 节点的遍历
- css-DOM操作
5.1 设置或获取样式的值
css(name,value);//设置单个样式值
css({name:value,name:value,...}) 同时设置多个属性
css(name)//获取样式属性值
<script src="jquery-1.12.4.js"></script>
<script>
$(function(){
$("div").css({"width":"200px","height":"200px","border":"1px solid #000","background-color":"red","opacity":"0.5"})
})
</script>
5.2 追加和移除样式
-
removeClass(class|fn)
//追加前提是有该样式
<script src="js/jquery-1.12.4.js" ></script>
<script>
$(function(){
$("h2").mouseover(function(){
$("p").addClass("content border");//追加样式
}).mouseout(function(){
$("p").removeClass("content");//移除样式
})
})
</script>
5.3 切换样式
toggleClass(class|fn,sw]) 模拟了addClass和removeClass实现样式切换的过程
$("h2").click(function(){
$("p").toggleClass("content border");
})
5.4 判断是否包含指定的样式
hasClass(class) 判断是否包含指定的样式
$("h2").mouseover(function(){
if(!$("p").hasClass("content")){
$("p").addClass("content");
}
})
$("h2").mouseout(function(){
if($("p").hasClass("content")){
$("p").removeClass("content");
}
})
5.5 内容操作
- HTML代码操作
- 标签内容的操作
- 属性值的操作
//html会解读标签
$(function(){
$("h1").click(function(){
$(".proList").html("<div><ul><li>买了商品后，查不到物流信息怎么办？</li><li>申请退款后，交易退款成功，钱到哪里？</li><li>卖家拒绝退款，怎么办？</li><li>投诉发生的时间和条件是什么？</li><li>如何申请淘宝客服介入？</li></ul></div>")
})
})
//text直接输出文本
$(function(){
$("h1").click(function(){
$(".proList").text("<div><ul><li>买了商品后，查不到物流信息怎么办？</li><li>申请退款后，交易退款成功，钱到哪里？</li><li>卖家拒绝退款，怎么办？</li><li>投诉发生的时间和条件是什么？</li><li>如何申请淘宝客服介入？</li></ul></div>")
})
})
html() 用户获取第一个匹配元素的HTML内容或文本内容
html(param) 设置匹配元素的HTML内容或文本
text() 获取匹配元素的文本内容
text(param) 设置文本内容
//获取属性值
$(function(){
//获得焦点事件
$(".search_txt").focus(function(){
$(this).val();//获取input的value属性值
//$(this).val("");//设置input的value属性值
})
$(".search_btn").click(function(){
var txt = $(".search_txt").val();
console.log(txt);
})
})
5.6 节点操作
- 查找节点
- 创建节点
- 插入节点
- 删除节点
- 替换节点
- 复制节点
创建节点：
$()工厂函数获取或者创建节点
$(selector) 通过选择器获取节点
$(element) 把DOM节点转换为Jquery节点
$(html) 使用HTML字符串来创建Jquery节点
var $newLi= $("<li></li>");
var $newLi= $("<li>这是一个新创建的li节点</li>");
var $newLi= $("<li title='new'>这是一个新创建的li节点</li>");
插入节点：
-
内部插入
- append(content|fn) $(A).append(B) 将B追加到A中
- appendTo(content) $(A).appendTo(B) 把A 追加到B中
- prepend(content|fn) $(A).prepend(B) 将B前置插入到A中
- prependTo(content) $(A).prependTo(B) 表示将A 前置插入到B中
-
外部插入
- after(content|fn) $(A).after(B) 表示将B插入到A之后
- before(content|fn) $(A).before(B) 表示将B插入到A之前
- insertAfter(content) $(A).insertAfter(B) 将A插入到B之后
- insertBefore(content) $(A).inserBefore(B) 将A 插入到B之前
删除节点：
替换节点
复制节点
clone([Even[,deepEven]]) 一个布尔值（true 或者 false）指示事件处理函数是否会被复制。
5.7 属性操作
5.8 节点的遍历
遍历子元素
children() 用来获取当前元素的所有子元素
遍历同辈元素
- next([expr])
- prev
- siblings
遍历前辈元素
parent 获取父级元素
parents 元素的祖先元素
其他的遍历方法
each(callback) 为每个匹配的元素执行同样的函数
$(selector).each(function(index,element){
//index 元素的索引 /位置
//element 当前元素
})
<script>
$(function(){
$("img").click(function(){
$("li").each(function(index,element){
var str =$(this).text();
var h3 = $("<h3>"+index+"、"+str+"</h3>")
$("section").append(h3);
})
})
})
</script>
632
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
