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伪类选择器语法、相关推荐

  1. CSS3新特性(属性选择器 、结构伪类选择器、2D/3D转换、动画、浏览器私有前缀)

    这里写目录标题 一.CSS3 属性选择器 二.CSS3 结构伪类选择器 三. CSS3 伪元素选择器 四.CSS3 2D转换 1.2D 转换之移动 translate 2.2D 转换之旋转 rotat ...

  2. JavaScript(12) jQuery选择器(基本选择器、层级选择器、伪类选择器、属性选择器)

    提示:我们可以从jquery文档上学习哦~        下面简单的介绍几种常用的选择器 ===================================基本选择器=============== ...

  3. JavaScript之jQuery够用即可(查找筛选器、属性操作、jQuery文档处理)

    文章目录 一.筛选器补充 二.jQuery属性操作 三.jQuery文档处理 一.筛选器补充 1.过滤筛选器 就是查看某个标签中是否存在另外一个标签 // console.log($("di ...

  4. jQuery伪类选择器

    一.简单伪类选择器 :not(selector)  选择除了某个选择器之外的所有元素 :first或first()     选择某元素的第一个元素(非子元素) :last或last()       选 ...

  5. jquery 获取id最大的元素_超全整理!JQuery中的选择器集合

    JQuery的选择器总结 选择器是获取元素并进行操作的一种方式,在使用CSS选择器时,开发人员有时候需要考虑浏览器是否支持某些选择器.而在JQuery中,使用选择器则不需要考虑这些问题,与传统的JS获 ...

  6. 【04】HTML5+CSS3:01-HTML5新增标签、多媒体标签、input标签、新增表单属性、CSS3属性选择器、伪元素选择器、2D转换

    文章目录 HTML5 第一天 一.什么是 `HTML5` 二.`HTML5 ` 新增标签 三.多媒体音频标签 四.多媒体视频标签 五.新增 input 标签 六.新增表单属性 七.`CSS3 ` 属性 ...

  7. jQuery过滤选择器:first和:first-child的区别,CSS伪类:first-child

    最近项目中遇到需求:只在第一列不能删除,不显示小叉号:点击可添加一列,后面的列右上角显示小叉号,可以点击删除. 我是使用以下方法解决这个小需求 :CSS伪类选择器:first-child设置所有小叉号 ...

  8. jQuery对象与dom对象的转换

    jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方法.注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是 jquery对象. 普通的d ...

  9. jQuery概述、优点、使用步骤、入口函数、jQuery对象和DOM对象之间的转换、层级选择器、属性选择器、筛选选择器、节点选择器

    jQuery简介: jQuery是一个高效.精简并且功能丰富的javascript库,它提供的API简单易学,且兼容众多浏览器,极大地简化了javascript代码开发,包含内容:HTML 元素选取. ...

最新文章

  1. byte转文件流 下载到本地
  2. 深入浅出Yolov3和Yolov4
  3. 老铁 666!快手上市暴涨 200%,超 4000 员工成为千万富翁
  4. OC第二节 继承、初始化⽅法、便利构造器
  5. LaTex 实数集R
  6. Windows 7 扩展玻璃效果(Aero Glass)
  7. SQL Server 2008带字段注释导入Power Designer 9.5
  8. java泰拉轴距_Java面向对象
  9. Flink 1.11 SQL 十余项革新大揭秘,哪些演变在便捷你的使用体验?
  10. Oracle 12c因bug导致ORA-04031问题处理过程 | 云和恩墨技术通讯精选
  11. linux mysql 主从数据库_【Linux】【MySQL】MySQL主从数据库
  12. mybatis中文文档_成神之路!缓存+MyBatis+MySQL+Spring全家桶+分布式技术实战合集
  13. 2014年二级c语言题库,全国计算机二级c语言题库试题
  14. 使用 VLD 检测内存泄漏
  15. ubuntu下ROS使用罗技C525/270等摄像头(驱动安装)
  16. Mac配置allure环境变量
  17. 如何在北京购车外地上牌
  18. dataframe删除原来索引,使新索引从0开始
  19. 第15周实践项目-洗牌(范型程序设计)(1)
  20. java中Switch语句的用法

热门文章

  1. 希望C语言能够给我铺路
  2. 在h文件中函定义+ #pragma once 是什么意思?
  3. Web.config详解+asp.net优化
  4. 开发中,常用到的Eclipse的快捷键
  5. 项目中成功的运用proxool连接池
  6. 2019 11 14
  7. Qt编写可视化大屏电子看板系统27-模块5负荷分布
  8. 《矿山经济学》在线平时作业2
  9. 如何开好项目例会︱中科南京软件技术研究院PMO项目主管薛晓娜
  10. 只网签没备案 房管局能查到吗_房子备案了,但是没有房产证,房管局能查询出来么...