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

一、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

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