jquery

最新推荐文章于 2023-04-07 21:22:51 发布

mz_shenbian

最新推荐文章于 2023-04-07 21:22:51 发布

阅读量426

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/mz_shenbian/article/details/8723501

本文介绍了jQuery中对象与DOM对象的转换方法，详细讲解了jQuery选择器的分类及其应用场景，包括基本选择器、层次选择器等，并通过实例演示了如何实现隔行换色及批量绑定事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1jQuery对象和DOM对象相互转化

<html>

<head>

<metacharset="utf-8"/>

<scripttype="text/javascript"src="./script/jquery-1.4.2.min.js"></script>

</head>

<body>

<pid="para">这是一个p元素</p>

<pid="para">这是二个P元素</p>

</body>

//1,DOM方式设置p元素的样式

varp = document.getElementById("para");

p.style.backgroundColor= "green";

//2,jquery对象设置p元素的字体样式

$("#para").css("font-size","50px");

//3,jquery对象和DOM对象的转化

var$p = $("p");

//将他转化成DOM对象

var$p = $("#para");

varp = $p[0];

//var p = $p.get(0);

//p.innerHTML= "HELLO";

p.innerHTML= "HELLO WORLD";

//将DON对象转化成jquery对象

//varp = document.getElementById("para");

//使用$()---jquery的构造工厂，将里面的参数构造成一个jquery对象

//var$p = $(p);

//$p.css("color","green");

</script>

</html>

2，jQuery选择器分类,总结

(1) 基本选择器

1,根据id匹配元素

var $p=$("#la");

$p.click(function(){

alert("lalalalalalala");

});

2,根据给定的类名匹配元素

var$span=$(".span");

$span.css("font-size","50px");

3,根据给定的元素名匹配元素

var $div=$("div")

$div.css("background","yellow")

4,匹配所有的元素

var$jihe=$("p,span,div");

$jihe.click(function(){

alert("jihe");

});

(2) 层次选择器

1,后代元素选择器

$("#div1 ulli").css({"color":"yellow","fontSize":"35px"});

2,子元素选择器

$("#div2>span").css("background","green");

3,相邻元素(紧接在前一个元素之后的选择器)

$("#div1 ul +div").css({"background":"red","fontSize":"50px"});

4,兄弟元素选择器

$("span~.div").css({"background":"#66FFCC","fontSize":"60px"});

(3)基本过滤选择器

1,所有div元素中，第一个div

$("div:first").click(function(){alert("1")});

2,所有div元素中,最后一个div

$("div:last").click(function(){alert("最后一个")});

3,获取索引是偶数的所有元素,索引从0开始

$("div:even").click(function(){alert("偶数")});

4,获取索引是奇数的所有元素，索引从0开始

$("div:odd").click(function(){alert("基数")});

5,获取索引等于0的所有元素

$("div:eq(0)").click(function(){alert("索引等于0")});

6,索引大于小于 gt() lt()

$("div:gt(1)").css("color","green");

$("div:了t(1)").css("color","red");

7,获取网页中所有的h标签内容

$(":header").css({"color":"blue","background":"yellow"});

(4)内容过滤选择器

(1)选取含有文本内容为text的元素

$("span:contains('标签')").css("background","pink");

(2)选取含有某元素的元素

$("div:has(b)").css("fontSize","50px");

(5)可见性过滤选择器

(1)选取所有可见的元素

$(":visible").css("fontSize","50px");

(2)选取所有不可见的元素

$("div:hidden").show(1000);

(6)属性过滤选择器

(1)选取拥有此属性的选择器

$("div[class]").css("color","yellow");

(2)选取属性值为value的元素

$("div[class=hide]").show(300);

3，使用jQuery实现隔行换色

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>无标题文档</title>

$(document).ready(function(){

$("#tabtr:even").css("background","blue");

})

</script>

</head>

<body>

</table>

</body>

</html>

批量绑定事件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

$(document).ready(function(){

//1.找到所有的p元素,

$("p").click(function(){alert("mm")});

})

</script>

</head>

<body>

</body>

</html>
4，写一个程序统计被选中的复选框个数

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>无标题文档</title>

function cont(){

alert($("input[name='xuan']:checked").length);

}

</script>

</head>

<body>

</body>

</html>