Jquery选择器与样式操作

我不是女神ヾ 2021-07-04 23:18 446阅读 0赞

## jquery选择器 ##

**jquery用法思想一**  
选择某个网页元素，然后对它进行某种操作

**jquery选择器**  
jquery选择器可以快速地选择元素，选择规则和css样式相同，使用`length`属性判断是否选择成功。

$('#myId') //选择id为myId的网页元素
    $('.myClass') // 选择class为myClass的元素
    $('li') //选择所有的li元素
    $('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素
    $('input[name=first]') // 选择name属性等于first的input元素

**对选择集进行过滤**

$('div').has('p'); // 选择包含p元素的div元素
    $('div').not('.myClass'); //选择class不等于myClass的div元素
    $('div').filter('.myClass'); //选择class等于myClass的div元素
    $('div').eq(5); //选择第6个div元素

**选择集转移**

$('div').prev(); //选择div元素前面紧挨的同辈元素
    $('div').prevAll(); //选择div元素之前所有的同辈元素
    $('div').next(); //选择div元素后面紧挨的同辈元素
    $('div').nextAll(); //选择div元素后面所有的同辈元素
    $('div').parent(); //选择div的父元素
    $('div').children(); //选择div的所有子元素
    $('div').siblings(); //选择div的同级元素
    $('div').find('.myClass'); //选择div内的class等于myClass的元素

**判断是否选择到了元素**  
jquery有容错机制，即使没有找到元素，也不会出错，可以用length属性来判断是否找到了元素,length等于0，就是没选择到元素，length大于0，就是选择到了元素。

var $div1 = $('#div1');
    var $div2 = $('#div2');
    alert($div1.length); // 弹出1
    alert($div2.length); // 弹出0
    ......
    <div id="div1">这是一个div</div>

## jquery样式操作 ##

**jquery用法思想二**  
同一个函数完成取值和赋值

**操作行间样式**

// 获取div的样式
    $("div").css("width");
    $("div").css("color");
    
    //设置div的样式
    $("div").css("width","30px");
    $("div").css("height","30px");
    $("div").css({ fontSize:"30px",color:"red"});

**特别注意**  
选择器获取的多个元素，获取信息获取的是第一个，比如：$(“div”).css(“width”)，获取的是第一个div的width。

**操作样式类名**

$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
    $("#div1").removeClass("divClass")  //移除id为div1的对象的class名为divClass的样式
    $("#div1").removeClass("divClass divClass2") //移除多个样式
    $("#div1").toggleClass("anotherClass") //重复切换anotherClass样式

--------------------

## jQuery选择器 ##

<!DOCTYPE html>
    <html lang="en">
     <head> 
      <meta charset="UTF-8" /> 
      <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> 
      <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 
      <title></title> 
      <style> div{ width: 100px; height: 100px; background: red; text-align: center; line-height: 100px; font-size: 30px; color: #ffffff; } .section1{ display: none; } .a{ position: relative; } .boss{ width: 100px; height: 100px; margin-top: 20px; } </style> 
     </head> 
      
     <body> 
      <div id="aa" class="section">
       hello 
       <p></p>
      </div> 
      <p></p> 
      <div class="section">
       2
      </div> 
      <div class="section1">
       3
      </div> 
      <div class="section">
       4
      </div> 
      <div class="section" lang="en-us">
       5
      </div> 
      <h1></h1> 
      <p></p> 
      <h2></h2> 
      <ul> 
       <li>A</li> 
       <li>B</li> 
       <li>C</li> 
       <li>D</li> 
       <li>E</li> 
      </ul> 
      <p></p> 
      <table> 
       <tbody>
        <tr>
         <td>Header 1</td>
         <td>Header 2</td>
         <td></td>
        </tr> 
        <tr>
         <td>Value 1</td>
         <td>Value 11</td>
         <td></td>
        </tr> 
        <tr>
         <td>Value 2</td>
         <td>Value 22</td>
         <td></td>
        </tr> 
        <tr>
         <td>Value 3</td>
         <td>Value 33</td>
         <td></td>
        </tr> 
        <tr>
         <td>Value 4</td>
         <td>Value 44</td>
         <td></td>
        </tr> 
       </tbody>
      </table> 
      <div id="aa"> 
       <div class=".box"> 
        <div class="demo"></div> 
       </div> 
      </div> 
      <div class="one">
       hello
      </div> 
      <div class="one"></div> 
      <div></div> 
      <div></div> 
      <div></div> 
      <div></div> 
      <p class="p1"></p> 
      <p class="p2"></p> 
      <ul> 
       <li style="display:none">1</li> 
       <li>2</li> 
       <li>3</li> 
       <li>4</li> 
       <li>5</li> 
       <li>6</li> 
       <li>7</li> 
       <li>8</li> 
       <li>9</li> 
       <li>10</li> 
      </ul> 
      <ul> 
       <li>1</li> 
       <li>2</li> 
       <li>3</li> 
       <li>4</li> 
       <li>5</li> 
       <li>6</li> 
       <li>7</li> 
       <li>8</li> 
       <li>9</li> 
       <li>10</li> 
      </ul> 
      <ul> 
       <li>123123</li> 
      </ul> 
      <h1></h1> 
      <h2></h2> 
      <h3></h3> 
      <input type="text" name="bar" id="" /> 
      <input type="button" name="bar" /> 
      <input type="text" name="var" autofocus="" /> 
      <input type="password" /> 
      <input type="radio" /> 
      <input type="checkbox" /> 
      <input type="submit" /> 
      <input type="image" /> 
      <input type="reset" /> 
      <input type="file" /> 
      <form> 
       <input name="email" disabled="disabled" /> 
       <input name="id" /> 
       <input type="checkbox" name="abc" checked="checked" value="Daily" /> 
      </form> 
      <select> <option value="1">1</option> <option value="2" selected="selected">2</option> <option value="3">3</option> </select> 
      <div> 
       <span>A</span> 
       <span>B</span> 
       <span>C</span> 
      </div> 
      <script src="jquery-1.10.2.js"></script> 
      <script> // document.querySelectorAll(""); console.log($("#aa"));//通过ID获取 console.log($("div"));//通过元素标签名获取 console.log($(".section"));//通过类名获取 console.log($("*"));//获取所有元素 console.log($("#aa,.section,p"));//群组选择器 console.log($("ul li"));//后代选择器 console.log($("ul>li"));//子选择器 console.log($("div+p"));//匹配所有紧接在某元素后的某某元素 console.log($("div~p"));//匹配某元素后所有某某元素 console.log($("li:first"));//获取第一个 console.log($("li:last"));//获取最后一个 console.log($("div:not(#aa)"));//去除某元素 console.log($("tr:even"));//按偶数索引值获取元素 console.log($("tr:odd"));//按奇数索引值获取元素 console.log($("tr:eq(3)"));//获取一个给定索引值的元素 console.log($("tr:gt(2)"));//匹配所有大于给定索引值的元素 console.log($("tr:lt(2)"));//匹配所有小于给定索引值的元素 console.log($("div:lang(en-us)"));//选择指定语言的所有元素。 console.log($(":header"));//匹配如 h1, h2, h3之类的标题元素 console.log($(":root"));//获取根元素 console.log($("div:contains(hello)"));//匹配包含给定文本的元素 console.log($("td:empty"));//匹配所有不包含子元素或者文本的空元素 console.log($("div:has(p)"));//匹配含有选择器所匹配的元素的元素 console.log($("td:parent"));//匹配含有子元素或者文本的元素 console.log($("div:hidden"));//匹配所有不可见元素，或者type为hidden的元素 console.log($("div:visible"));//匹配所有的可见元素 console.log($("div[id]"));//匹配包含给定属性的元素。 console.log($("div[lang='en-us']"));//匹配给定的属性是某个特定值的元素 console.log($("div[lang!='en-us']"));//匹配所有不含有指定的属性，或者属性不等于特定值的元素。 console.log($("ul li:first-child"));//在每个 ul 中查找第一个 li console.log($("li:first-of-type")); console.log($("ul li:last-child"));//在每个 ul 中查找最后一个 li console.log($("ul li:nth-child(2)")); console.log($("ul li:nth-last-child(2)"));//在每个匹配的ul中查找倒数第二个li console.log($("ul li:nth-last-of-type(2)"));//在每个匹配的ul中查找倒数第二个li console.log($("span:nth-of-type(2)"));//查找每个span，这个 span 是 其所有兄弟span元素中的第二个元素 console.log($("ul li:only-child"));//在 ul 中查找是唯一子元素的 li console.log($(":input"));//查找所有的input元素 console.log($(":text"));//查找所有文本框 console.log($(":password"));//查找所有密码框 console.log($(":radio"));//查找所有单选按钮 console.log($(":checkbox"));//匹配所有复选框 console.log($(":submit"));//查找所有提交按钮 console.log($(":image"));//匹配所有图像域 console.log($(":reset"));//查找所有重置按钮 console.log($(":button"));//查找所有按钮 console.log($(":file"));//查找所有文件域 console.log($("input:enabled"));//查找所有可用的input元素 console.log($("input:disabled"));// 查找所有不可用的input元素 console.log($("input:checked"));//查找所有选中的复选框元素 console.log($("select option:selected"));//查找所有选中的选项元素 console.log($( "div" ).find( "." + $.escapeSelector( ".box" ) ));//选择出类中包含.box的div </script>  
        
      <ul> 
       <li>1</li> 
       <li>2</li> 
       <li class="one">3</li> 
       <li>4</li> 
       <li>5</li> 
       <li>6</li> 
       <li class="two">7</li> 
       <li>8</li> 
       <li>9</li> 
       <li class="one">10</li> 
      </ul> 
      <ul> 
       <li>1</li> 
       <li>2</li> 
       <li class="two">3</li> 
       <li>4</li> 
       <li class="one">5</li> 
       <li>6</li> 
       <li>7</li> 
       <li class="one">8</li> 
       <li>9</li> 
       <li>10</li> 
      </ul> 
      <ul> 
       <li>1</li> 
       <li>2</li> 
       <li>3</li> 
       <li>4</li> 
       <li>5</li> 
       <li>6</li> 
       <li class="two">7</li> 
       <li>8</li> 
       <li>9</li> 
       <li>10</li> 
      </ul> 
      <div class="demo active">
       123
      </div> 
      <div class="a box"> 
       <div> 
        <div class="b box"> 
         <div class="item"></div> 
        </div> 
       </div> 
      </div> 
      <p><span>hello</span></p> 
      <script src="jquery-1.10.2.js"></script> 
      <script> let obj=$(".one"); let ele=document.querySelector(".one"); $("ul>li") .css("border","1px solid red") //过滤 筛选出与指定表式匹配的元素集合 .filter(".one") .filter(obj) .filter(ele) .filter(function (index,ele) { if(index%3===0){ return true; } }) .css("background","blue"); // .eq(1);//获取匹配的第二个元素 // .css("background","blue"); console.log($('li').first());//获取匹配的第一个元素 console.log($('li').last());//获取匹配的最后个元素 //let div=document.querySelector(".demo"); //console.log($(".demo").hasClass("active"));//判断demo中是否含有active类名 console.log($(".demo").is(".active"));//根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true //console.log($(".demo").is($("div"))); //console.log($(".demo").is(div)); // console.log($(".demo").is(function (index,ele) { // if(ele.innerHTML==="123"){ // return true; // } // })); // console.log($("ul>li").map(function (index,ele) { // return ele.innerHTML; // }));//将一组元素转换成其他数组 console.log($('ul').has('.one')); console.log($('ul>li').not('.one'));//从ul的li集合中删除与.one的元素 console.log($('ul>li').slice(5,9));//选取一个匹配的子集 console.clear(); console.log($("ul").children(".one"));//查找ul中的.one console.log($(".item").closest(".box"));//查找item的父元素到box console.log($(".box").find(".item"));//搜索box中的item console.log($(".one").next());//每一个元素的下一个同辈元素 $(".one").css("background","red").next().css("background","yellow") $(".one").css("background","red").nextAll("").css("background","yellow")//给one添加css样式 $(".one").css("background","red").nextUntil(".two").css("background","yellow")//给one后面直到two前的元素加上黄色背景色 console.log($(".item").offsetParent());//返回item用于定位的父节点 console.log($(".one").parent());//查找one的父元素 console.log($(".one").parents());//所有前辈元素的集合 console.log($(".one").parentsUntil("body"));//找到body就停止 console.log($(".one").siblings());//找到one的所有同辈元素 console.log($(".one").add(".two"));//对两个选择器选择的结果进行合并的操作 console.log($(".one").next().addBack());// console.log($(".one").contents());//查找匹配元素内部所有的子节点（包括文本节点） console.log($("p").find("span").end());//回到最近的一个"破坏性"操作之前,选取所有的p元素，查找并选取span子元素，然后再回过来选取p元素 console.log($("ul>li").eq(2).css("background","red").end().eq(5).css("background","red")); </script>  
        
      <div class="boss">
        div 
      </div> 
      <div class="boss">
        div 
      </div> 
      <div class="boss">
        div 
      </div> 
      <script> //innerHTML=======>html() //console.log($(".demo").html()); //$(".demo").html("111") $(".boss").html(function (index,oldVal) { return oldVal+(index+1); }); //style getComputedStyle=======>css() console.log($(".boss").css("width"));//获取的是第一个的属性 $(".boss").css("background","red"); $(".boss").css("width",300); $(".boss").css("width",function (index,oldVal) { return (index+1)*100; }); $(".boss").css({ color:"#fff", fontSize:"16px", textAlign:"center", lineHeight:"100px" }); //classList className ========>addClass() removeClass() toggleClass() $(".boss").addClass(function (index,oldVal) { // console.log(oldVal) return "test"+(index+1); }); $(".boss").removeClass(function (index,oldVal) { // console.log(oldVal) return "test"+(index+1); }) </script>  
     </body>
    </html>