码迷,mamicode.com
首页 > Web开发 > 详细

浏览器console中加入jquery,测试选择元素

时间:2019-12-15 12:35:12      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:ref   isa   过滤   button   表示   www   tab   find   tail   

一、chrome浏览器F12打开调试界面,在console中输入(firefox同样可以):

var jquery = document.createElement(script);  
jquery.src = "http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js";//若调试页面是https的这里也修改为https.
document.getElementsByTagName(head)[0].appendChild(jquery);  
jQuery.noConflict(); 

现在试试 $("a"),已经是jQuery了

二、jQuery定位元素小总

0 获取iframe(id或name为mainFrame)中的元素

 $(window.frames["mainFrame"].document).find("#more_655").children(":first").click();

1  元素选择器

      获取所有元素: $("*")

      类似的,找id:    $("#XX") ; 找class:   $(".XX") ;找有两个class属性的元素: $(".XX.YY") ; 找元素:   $("p")   

 2  元素属性选择器

    找有href属性的: $("[href]") ; 

    找href属性是#的: $("[href=‘#‘]") ;  找href属性不是#的: $("[href!=‘#‘]") ;

    找href属性以java开头的: $("[href^=‘java‘]") ;  找href属性以.jpg结尾的: $("[href$=‘.jpg‘]") ;  

     找href属性包含www的: $("[href*=‘www‘]") ; 

 3  元素定位(基本过滤器)选择器

     第一个a元素:$("a:first")[0].href   ;  最后一个p元素:$("p:last")  ;  

     类似的,   :even选择偶数   :odd选择奇数    :eq(3)选择第3个(从0开始)    :gt(3)选择index大于3的     :lt(3)选择index小于3的    

     $("input:not(:empty)") 选择不为空的input    

    子元素过滤器选择器

        $("ul li:nth-child(2)") 每个ul的第2个li(从1开始),类似的,:first-child   :last-child

        $("ul li:only-child") 若ul包含多个li,则不匹配。            

4 内容过滤器选择器

     $(":contains(‘XXX‘)") 包括XXX   ;    $(":empty") 选择空元素 ;   

5 可见性过滤器选择器

   $("p:hidden")选择隐藏的p元素 ;类似的$("table:visible")

6  表单选择器

   $(":input")选择input元素;  

    $(":text")选择type=text的input元素;  $(":file")选择type=file的input元素;$(":image")选择type=image的input元素;

   类似的有,  :password   :radio  :checkbox :submit :reset  :button  

   $(":enabled")选择激活的input元素;

   类似的有,:disabled禁用的,:selected选取的   :checked选中的input元素;

  7  层级选择器

    (直接子)子选择器:   >(大于号)紧跟父子关系 如$("div > p")表示选择div下的直接层是p的节点。 

  (所有子)后代选择器:  (空格) 包括子元素 、孙元素等

  (相邻兄弟)相邻兄弟选择器 :+(加号) 紧跟兄弟关系 如$("div + p")表示选择div同层的左右相邻的p节点。 

  (所有兄弟)一般兄弟选择器:~ (波浪线)任意距离兄弟关系 如$("div~p")表示选择div同层的p节点。

 

参考:https://blog.csdn.net/sinat_18831033/article/details/52059899

https://www.cnblogs.com/zjfjava/p/9155153.html

浏览器console中加入jquery,测试选择元素

标签:ref   isa   过滤   button   表示   www   tab   find   tail   

原文地址:https://www.cnblogs.com/pu369/p/12043513.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!