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

浏览器console中加入jquery,测试选择元素的更多相关文章

  1. 浏览器console中加入jquery方便调试

    var jquery = document.createElement('script'); jquery.src = "http://apps.bdimg.com/libs/jquery/ ...

  2. 在chrome console中添加jQuery

    由于现有seajs等封装,jQuery等已不在全局暴露,即使网站中已使用jQuery,在console也使用不了. 在chrome中可以用以下代码加入jQuery: fetch('http://cod ...

  3. jquery判断选择元素是否存在

    有时候我们需要对jquery选择器选中的元素进行判断是否存在,如果存在才进行某些操作,不存在就不进行,那么如何判断元素是否存在,代码如下: //判断是否存在特定ID值的元素 ){ alert(&quo ...

  4. jQuery基本选择 元素

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  5. JQuery 实践---创建元素包装集

    1. 利用选择器,选择将被JQuery包装的元素 标识和选择DOM元素.JQuery采用我们已经知道的CSS语法并且扩展了一些.为了利用JQuery来选择元素,请把选择器包装在$()中. 基本CSS选 ...

  6. JQuery基础教程:选择元素(中)

    自定义选择符 JQuery在各种CSS选择符的基础上还添加了独有的完全不同的自定义选择符,注意,只要可能,jQuery就会使用浏览器原生的DOM选择符引擎去查找元素.但在使用自定义选择符的时候,就无法 ...

  7. chrome 浏览器 console 加入 jquery 测试调试 一介布衣

    chrome 浏览器 console 加入 jquery 测试调试 一介布衣   var jquery = document.createElement('script'); jquery.src = ...

  8. JQuery中选择元素的方法:

    document.getElementById('div1');document.getElementsByTagName('div');getByClass(document,'box'); $(' ...

  9. 抛弃jQuery:DOM API之选择元素

    原文链接:http://blog.garstasio.com/you-dont-need-jquery/selectors/ 我的Blog:http://cabbit.me/you-dont-need ...

随机推荐

  1. AtCoder Grand Contest 040 A - ><

    传送门 对于某个位置,只要知道这个位置往左最多的连续 $\text{<}$ 的数量 $x$ 和往右最多的连续 $\text{>}$ 的数量 $y$ 那么这个位置最小可能的数即为 $max( ...

  2. MySQL 触发器的使用

    MySQL 基础篇 三范式 MySQL 军规 MySQL 配置 MySQL 用户管理和权限设置 MySQL 常用函数介绍 MySQL 字段类型介绍 MySQL 多列排序 MySQL 行转列 列转行 M ...

  3. angular 源码 <一> rotuerLinkActive

    这几篇,查看angular 源码. rotuerLinkActive 是路由的样式设置. 它的值是 css 的一个类.或者几个类. 主要代码如下 @Input() set routerLinkActi ...

  4. C++标准库里自带的数值类型和字符串互相转换函数

    需要包含头文件 #include <string> 数值类型转成string类型: string to_string(int val); string to_string(unsigned ...

  5. wamp新建虚拟目录无法运行的解决方法

    操作步骤: 打开 D:\wamp\bin\apache\apache2.4.9\conf\httpd.conf  文件,大概在第242行 把 <Directory /> AllowOver ...

  6. 用jq动态给导航菜单添加active

    点击后页面跳转到了新的链接,找到所有的li下的a标签,对其链接地址进行判断,如果和当前浏览器的地址一致,就认为是当前应该激活的菜单,添加active类,否则就取消. <ul class=&quo ...

  7. spring-security原理学习

    spring security使用分类: 如何使用spring security,相信百度过的都知道,总共有四种用法,从简到深为:1.不用数据库,全部数据写在配置文件,这个也是官方文档里面的demo: ...

  8. Python使用selenium模拟点击(一)

    本文适合有点Python基础阅读,(没基础的话,相对的比较蒙蔽,争取能让小白能一步一步跟上来) 2019-03-05 14:53:05 前几天由于需要到一个网站进行签到~~听说Python能够模拟请求 ...

  9. RHEL7启动到命令模式

    打开/etc/inittab 文件会看到以下信息 从中知道想要启动后就进入完整的多用户文本模式(命令行模式) 以root权限执行: ln -sf /lib/systemd/system/multi-u ...

  10. webstorm 2018.2.5最新激活方式

    亲测时间    2019年6月27日  08:45:52 下载破解文件: https://pan.baidu.com/s/1CMh5AYgewZflMVWL9BO-hA 打开webstorm / bi ...