浏览器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')[].appendChild(jquery);

jQuery.noConflict();

现在试试 $("a"),已经是jQuery了(原来chrome内置的$被覆盖掉了。而且不像有些文章说的，原来的chrome内置的$并没有变成_$)

二、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节点。

二、jQuery操作（改变）元素

4，操作HTML内容

操作页面元素内容是最能体现jQuery高效工作的方面之一。html()和text()方法能够获取和设置使用前面的语句所选中的元素内容，而attr()可以获取和设置单个元素的属性。下面来看一些范例

html()

这个方法能够获取元素或一组元素的HTML内容，它类似于javascript的innerHTML:

var htmlContent = $("#elem").html();

//变量htmlContent就会包含id为elem的页面元素的全部HTML(包括文本)

使用类似的语法，就可以设置元素或一组元素的HTML内容：

$("elem").html("<p>helloworld</p>");

//这样就会修改id为"elem"的页面元素的HTML内容

text()

var htmlContent = $("#elem").text();

//变量 htmlContent就会包含id为elem的页面元素内部的全部文本(不包括html)

$("elem").text("helloworld");

//这样就会修改id为elem的页面元素的文本内容

append（）

$("elem").append("<p>新的helloworld</p>");

//这样会保存在原有内容的基础上，添加新的内容

$("div").append("<p>111</p>")  会给页面上全部div元素添加一些内容

attr()

当应用于一个元素时，这个方法返回特定属性的值。如果应用于一组元素，它只返回第一个元素的值。

var title = $("#elem").attr("title");

利用这个方法还可以设置属性的值:

$("elem").attr("title","helloworld")

5，显示和隐藏元素

show()

$("div").show(); //显示全部div元素类似于 document.getElementById("elem").style.visibility = 'visible';

另外，还可以添加一些参数来调整显示的过程。

在下面的范例里，第一个参数"fast"决定了显示元素的速度。这个参数除了可以设置为fast和slow之外，还可以设置为具体的数字（单位毫秒）。如果不设置这个参数，元素就会立即显示，没有任何动画。一般来说，"slow"对应的时间是600ms，"fast"对应的时间是200ms。

第三个参数类似于回调函数，能够在显示完成时执行一次操作。

$("elem").show(600,function(){ ..function过程 });

hide()

这个方法的用途显然与show()是相反的，用于隐藏页面元素，它也有一些和show()一样的可选参数:

$("#elem").hide("slow",function(){ ..function过程 })；

toggle()

toggle()方法会改变一个元素或一组元素的当前显示状态，也就是说把显示的元素隐藏起来，把隐藏的元素显示出来。它也具有关于变化速度和回调函数的参数。

$("elem").toggle(1000,function(){ ..function过程});

6，元素动画

$("#elem").fadeOut("slow",function(){

	//在淡出之后进行一些操作

	})；

$("#elem").fadeIn("slow",function(){

	//在淡入之后进行一些操作

	})；

$("#elem").fadeTo(3000,0.5,function(){

	//在淡入或淡出之后进行一些操作

	})；

$("#elem").slideDown(150,function(){

	//向下滑动之后进行一些操作

	})；

$("#elem").slideToggle(1000,function(){

	//向上或向下滑动之后进行一些操作

	})；

$("elem").animate(

	{

		width:"400px",

		height:"500px",

		},1500,function(){

			$(this).fadeOut("slow");

		}

	);

7，命令链

jQuery的大多数方法都返回一个jQuery对象，它可以用于再调用其他方法，这是jQuery的另一个方便之处。比如可以像这样组合前面的范例:

$("#elem").fadeOut().fadeIn();

上面这行代码会先淡出指定的元素，然后淡入显示他们。命令链的长度没有上面限制，从而可以对同一组元素连续进行很多操作:

$("elem").text("Hello from jQuery").fadeOut().fadeIn();

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

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

https://www.csdn.net/gather_23/OtTaIg0sNDkyLWJsb2cO0O0O.html