https://www.w3cschool.cn/jquery/jquery-ref-selectors.html
DOM对象和jQuery之间的互相转换
<script>
/*dom对象获取*/
var objDOM = document.getElementById("tv_div")
alert(objDOM.innerHTML)
/*DOM转jquer对象*/
var $objJQ = $(objDOM)
alert($objJQ.html())
/*jquery转换为Dom*/
var objDom1 = $objJQ[0];
var objDom2 = $objJQ.get(0)
alert(objDom1.innerHTML)
alert(objDom2.innerHTML)
</script>
先获取DOM对象,然后在将其用工厂函数包装成jQuery对象
var $obj = $( objDOM )
将jQuery转换成DOM对象:
1: $obj[0]
2: $obj.get(0)
jQuery选择器:
基本选择器:
1,标签选择器
2,类选择器
3,id选择器
4,并集选择器
5,全局选择器
<script>
$(document).ready(function(){
/*标签选择器*/
$("p").css({"color":"red"})
/*类选择器*/
$(".imgLeft").css({"color":"red"})
/*ID选择器*/
$("#book").css({"color":"red"})
/*并集选择器*/
$("h1 p").css({"color":"red"})
/*全局选择器*/
$("*").css({"color":"red"})
})
</script>
层次选择器:
1,后代选择器
2,子选择器
3.相邻选择器
4,同辈选择器
script>
$(document).ready(function(){
/*后代选择器*/
$("#book p").css({"color":"blue"})
/*子选择器*/
$("#book>p").css({"color":"blue"})
/*相邻选择器*/
$("#book+p").css({"color":"blue"})
/*同辈选择器*/
$("#book~p").css({"color":"blue"})
})
</script>
属性选择器:
1,$("[src]") //只要属性中包含src = "#" 的属性,就会被选中
2,[attribute = value] //属性attribute的值等于value时就会被选中
3,[ attribute != value ] //不等于
4,[ attribute^ = value ] //value开头的
5,[attribute$ = value ] //以value结尾的
6,[attribute* = value] //只要包含了value
<script>
/*属性选择器*//*包含选择器,包含class的a标签都被选中*/
$("#news a[class]").css({"background-color":"red"})
/*class属性为more的都被选择*/
$("a[class=more]").hide()
/*class属性 不 为more的都被选择*/
$("a[class!=more]").hide()
/*herf以www开头的*/
$("#news a[href^='www']").css({"background-color":"red"})
/*herf以html结尾的*/
$("#news a[href$='html']").css({"background-color":"red"})
/*href全部被选择*/
</script>
过滤选择器:
1,基本过滤选择器
2,可见性过滤选择器
3,表单对象过滤器
4,内容过滤器,子元素过滤器
基本过滤器:
:first选取第一个子元素
:last 选取最后一个子元素
:not(selector) 不包含selector属性的所有元素
:even 偶数行(由索引)来判断索引从零开始
:odd 奇数行 一样由零开始索引
:eq(index) 索引等于index的元素
:gt(index) 大于index索引的元素都被选中
:lt(index) 小于index索引的元素都被选中
:header 选取所有的h1~h6标题元素
:focus 选取当前获取焦点的元素
:animated 选取当前所有的的动画
可见性过滤选择器:
:visible 选取所有可见的元素
:hidden 选取所有隐藏元素
$("#txt_2").hide(); $(document).ready(function(){ $("#show").click(function(){ $("p:hidden").show(); }) $("#hide").click(function(){ $("p:visible").hide(); }) })
有特殊符号的元素名称要用特殊的解决方法
例如: id= “id#a" id = "id[2]
$("#id \\#a")
$("#id\\[2\\]")