浏览器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 ...
随机推荐
- PAT(B) 1014 福尔摩斯的约会(Java)
题目链接:1014 福尔摩斯的约会 注意 三个字眼:"第1对","第2对","第1对",因此如果你用了循环,别忘了break,因为后面也可能 ...
- pandas数据结构之基础运算笔记
import pandas as pd import numpy as np s = pd.Series([1,3,5,6,8],index=list('acefh')) s.index # 读取行索 ...
- flask返回自定义的Response
from json import dumps from flask import Response from flask_api import status from protocol.errors_ ...
- oracle 数据库 主键索引重建
oracle 数据库 主键索引重建 alter table table_name drop primary key; alter table table_name add constraint pk_ ...
- Redis过期命令
Redis键的过期时长的设定 ·命令名称:EXPIRE ·语法:EXPIRE key seconds ·功能:为给定key设置生存时间,当key过期时(生存时间为0),它会被自动删除 ·返回值:设置成 ...
- C#记录日志到本地文件工具类
using System; using System.Diagnostics; using System.IO; using System.Threading; using System.Web; n ...
- 整理一下rmq
rmq(int i,int j,int a)表示查询a数组i到j区间的内容中的最大/最小值核心部分为二分区间以及st预处理算法 先说st预处理算法吧 int dp[i][j];//表示以i开始 长度为 ...
- 轻松搭建CAS 5.x系列文章
轻松搭建CAS 5.x系列(1)-使用cas overlay搭建SSO SERVER服务端 轻松搭建CAS 5.x系列(2)-搭建HTTPS的SSO SERVER端 轻松搭建CAS 5.x系列(3)- ...
- Visual Studio 2017修改编码UTF-8
转载自:https://blog.csdn.net/qq_36848370/article/details/82597157 VS 2017隐藏了高级保存功能,导致没办法直接去设置代码编码 UTF-8 ...
- html标签从.net framework转移到.net standard(.net core 2.2)时遇到的坑及填坑
在原来的.net framework mvc中html的标签可以使用下面的方法 <select class="form-control" id="categoryi ...