jquery 给类名元素添加行内样式_学Jquery的第一天

最新推荐文章于 2024-09-26 11:01:02 发布

weixin_39822923

最新推荐文章于 2024-09-26 11:01:02 发布

阅读量633

点赞数

文章标签： jquery 给类名元素添加行内样式

这篇博客介绍了Jquery的选择器用法，包括基础选择器、层次选择器、过滤选择器，以及如何通过Jquery操作DOM，如设置属性、样式、内容，以及创建、删除元素。还涉及了ready事件和事件绑定。

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

1.创建一个div

<body>
   <div id="mydiv"></div>
</body>
<script src="js/jquery-1.9.0.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

2. Dom对象

var divDom = document.getElementById("mydiv");
console.log(divDom);

3.Jquery包装集对象

var divJquery = $("#mydiv");
console.log(divJquery);
console.log("====Dom对象与Jquery对象的互相转换====");
var domToJquery = $(divDom);
console.log(domToJquery);
var jqueryToDom = divJquery[0];
console.log(jqueryToDom);

4.each() Jquery方法，遍历方法

divJquery.each(function(index,element){
 console.log(index);
 console.log("--------");
 console.log(element);// dom对象
 console.log(this); // dom对象
});

一、选择器

（一）、基础选择器

1、ID选择器
格式：$("#id属性值")
获取指定id值的对象(只会获取到第一个id的值)

1.1 id选择器var div1 = $("#div1");console.log(div1);
2、类选择器
格式：$(".class属性值")
获取所有指定class属性值的元素

2.1 类选择器例：var cls = $(".test");console.log(cls);
3、元素选择器
格式：$("元素名/标签名")
获取所有指定标签名的元素

3.1 元素选择器例：var divs = $("div");console.log(divs);
4、通用选择器
格式：$("*")
获取所有的元素的对象

4.1 元素选择器例：var divs = $("div");console.log(divs);
5、组合选择器例：
格式：$("选择器1,选择器2...")

5.1组合选择器例：
var group = $("#div1,span,.test");
console.log(group);

（二）层次选择器

1.后代选择器

ancestor descendant $("#parent div")选择id为parent的元素的所有div元素

1.1例：

var houdai = $("#parent div");
2.子代选择器

parent > child $("#parent>div")选择id为parent的直接div子元素

2.1例：

var zidai = $("#parent > div");
zidai.each(function(){
 console.log(this);
 });
3.相邻选择器

prev + next $(".blue + img")选择css类为blue的下一个img元素

3.1例：

var xl = $("#child + p");
xl.each(function(){
 console.log(this);
});

4.同辈选择器

prev ~ sibling $(".blue ~ img")选择css类为blue的之后的img元素

4.1例：

最低0.47元/天解锁文章