jquery选择器和基本操作
2024-05-19 01:06:17
定义:jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
实例:
1 $("#test").html()
2
3 意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法
4
5 这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML;
6
7 虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错
8
9 约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$.
10
11 var $variable = jQuery 对象
12 var variable = DOM 对象
13
14 $variable[0]：jquery对象转为dom对象 $("#msg").html(); $("#msg")[0].innerHTMLView Code
1.选择器和筛选器
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <script src="jquery-3.3.1.js"></script>
7 </head>
8 <body>
9
10 <div class="c2">
11 <p class="c4">111</p>
12 <p class="c4">222</p>
13 <div><p class="c4">123</p></div>
14 <a id="a1" href="">click</a>
15 </div>
16 <p class="c4">234</p>
17 <p class="c4">234</p>
18
19 <div alex="dsb" peiqi="678" class="c21">alex和配齐</div>
20 <div alex="dsb">alex</div>
21 <div peiqi="678">8888</div>
22
23
24 <div class="p1">
25 <p class="c3" id="i3">222</p>
26 <p class="c3">333</p>
27 <p class="c3" id="i2">444</p>
28 <p class="c3">555</p>
29 <p class="c3 c8">666</p>
30 <p class="c3">777</p>
31 </div>
32
33 <div class="c5">
34 <input type="checkbox">
35 <input type="checkbox">
36 <input type="checkbox">
37 </div>
38
39
40 <div class="c9">
41 <p>111</p>
42 <p>222</p>
43 <div class="c10">
44 <p>333</p>
45 </div>
46 <a href="">click</a>
47 </div>
48
49 <script>
50 /*
51 // 01 选择器
52 // 1.1 基本选择器
53 //$("*").css("color","red")
54 // $(".c2").css("color","red")
55 // $("#a1").css("color","red")
56 // $("p").css("color","green")
57 // 1.2 层级选择器
58 //$(".c2 div").css("color","green")
59 //$(".c2 p").css("color","green") //子孙后代
60 //$(".c2>p").css("color","green") //仅限儿子们
61 //$(".c2+p").css("color","red") //同级下一个 剩下的不要
62 //$(".c2~p").css("color","red") //同级下面P标签全要
63
64 // 1.3 基本筛选器
65 //$(".c3:first").css("color","red");
66 //$(".c3:eq(2)").css("color","red"); // eq(索引号)
67 //$(".c3:gt(1)").css("color","red"); //gt(1)索引大于1的标签
68 //$(".c3:lt(4)").css("color","red"); //lt(1)索引小于4的标签
69 //$(".c3:even").css("color","red"); //偶数
70 //$(".c3:odd").css("color","red"); //奇数
71
72 //1.4 属性选择器
73 //$("[peiqi]").css("color","red");
74 //$("[alex='dsb'][peiqi]").css("color","red");
75
76 //1.5 表单选择器
77 //以下三种写法效果一样
78 //$("[type='checkbox']").attr("checked","checked");
79 //$(":checkbox").attr("checked","checked")
80 //$("input:checkbox").attr("checked","checked") //仅限input标签
81
82 */
83
84 /*
85 // 02 进阶筛选器
86 // $(".c3").first().css("color","red");
87 // var index=3;
88 // $(".c3:"+"eq("+index+")").css("color","red"); //这种写法不方便赋值,不推荐
89 // $(".c3").eq(index).css("color","red");
90 // 判断某个标签是否拥有某个class名
91 // console.log($("[alex]").hasClass("c21"));
92
93 */
94
95 /*
96 // 03 导航选择器
97 //3.1 查找兄弟标签
98 // $("#i2").next().css("color","red");
99 // $("#i2").nextAll().css("color","red");
100 // $("#i2").nextUntil(".c8").css("color","red");
101 // $("#i2").prev().css("color","red");
102 // $("#i2").prevAll().css("color","red");
103 // $("#i2").prevUntil("#i3").css("color","red");
104 // $("#i2").siblings().css("color","red"); //除选中标签外的兄弟标签 很重要
105
106 // 3.2 查找子孙标签
107 // console.log($(".c9").children()); //结果:jQuery.fn.init(4) [p, p, div.c10, a, prevObject: jQuery.fn.init(1)]
108 // $(".c9").children().first().css("color","red");
109 // $(".c9").children("p").css("color","red"); //只查找到儿子那一代的p
110 // $(".c9").find("p").css("color","red"); //查找子孙所有P
111 // $(".c9").children(".c10").css("color","red");
112
113 // 3.3查找父类标签
114 // console.log($(".c10").parent()); //只查找到父亲
115 // console.log($(".c10").parents()); //父亲,爷爷.....
116 // $(".c10").parentsUntil()
117 */
118
119
120
121
122
123
124
125
126 </script>
127
128 </body>
129 </html>View Code
2.事件绑定
1 <ul class="box">
2 <li>123</li>
3 <li>234</li>
4 <li>456</li>
5 <li>567</li>
6 <li class="c1">678</li>
7 </ul>
8 <button class="add">ADD</button>
9
10 <script src="jquery-3.3.1.js"></script>
11 <script>
12 //基本形式 $().事件(function(){})
13 // 01 普通绑定事件
14 // $(".box li").click(function(){
15 // alert($(this).html())
16 // })
17
18 // 委托绑定 绑定父类.on(指定事件类型,指定子标签,指定函数)
19 // $(".box").on("click","li",function(){
20 // alert($(this).html())
21 // })
22 //
23 // $(".add").click(function(){
24 // $(".box").append("<li>789</li>")
25 // })View Code
3.jquery操作
1 <p><a href="">123</a></p>
2
3 <script>
4 // 01 文本操作
5 // console.log($("p").html());
6 // console.log($("p").text());
7 // $("p").text("<a href=''>456</a>");
8 // $("p").html("<a href=''>456</a>");
9
10 //02 属性操作
11 // $().attr("")
12 // $().attr("","")
13 // $("p").attr("alex")
14 // $("p").attr("alex","dsb")
15 // $("p").removeAttr("class")
16
17 // 03 class操作
18 // $("p").addClass("c1")
19 // $("p").removeClass("c1")
20
21 //04 jquery 获取索引值View Code
4补充:jquery索引获取
1 ul>
2 <li id="foo">foo</li>
3 <li id="bar">bar</li>
4 <li id="baz">baz</li>
5 </ul>
6
7 <script>
8 i1 = $('li').index(document.getElementById('bar')); //1，传递一个DOM对象，返回这个对象在原先集合中的索引位置
9 i2 = $('li').index($('#baz')); //1，传递一个jQuery对象
10 i3 = $('li').index($('li:gt(0)')); //1，传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置
11 i4 = $('#baz').index('li'); //1，传递一个选择器，返回#bar在所有li中的索引位置
12 i5 = $('#baz').index(); //1，不传递参数，返回这个元素在同辈中的索引位置。
13 console.log(i1,i2,i3,i4,i5)
14 </script>
15
16
17 <!--//用于二级或者三级联动 -->
18 <div id="nav">
19 <a href="http://www.jbxue.com/">建站素材</a>
20 <a href="http://www.jbxue.com/">jquery特效</a>
21 <a href="http://www.jbxue.com/">脚本学堂</a>
22 <a href="http://www.jbxue.com/wb/">网站编程</a>
23 </div>
24
25 <script>
26 $("#nav a").click(function(){
27 //四个经典的用法
28 var index1 = $("#nav a").index(this);
29 var index2 = $("#nav a").index($(this));
30 var index3 = $(this).index()
31 var index3 = $(this).index("a")
32 alert(index3);
33 return false;
34 });
35 </script>View Code
参考自:https://www.cnblogs.com/yuanchenqi/articles/6936986.html?tdsourcetag=s_pctim_aiomsg
转载于:https://www.cnblogs.com/Mixtea/p/10454486.html
jquery选择器和基本操作相关推荐
- 【jquery】jquery选择器
知识点 1.jquery选择器的作用是选择jquery页面中的html元素. 2.常用的选择器有:基本选择器.层级选择器.过滤选择器.属性选择器. 基本选择器 1. id 选择器 代码实现: elem ...
- JQuery——选择器分类
JQuery选择器 1 什么是JQuery选择器 快速高效的找到指定节点,支持css语法设置页面 2 JQuery选择器分类 2.1 基本选择器 CSS选择器 层级选择器 表单域选择器 ...
- jQuery选择器实现隔行变色和使用javaScript实现隔行变色
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--什么是选择器? jQuery选择器继承了 ...
- jQuery 学习笔记一(认识jQuery jQuery选择器 jQuery中的DOM操作)
第一章 认识jQuery jQuery代码风格 $(document).ready(function(){ //... }); 简化 $(function(){ //... }); jQuery对象转 ...
- jQuery选择器回顾，IE8还需要你发光发热
2019独角兽企业重金招聘Python工程师标准>>> 今天又把jQuery的选择器看了一下,感觉有好几个一直都没有用过.现在有这么多模板双向绑定之类先进思想的前端框架,也不知道jq ...
- [翻译]帮助文档-jQuery 选择器
jQuery的选择器是CSS 1-3,XPath的结合物.jQuery提取这二种查询语言最好的部分,融合后创造出了最终的jQuery表达式查询语言.如果你了解CSS(绝大部分WEB开发者都用到的),那 ...
- Jquery 选择器大全 【转载】
选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写 ...
- JQuery 选择器。
• #id • element • .class • .class.cl ...
- 使用HTML5的自定义数据属性的jQuery选择器
本文翻译自:jQuery selectors on custom data attributes using HTML5 I would like to know what selectors are ...
最新文章
- 如何删除Cookie？
- python截取逗号_Python基础知识： 元组
- 无法获取到图片的宽高
- hdu 5542（树状数组优化dp）
- c++ 该使用类内初始值么？
- python点击屏幕_Python Appium 滑动、点击等
- python中np.reshape与matlab中reshape区别，以及多axis的np.mean分析[探索6]
- 如何从Oracle官网上下载JDK
- licenses.licx文件
- java软考真题_2016年下半年软考程序员下午真题（3）
- 【开发工具】【perf】性能分析工具perf的编译和使用说明
- 微信小程序 常用组件
- jsp:include和%@include file=%有什么区别
- Hadoop1.0单点安装-Windows
- 34岁的困境！测试工程师如何突破职业瓶颈？
- MATLAB实战系列（十）-二维装箱问题之BL法修正版（附MATLAB代码）
- ML-Agents案例之蠕虫
- 嵌入式知识框架之六-接口与总线（SPI\I2C\ USB\PCI\PCI-E\SD\SDIO\以太网接口）
- vue尚品汇商城项目-day04【29.加入购物车操作（难点）】
- 系统分析师学习笔记（六）