欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Web前端基础(15):jQuery基础(二)

程序员文章站 2022-06-21 19:39:34
1. jQuery选择器 jQuery选择器是jQuery强大的体现,它提供了一组方法,让我们更加方便的获取到页面中的元素。 1.1 基本选择器 例子如下: < ......</div> <div class="content"> <h1>1. jquery选择器</h1> <p>jquery选择器是jquery强大的体现,它提供了一组方法,让我们更加方便的获取到页面中的元素。</p> <h2>1.1 基本选择器</h2> <p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczQuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxOTExMjAvYl8wXzIwMTkxMTIwMDc0ODExMzgyNC5wbmc=" alt="Web前端基础(15):jQuery基础(二)" title="Web前端基础(15):jQuery基础(二)"></p> <p>例子如下:</p> <p> </p> <p> </p> <div class="cnblogs_code"> <pre class="brush: javascript;"><!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> </head> <body> <div></div> <div id="box"></div> <div class="box"></div> <div class="box"></div> <div></div> <script type="text/javascript" src="js/jquery-2.1.0.js"></script> <script type="text/javascript"> //入口函数 $(function(){ //三种方式获取jquery对象 var jqbox1 = $("#box"); var jqbox2 = $(".box"); var jqbox3 = $('div'); //操作标签选择器 jqbox3.css('width', '100'); jqbox3.css('height', 100); jqbox3.css('background-color', 'red'); jqbox3.css('margin-top', 10); //操作类选择器(隐式迭代,不用一个一个设置) jqbox2.css("background", "green"); jqbox2.text('哈哈哈') //操作id选择器 jqbox1.css("background", "yellow"); }) </script> </body> </html></pre> </div> <p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczQuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxOTExMjAvYl8wXzIwMTkxMTIwMDc0ODExODc4MC5wbmc=" alt="Web前端基础(15):jQuery基础(二)" title="Web前端基础(15):jQuery基础(二)"></p> <p> </p> <p> </p> <h2>1.2 层级选择器</h2> <p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczQuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxOTExMjAvYl8wXzIwMTkxMTIwMDc0ODEyNzk2NS5wbmc=" alt="Web前端基础(15):jQuery基础(二)" title="Web前端基础(15):jQuery基础(二)"></p> <p> </p> <p> </p> <blockquote> <p>a b,获得a元素内部的所有的b元素。(祖先) -- 后代 </p> <p>a > b,获得a元素下面的所有的b元素。(父子)</p> <p>a + b,获得a元素同级下一个b元素。(兄弟) </p> <p>a ~ b,获得a元素同级所有的b元素。(兄弟)</p> </blockquote> <p> 例子如下:</p> <div class="cnblogs_code"> <pre class="brush: javascript;"><!doctype html> <html> <head lang="en"> <meta charset="utf-8"> <title></title> <script src="js/jquery-2.1.0.js"></script> <script> $(function () { //获取ul中的li设置为粉色 //后代:儿孙重孙曾孙玄孙.... var jqli = $("ul li"); jqli.css("margin", 5); jqli.css("background", "pink"); //子代:亲儿子 var jqotherli = $("ul>li"); jqotherli.css("background", "red"); }); </script> </head> <body> <ul> <li>111</li> <li>222</li> <li>333</li> <ol> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ol> </ul> </body> </html></pre> </div> <p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczQuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxOTExMjAvYl8wXzIwMTkxMTIwMDc0ODEyODYyMy5wbmc=" alt="Web前端基础(15):jQuery基础(二)" title="Web前端基础(15):jQuery基础(二)"></p> <p> </p> <p> </p> <h2>1.3 基本过滤选择器</h2> <p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczQuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxOTExMjAvYl8wXzIwMTkxMTIwMDc0ODEyNTA4MS5qcGc=" alt="Web前端基础(15):jQuery基础(二)" title="Web前端基础(15):jQuery基础(二)"></p> <p> </p> <p> </p> <div class="cnblogs_code"> <pre class="brush: javascript;">:first 第一个 :last 最后一个 :not(...) 删除指定内容。例如:1234:not(3) --> 124 :even 偶数,从0开始计数 -- 操作索引号,页面显示奇数项 :odd 奇数 :eq(index) 等于index :gt(index) 大于index :lt(index) 小于index -------------------------------------------------------- :header 获得标题(<h1>/<h2> ...) :animated 获得动画的 :focus 获得焦点</pre> </div> <p>例子如下:</p> <div class="cnblogs_code"> <pre class="brush: javascript;"><!doctype html> <html> <head> <meta charset="utf-8"> <title>基本过滤选择器</title> </head> <body> <ul> <li>哈哈哈哈,基本过滤选择器</li> <li>嘿嘿嘿</li> <li>天王盖地虎</li> <li>小鸡炖蘑菇</li> </ul> </body> <script src="js/jquery-2.1.0.js"></script> <script type="text/javascript"> $(function(){ //获取第一个 :first ,获取最后一个 :last //奇数 $('li:odd').css('color','red'); //偶数 $('li:even').css('color','green'); //选中索引值为1的元素 * $('li:eq(1)').css('font-size','30px'); //大于索引值1 $('li:gt(1)').css('font-size','50px'); //小于索引值1 $('li:lt(1)').css('font-size','12px'); }) </script> </html></pre> </div> <p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczQuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxOTExMjAvYl8wXzIwMTkxMTIwMDc0ODEzNjAyMy5qcGc=" alt="Web前端基础(15):jQuery基础(二)" title="Web前端基础(15):jQuery基础(二)"></p> <p> </p> <p> </p> <h2>1.4 属性选择器</h2> <p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczQuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxOTExMjAvYl8wXzIwMTkxMTIwMDc0ODEzNTM2Ni5qcGc=" alt="Web前端基础(15):jQuery基础(二)" title="Web前端基础(15):jQuery基础(二)"></p> <p> </p> <p> </p> <div class="cnblogs_code"> <pre class="brush: javascript;">[属性名] 获得有属性名的元素。 [属性名=值] 获得属性名等于值的元素 [属性名!=值] 获得属性名不等于值的元素 [...][...][...] 复合属性选择器,多个属性同时过滤。where...and...and... --------------------------------------------------------- [属性名^=值] 获得属性名以值开头的元素 [属性名$=值] 获得属性名以值结尾的元素 [属性名*=值] 获得属性名含有值的元素</pre> </div> <p>例子如下:</p> <div class="cnblogs_code"> <pre class="brush: javascript;"><!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="box"> <h2 class="title">属性元素器</h2> <!--<p class="p1">我是一个段落</p>--> <ul> <li id="li1">分手应该体面</li> <li class="what" id="li2">分手应该体面</li> <li class="what">分手应该体面</li> <li class="heihei">分手应该体面</li> </ul> <form action="" method="post"> <input name="username" type='text' value="1" checked="checked" /> <input name="username1111" type='text' value="1" /> <input name="username2222" type='text' value="1" /> <input name="username3333" type='text' value="1" /> <button class="btn-default">按钮1</button> <button class="btn-info">按钮1</button> <button class="btn-success">按钮1</button> <button class="btn-danger">按钮1</button> </form> </div> </body> <script src="js/jquery-2.1.0.js"></script> <script type="text/javascript"> $(function(){ //标签名[属性名] 查找所有含有id属性的该标签名的元素 $('li[id]').css('color','red'); //匹配给定的属性是what值得元素 $('li[class=what]').css('font-size','30px'); //[attr!=value] 匹配所有不含有指定的属性,或者属性不等于特定值的元素 $('li[class!=what]').css('font-size','50px'); //匹配给定的属性是以某些值开始的元素 $('input[name^=username]').css('background','gray'); //匹配给定的属性是以某些值结尾的元素 $('input[name$=222]').css('background','greenyellow'); //匹配给定的属性是以包含某些值的元素 $('button[class*=btn]').css('background','red') }) </script> </html></pre> </div> <p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczQuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxOTExMjAvYl8wXzIwMTkxMTIwMDc0ODE0OTgyMC5qcGc=" alt="Web前端基础(15):jQuery基础(二)" title="Web前端基础(15):jQuery基础(二)"></p> </div> <div class="info-pre-next"> <p> 上一篇: <a href="/article/1483371.html"> vivo U10官宣:24日正式发布 5000mAh大电池加持 </a> </p> <p> 下一篇: <a href="/article/1483373.html"> 三星Galaxy S11曝光:后置一亿像素四摄、潜望式5倍光学变焦 </a> </p> </div> <div class="wz_tuijian"> <p> 推荐阅读 </p> <ul> <li> <a href="/article/2142862.html" target="_blank" title="javascript基础知识总结(web前端开发语言)"> <h2> javascript基础知识总结(web前端开发语言) </h2> </a> </li> <li> <a href="/article/2074314.html" target="_blank" title="Web前端基础学习-1"> <h2> Web前端基础学习-1 </h2> </a> </li> <li> <a href="/article/2022087.html" target="_blank" title="零基础转行web前端,要学习多久?需要掌握些什么?"> <h2> 零基础转行web前端,要学习多久?需要掌握些什么? </h2> </a> </li> <li> <a href="/article/2008903.html" target="_blank" title="零基础转行web前端,如何高效的去学习web前端"> <h2> 零基础转行web前端,如何高效的去学习web前端 </h2> </a> </li> <li> <a href="/article/2003948.html" target="_blank" title="Web基础了解版03-jQuery"> <h2> Web基础了解版03-jQuery </h2> </a> </li> <li> <a href="/article/1979747.html" target="_blank" title="Web前端基础(2):HTML(二)"> <h2> Web前端基础(2):HTML(二) </h2> </a> </li> <li> <a href="/article/1967928.html" target="_blank" title="Web前端JQuery面试题(二)"> <h2> Web前端JQuery面试题(二) </h2> </a> </li> <li> <a href="/article/1947794.html" target="_blank" title="Web前端基础(5):CSS(二)"> <h2> Web前端基础(5):CSS(二) </h2> </a> </li> <li> <a href="/article/1907164.html" target="_blank" title="Web前端基础(1):HTML(一)"> <h2> Web前端基础(1):HTML(一) </h2> </a> </li> <li> <a href="/article/1906729.html" target="_blank" title="Web前端基础(3):HTML(三)"> <h2> Web前端基础(3):HTML(三) </h2> </a> </li> </ul> </div> </article> </div> </main> <footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益,请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号:<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body> </html>