jQuery学习之基本选择器、层次选择器和并且选择器

xiaoxiao2021-02-28  9

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JQuery学习</title> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> /** * jQuery是对JavaScript的封装,跨浏览器 * 前期jQuery主要侧重于对于节点的查询 * 后期jQuery增加了事件的处理以及ajax的操作 */ //换色对比体验 function f () { //JavaScript实现变色 //document.getElementsByTagName("h1")[0].style.color="red"; //jQuery实现变色 $('h1').css('color','red'); } //1.基本选择器 function fn () { //id选择器 $("#username").css('color','blue'); //标签选择器 $('h2').css('background-color','green'); //class选择器 $(".username").css('color','blue'); //通配符选择器 $('*').css('background-color','lightcyan'); //联合选择器 $('h2,#username,.username').css('font-size','20px'); } //2.层次选择器 function f1 () { //派生选择器(父子关系)--不考虑层次 //$('div span').css('color','red'); //直接子元素选择器(父子关系)--考虑层次 //$('div >span').css('background-color','lightcoral'); //直接兄弟选择器(兄弟关系) //$('div +span').css('font-size','30px'); //后续全部兄弟关系结点选择器(兄弟关系) $('div~span').css('font-family','微软雅黑'); } //3.并且选择器 function f2 () { //$('li').css('color','aquamarine'); //:first第一个和最后一个:last //$('li:first').css('color','red'); //$('li:last').css('color','red'); //eq(下标索引号),索引从0开始 //$('li:eq(3)').css('color','red'); //gt(索引号)--greet than 结点索引值大于索引号;lt(索引号)--less than 结点索引值小于索引号 //$('li:gt(3)').css('background-color','pink'); //$('li:gt(1):lt(3)').css('color','red'); //even 匹配索引值为偶数的结点;odd 匹配索引值为奇数的结点 //$('li:odd').css('background-color','lightgreen'); //not(选择器)去除某个结点 //$('li:not(#sunquan)').css('color','blue'); //:header选择所有的h标签,如h1,h2.... /*$(':header').css('color','red'); $(':header.pear').css('background-color','lightcyan');*/ /**总结: * 1.并且关系的多个选择器没有先后顺序,但是要避免产生歧义 * 2.并且选择器可以单独使用 * 3.并且选择器可以使用多个,每个选择器使用前要归位 * 4.各种选择器都可以构成并且关系 */ } </script> </head> <body> <h1>jQuery学习</h1> <input type="button" value="变色" οnclick="f()" /> <h2>选择器学习</h2> <input type="text" id="username" value="qiuzhiwen" /><br /><br /> <input type="text" class="username" value="qiuzhiwen" /><br /><br /> <input type="text" class="username" value="qiuzhiwen" /><br /><br /> <input type="button" value="触发" οnclick="fn()" /> <div> <span>刘备</span> <p><span>张飞</span></p> <span>关羽</span> </div> <span>刘禅</span> <span>妲己</span> <div>吕布</div> <span>赤兔马</span><br /><br /> <input type="button" value="触发1" οnclick="f1()"/> <h3 class="pear">并且选择器</h3> <ul> <li>赵玉</li> <li>小乔</li> <li>周瑜</li> <li>黄盖</li> <li>大乔</li> <li id="sunquan">孙权</li> </ul> <input type="button" value="触发2" οnclick="f2()" /> </body> </html>
转载请注明原文地址: https://www.6miu.com/read-1100025.html

最新回复(0)