这篇博客介绍了Jquery的选择器用法，包括基础选择器、层次选择器、过滤选择器，以及如何通过Jquery操作DOM，如设置属性、样式、内容，以及创建、删除元素。还涉及了ready事件和事件绑定。
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元/天 解锁文章
扫一扫
209
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
