浏览器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
浏览器console中加入jquery,测试选择元素的更多相关文章
- 浏览器console中加入jquery方便调试
var jquery = document.createElement('script'); jquery.src = "http://apps.bdimg.com/libs/jquery/ ...
- 在chrome console中添加jQuery
由于现有seajs等封装,jQuery等已不在全局暴露,即使网站中已使用jQuery,在console也使用不了. 在chrome中可以用以下代码加入jQuery: fetch('http://cod ...
- jquery判断选择元素是否存在
有时候我们需要对jquery选择器选中的元素进行判断是否存在,如果存在才进行某些操作,不存在就不进行,那么如何判断元素是否存在,代码如下: //判断是否存在特定ID值的元素 ){ alert(&quo ...
- jQuery基本选择 元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- JQuery 实践---创建元素包装集
1. 利用选择器,选择将被JQuery包装的元素 标识和选择DOM元素.JQuery采用我们已经知道的CSS语法并且扩展了一些.为了利用JQuery来选择元素,请把选择器包装在$()中. 基本CSS选 ...
- JQuery基础教程:选择元素(中)
自定义选择符 JQuery在各种CSS选择符的基础上还添加了独有的完全不同的自定义选择符,注意,只要可能,jQuery就会使用浏览器原生的DOM选择符引擎去查找元素.但在使用自定义选择符的时候,就无法 ...
- chrome 浏览器 console 加入 jquery 测试调试 一介布衣
chrome 浏览器 console 加入 jquery 测试调试 一介布衣 var jquery = document.createElement('script'); jquery.src = ...
- JQuery中选择元素的方法:
document.getElementById('div1');document.getElementsByTagName('div');getByClass(document,'box'); $(' ...
- 抛弃jQuery:DOM API之选择元素
原文链接:http://blog.garstasio.com/you-dont-need-jquery/selectors/ 我的Blog:http://cabbit.me/you-dont-need ...
随机推荐
- AtCoder Grand Contest 040 A - ><
传送门 对于某个位置,只要知道这个位置往左最多的连续 $\text{<}$ 的数量 $x$ 和往右最多的连续 $\text{>}$ 的数量 $y$ 那么这个位置最小可能的数即为 $max( ...
- MySQL 触发器的使用
MySQL 基础篇 三范式 MySQL 军规 MySQL 配置 MySQL 用户管理和权限设置 MySQL 常用函数介绍 MySQL 字段类型介绍 MySQL 多列排序 MySQL 行转列 列转行 M ...
- angular 源码 <一> rotuerLinkActive
这几篇,查看angular 源码. rotuerLinkActive 是路由的样式设置. 它的值是 css 的一个类.或者几个类. 主要代码如下 @Input() set routerLinkActi ...
- C++标准库里自带的数值类型和字符串互相转换函数
需要包含头文件 #include <string> 数值类型转成string类型: string to_string(int val); string to_string(unsigned ...
- wamp新建虚拟目录无法运行的解决方法
操作步骤: 打开 D:\wamp\bin\apache\apache2.4.9\conf\httpd.conf 文件,大概在第242行 把 <Directory /> AllowOver ...
- 用jq动态给导航菜单添加active
点击后页面跳转到了新的链接,找到所有的li下的a标签,对其链接地址进行判断,如果和当前浏览器的地址一致,就认为是当前应该激活的菜单,添加active类,否则就取消. <ul class=&quo ...
- spring-security原理学习
spring security使用分类: 如何使用spring security,相信百度过的都知道,总共有四种用法,从简到深为:1.不用数据库,全部数据写在配置文件,这个也是官方文档里面的demo: ...
- Python使用selenium模拟点击(一)
本文适合有点Python基础阅读,(没基础的话,相对的比较蒙蔽,争取能让小白能一步一步跟上来) 2019-03-05 14:53:05 前几天由于需要到一个网站进行签到~~听说Python能够模拟请求 ...
- RHEL7启动到命令模式
打开/etc/inittab 文件会看到以下信息 从中知道想要启动后就进入完整的多用户文本模式(命令行模式) 以root权限执行: ln -sf /lib/systemd/system/multi-u ...
- webstorm 2018.2.5最新激活方式
亲测时间 2019年6月27日 08:45:52 下载破解文件: https://pan.baidu.com/s/1CMh5AYgewZflMVWL9BO-hA 打开webstorm / bi ...