一、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. PAT(B) 1014 福尔摩斯的约会(Java)

    题目链接:1014 福尔摩斯的约会 注意 三个字眼:"第1对","第2对","第1对",因此如果你用了循环,别忘了break,因为后面也可能 ...

  2. pandas数据结构之基础运算笔记

    import pandas as pd import numpy as np s = pd.Series([1,3,5,6,8],index=list('acefh')) s.index # 读取行索 ...

  3. flask返回自定义的Response

    from json import dumps from flask import Response from flask_api import status from protocol.errors_ ...

  4. oracle 数据库 主键索引重建

    oracle 数据库 主键索引重建 alter table table_name drop primary key; alter table table_name add constraint pk_ ...

  5. Redis过期命令

    Redis键的过期时长的设定 ·命令名称:EXPIRE ·语法:EXPIRE key seconds ·功能:为给定key设置生存时间,当key过期时(生存时间为0),它会被自动删除 ·返回值:设置成 ...

  6. C#记录日志到本地文件工具类

    using System; using System.Diagnostics; using System.IO; using System.Threading; using System.Web; n ...

  7. 整理一下rmq

    rmq(int i,int j,int a)表示查询a数组i到j区间的内容中的最大/最小值核心部分为二分区间以及st预处理算法 先说st预处理算法吧 int dp[i][j];//表示以i开始 长度为 ...

  8. 轻松搭建CAS 5.x系列文章

    轻松搭建CAS 5.x系列(1)-使用cas overlay搭建SSO SERVER服务端 轻松搭建CAS 5.x系列(2)-搭建HTTPS的SSO SERVER端 轻松搭建CAS 5.x系列(3)- ...

  9. Visual Studio 2017修改编码UTF-8

    转载自:https://blog.csdn.net/qq_36848370/article/details/82597157 VS 2017隐藏了高级保存功能,导致没办法直接去设置代码编码 UTF-8 ...

  10. html标签从.net framework转移到.net standard(.net core 2.2)时遇到的坑及填坑

    在原来的.net framework mvc中html的标签可以使用下面的方法 <select class="form-control" id="categoryi ...