当前位置:首页 > Web开发 > 正文

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

2024-03-31 Web开发

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

var jquery = document.createElement(script); jquery.src = "";//若调试页面是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,测试选择元素

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/40351.html