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

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);//输出为123let 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转jQueryDomlet 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>

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

CSS3新特性(属性选择器、结构伪类选择器、2D/3D转换、动画、浏览器私有前缀）
这里写目录标题一.CSS3 属性选择器二.CSS3 结构伪类选择器三. CSS3 伪元素选择器四.CSS3 2D转换 1.2D 转换之移动 translate 2.2D 转换之旋转 rotat ...
JavaScript(12) jQuery选择器(基本选择器、层级选择器、伪类选择器、属性选择器)
提示:我们可以从jquery文档上学习哦~ 下面简单的介绍几种常用的选择器 ===================================基本选择器=============== ...
JavaScript之jQuery够用即可（查找筛选器、属性操作、jQuery文档处理）
文章目录一.筛选器补充二.jQuery属性操作三.jQuery文档处理一.筛选器补充 1.过滤筛选器就是查看某个标签中是否存在另外一个标签 // console.log($("di ...
jQuery伪类选择器
一.简单伪类选择器 :not(selector) 选择除了某个选择器之外的所有元素 :first或first() 选择某元素的第一个元素(非子元素) :last或last() 选 ...
jquery 获取id最大的元素_超全整理！JQuery中的选择器集合
JQuery的选择器总结选择器是获取元素并进行操作的一种方式,在使用CSS选择器时,开发人员有时候需要考虑浏览器是否支持某些选择器.而在JQuery中,使用选择器则不需要考虑这些问题,与传统的JS获 ...
【04】HTML5+CSS3：01-HTML5新增标签、多媒体标签、input标签、新增表单属性、CSS3属性选择器、伪元素选择器、2D转换
文章目录 HTML5 第一天一.什么是 `HTML5` 二.`HTML5 ` 新增标签三.多媒体音频标签四.多媒体视频标签五.新增 input 标签六.新增表单属性七.`CSS3 ` 属性 ...
jQuery过滤选择器:first和:first-child的区别，CSS伪类:first-child
最近项目中遇到需求:只在第一列不能删除,不显示小叉号:点击可添加一列,后面的列右上角显示小叉号,可以点击删除. 我是使用以下方法解决这个小需求 :CSS伪类选择器:first-child设置所有小叉号 ...
jQuery对象与dom对象的转换
jQuery对象与dom对象的转换只有jquery对象才能使用jquery定义的方法.注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是 jquery对象. 普通的d ...
jQuery概述、优点、使用步骤、入口函数、jQuery对象和DOM对象之间的转换、层级选择器、属性选择器、筛选选择器、节点选择器
jQuery简介: jQuery是一个高效.精简并且功能丰富的javascript库,它提供的API简单易学,且兼容众多浏览器,极大地简化了javascript代码开发,包含内容:HTML 元素选取. ...

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

jQuery和源生DOM的转化

jQuery选择器语法

jQuery层次选择器语法

jQuery属性选择器语法

jQuery伪类选择器语法

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

最新文章

热门文章