1.jquery的选择器

分类：

• 通过css选择器来选择元素
  • 基本选择器
  • 层次选择器
  • 属性选择器
• 通过过滤选择器选择元素
  • 基本过滤选择器
  • 可见性过滤选择器

1.1 基本选择器

包括 标签选择器 类选择器 id选择器 并集选择器 全局选择器

• #id 通过元素的ID属性选择
• element 通过标签名选择
• .class 通过元素的类名选择
• 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+ 选择该文档的根元素。

$(function(){$(".contain :header").css({"background":"blue","color":"#fff"});$(".contain li:first").css({"font-size":"16px","color":"red"});$(".contain li:last").css({"border":"none" });$(".contain li:even").css({"background":"#bdbdbd" });$(".contain li:odd").css({"background":"#cccccc" });$(".contain li:lt(2)").css({"color":"green" });$(".contain li:gt(3)").css({"color":"red" });
})

2 事件

分类：

基础事件：

• 键盘事件
• 鼠标事件
• 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]) 鼠标释放

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-osHrffp7-1635836122759)(assest/image-20210821105847823.png)]

$(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 窗口大小改变的时候 触发的时间

$(window).resize(function(){alert("Stop it!");});

3.事件的绑定和移除

bind(type,[data],fn)

type:事件类型 主要包括click moueseouver mouseout等事件

data 可选函数

fn 表示事件的处理函数

通过这种方式绑定 不仅可以绑定单个事件还可以绑定多个事件

绑定单个事件

$(function(){$(".on").bind("mouseover",function(){$(".topDown").show();})})

绑定多个事件

$(function () {$(".on").bind({"mouseover": function () {$(".topDown").show();},"mouseout": function () {$(".topDown").hide();}})
})

移除事件

unbind([type],[fn()])
unbind()不带参数时，表示移除所绑定的全部事件

$(function(){$("#nav li:first").bind("click",   bg1 =function(){$(".taskContent").css("background","#26a6e3");}).bind("click",content1= function(){$("#dayTask").show();$("#growTask").hide();});$("#nav li:last").bind("click",bg2 = function(){$(".taskContent").css("background","#ff9400");}).bind("click",content2 = function(){$("#growTask").show();$("#dayTask").hide();});// 解除绑定$("#del").click(function(){// $("#nav li:first").unbind("click",content1)// $("#nav li:first").unbind("click",bg1)// 解除元素上绑定的所有事件$("#nav li:first").unbind();})
})

复合事件：

hover() 方法相当于mouseover和mouseout事件的组合

hover（enter，leave）

    //复合事件$(".on").hover(function(){$(".topDown").show();},function(){$(".topDown").hide();})

4.动画

元素显示和隐藏

  $(".on").hover(function(){$(".topDown").show("slow");},function(){$(".topDown").hide("fast");})

元素的透明度

    $(".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() 为指定的元素设置样式值或获取样式值

css(name,value);//设置单个样式值
css({name:value,name:value,...}) 同时设置多个属性
css(name)//获取样式属性值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><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>
</head>
<body><div></div>
</body>
</html>

5.2 追加和移除样式

• addClass(class|fn)

• [removeClass(class|fn])

 <!doctype html>
<html>
<head lang="en"><meta charset="UTF-8">
<title>追加和移除样式</title>
<style type="text/css" >
*{margin:0px;padding:0px;font-size:14px;font-family:"微软雅黑";line-height: 28px;;
}
.title {font-size:14px; color:#03F; text-align: center; }
.text{ padding:10px;}
.content {background-color:#FFFF00; }
.border {border:1px dashed #333; }
</style></head>
<body><h2 class="title" >jQuery操作CSS</h2><p class="text">css()设置或返回样式属性<br>addClass()增加一个或多个类<br>removeClass()移除一个或多个类</p><script src="js/jquery-1.12.4.js" ></script><script>$(function(){$("h2").mouseover(function(){$("p").addClass("content border");//追加样式}).mouseout(function(){$("p").removeClass("content");//移除样式})})</script>
</body>
</html>

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代码操作
• 标签内容的操作
• 属性值的操作

   $(function(){$("h1").click(function(){$(".proList").html("<div><ul><li>买了商品后，查不到物流信息怎么办？</li><li>申请退款后，交易退款成功，钱到哪里？</li><li>卖家拒绝退款，怎么办？</li><li>投诉发生的时间和条件是什么？</li><li>如何申请淘宝客服介入？</li></ul></div>")})})

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SYCftvBm-1635836122766)(assest/image-20210821161223209.png)]

    $(function(){$("h1").click(function(){$(".proList").text("<div><ul><li>买了商品后，查不到物流信息怎么办？</li><li>申请退款后，交易退款成功，钱到哪里？</li><li>卖家拒绝退款，怎么办？</li><li>投诉发生的时间和条件是什么？</li><li>如何申请淘宝客服介入？</li></ul></div>")})})

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WnQcXMEH-1635836122769)(assest/image-20210821161302065.png)]

html() 用户获取第一个匹配元素的HTML内容或文本内容

html(param) 设置匹配元素的HTML内容或文本

text() 获取匹配元素的文本内容

text(param) 设置文本内容

获取属性值

	  $(function(){//获得焦点事件$(".search_txt").focus(function(){// $(this).val();//获取input的value属性值$(this).val("");})//失去焦点事件//   $(".search_txt").blur(function(){// 	$(this).val("电风扇");//   })$(".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之前

删除节点：

• empty()](empty.html) 清空节点内容

• [remove(expr]) 删除整个节点

替换节点

• replaceWith(content|fn)
• replaceAll(selector)](replaceAll.html)

复制节点

clone([Even[,deepEven]]) 一个布尔值（true 或者 false）指示事件处理函数是否会被复制。

5.7 属性操作

• attr(name|pro|key,val|fn)

• removeAttr(name)

• prop(n|p|k,v|f)

• removeProp(name)

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>

me)](removeProp.html)

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>