jQueryDom和源生DOM相互的转换、jQuery选择器语法、JQuery层次选择器语法、jQuery属性选择器语法、jQuery伪类选择器语法、

最新推荐文章于 2024-11-07 15:25:50 发布

John_Wick___

最新推荐文章于 2024-11-07 15:25:50 发布

阅读量165

点赞数

文章标签： css jquery js javascript

本文链接：https://blog.csdn.net/John_Wick___/article/details/119461182

版权

jQuery和源生DOM的转化

案例

<body>
<p id="test">123</p>
<p>456</p>
</body>
<script src="jQuery.js"></script>
<script>
$(document).ready(function(){
 let op=document.getElementById("test");
 console.log(op.innerHTML);//输出为123
 let op1=$("p");
 console.log(op1.html()); //输出为123
 //jQueryDom转源生Dom;
 //jQuery所有的Dom元素都放在包装集中
 let op=$('p')[1];//$("p").get(0)将包装集中下标为
 //0元素的源生Dom对象返回
 //console.log(op.innerHTML);输出为456
 ----------------------------------------------
 //源生Dom转jQueryDom
 let op=document.getElementById("test");
 console.log($(op).html())//输出为123

})
</script>

jQuery选择器语法

案例

<bddy>
        <div>1</div>
		<div>1</div>
		<p id="test">2</p>
		<p class="test">3</p>
		<span>4</span>
		<strong>5</strong>
</body>
<script src="jQuery.js"></script>
<script>
//1.标签选择器
$("div").css({
    backgroundColor="red";
});// 1 2 行都显示红色


//2.ID选择器
$("#test").css({
        backgroundColor="yellow";

})//第三行显示黄色


//3.类选择器
$(".test").css({
        backgroundColor="blue";

});//3 这行变蓝色


//4.群组选择器
$("span,strong").css({
        backgroundColor="green";

});//4 5 背景变绿色，内连块，所以不是整行


//5.通用选择器
$("*").css({
        backgroundColor="orange";

});//群组选择器也会选择到html文件，所以整个页面会变成
   //橘黄色




</script>

jQuery层次选择器语法

案例

<body>
<div id="box1" class="box">
			1
		</div>
		<div id="box2" class="box">
			2
		</div>
		<div id="box3" class="box">
			3
		</div>
		<div id="box4" class="box">
			4<p>
				<div id="box5" class="box">5</div>
			</p>
		</div>
<body>
<script src="jQuery.js"></script>
<script>
1.后代选择器  空格
$("body div").css({
  backgroundColor:"red"
});//1 2 3 4 5都变红，因为5继承了父元素4的css属性
   //所以第 5 行也变红（颜色属性可以继承)

2.子代选择器  >
$("body>div").css({
  backgroundColor:"red"

});原理同上；1 2 3 4 5行都变红色


//3.相邻选择器
$("#box2+div").css({
  backgroundColor:"red"

});//相邻一般指的是下一个即box2下面的即就是box3变红


//4.兄弟元素

$("#box2~div").css({
    backgroundColor:"red"

});//兄弟元素指的是box2 下面的全部div;即就是3 4 5 


</script>

jQuery属性选择器语法

案例

<body>
<div id="box1" class="box">
			1
</div>
<div id="">
			2
</div>
<input type="text" name="" id="" value="" />
<input type="password" name="" id="" value="" />
</body>
<script src="jQuery.js"></script>
<script>
//1.只看属性名
$("div[class]").css({
  backgroundColor="red"

});//只有1 那行变红  存在class

//2.不但看属性名还要看属性值
$("input[type==password]").val(111);
//找到了属性type 属性值为password的input框，并输入111
// password格式加密着 所以显示***


//3通过多属性查找
$("div[id][class]").css({

 backgroundColor="red"
});
//即要有id名又要有class名 所以只有第一个满足 1 那行变红

</script>

jQuery伪类选择器语法

案例

<body>
		<div id="">
			0
		</div>
		<div id="">
			1
		</div>
		<div id="box2">
			2
		</div>
		<div id="box3">
			3
		</div>
		<div id="">
			4
		</div>
	</body>
	<script src="jQuery.js"></script>
<script>
//1.选中偶数行
$("div:even").css({
 backgroundColor:"red";
})//从0开始 2 4偶数行都显示红色

//2选中奇数行
$("div:odd").css({
  backgroundColor:"yellow";

})// 1 3行变黄


//3 first 首行
$("div:first").css({
  backgroundColor:"blue";

})//0行变蓝色


//4  last 尾行
$("div:last").css({
  backgroundColor:"green";


}) //4 那行变绿


//5eq()  点到谁是谁
let n=2;
$(`div:eq(${n})`).css({
  backgroundColor:"orange";

})
另一种写法
$("div").eq(n).css({
backgroundColor:"hotpink"
})//  内容是2的那行变为骚粉



//6 not: 除了
$("div").not("#box3").css({
backgroundColor:"skyblue";

});除了div 3；其他都变天蓝色

//7.gt(n)选中大于n下标的元素，不包含n
$("div:gt(2)").css({
 backgroundColor:"skyblue";

})//大于下标为2的那行都变蓝色

//8.It(n)选中小于下标n的元素。不报行n
$("div:It(2)").css({
 backgroundColor:"skyblue";

});//下标为 0  1 的那两行变色


</script>