一、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. python中列表之间求差集、交集、并集

    求两个列表的交集.并集.差集 def diff(listA, listB): # 求交集的两种方式 retA = [i for i in listA if i in listB] retB = lis ...

  2. harbor关联k8s

    第一步 在harbor上创建用户,项目,将用户添加到对应项目中,并赋予用户项目管理者或者开发人员权限,使其对镜像仓库有读写权限. 本次部署创建用户liusw,密码Lsw123456,邮箱8730017 ...

  3. react-router 5.0 的鉴权

    react-router 5.0 的鉴权 当我们使用react-router 控制页面的路由时候,有些页面,是需要登录才能访问,有些不需要登录就可以访问,还有些页面,是根据用户的权限来限制访问的. 如 ...

  4. redis哈希表数据类型键的设置

    命令名称:hset 语法:hset key field value 功能: 1)将哈希表key中的域field的值设为value. 2)如果key不存在,一个新的哈希表被创建并进行hset操作. 3) ...

  5. 怎样绑定this

    有三种方法: 1. Function.prototype.call();  2. Function.prototype.apply();  3. Function.prototype.bind(); ...

  6. Java Web 深入分析(2) DNS

    DNS :Domain Name System,域名系统 ,通俗的来说需要把我们日常见到的URL 网址信息解析成IP地址,例如 DNS域名解析过程 用户浏览器:用户在浏览器地址栏输入域名进行访问,浏览 ...

  7. gentoo use-flag 全局标识 大全 (官方搬运) 英文 适用funtoo

    连接 https://www.gentoo.org/support/use-flags/ 提示 ctrl+F 可在页面查找 搬运 Global USE flags FlagDescription 3d ...

  8. Array + two points leetcode.16 - 3Sum Closest

    题面 Given an array nums of n integers and an integer target, find three integers in nums such that th ...

  9. mysql打印用户权限的小技巧

    mysql5.5 5.6 SHOW GRANTS FOR mysql> SELECT DISTINCT CONCAT('SHOW GRANTS FOR ''',user,'''@''',host ...

  10. 十年阿里顶级架构师教你怎么使用Java来搭建微服务

    微服务背后的大理念是将大型.复杂且历时长久的应用在架构上设计为内聚的服务,这些服务能够随着时间的流逝而演化.本文主要介绍了利用 Java 生态系统构建微服务的多种方法,并分析了每种方法的利弊. 快速预 ...