jq

最新推荐文章于 2024-11-10 22:45:39 发布

打破砂锅问到底9565

最新推荐文章于 2024-11-10 22:45:39 发布

阅读量141

点赞数

文章标签：前端

$(”p”).css(”attname”,”value”);//设置……单个属性值（例：”color”,”#FF0000″）
$(“p”).css({ “margin-left”: “10px”, “background-color”: “blue” })//设置……多个属性值
$("p”).addClass(css中定义的样式类型); 给某个元素添加样式
$(”img”).attr({src:”test.jpg”,alt:”test Image”}); 给某个元素添加属性/值，参数是map
$(”img”).attr(”src”,”test.jpg”); 给某个元素添加属性/值
$(”img”).attr(”title”, function() { return this.src }); 给某个元素添加属性/值
$(”元素名称”).html(); 获得该元素内的内容（元素，文本等）
$(”元素名称”).html(”newstuff”); 给某元素设置内容
$(”元素名称”).removeAttr(”属性名称”) 给某元素删除指定的属性以及该属性的值
$(”元素名称”).removeClass(”class”)给某元素删除指定的样式
$(”元素名称”).text(); 获得该元素的文本
$(” 元素名称”).text(value); 设置该元素的文本值为value
$(”元素名称”).toggleClass(class)当元素存在参数中的样式的时候取消,如果不存在就设置此样式
$(”input元素名称”).val(); 获取input元素的值
$(”input 元素名称”).val(value); 设置input元素的值为value

Manipulation：
$(” 元素名称”).after(content);在匹配元素后面添加内容
$(”元素名称”).append(content);将content作为元素的内容插入到该元素的后面
$(”元素名称”).appendTo(content);在content后接元素
$(” 元素名称”).before(content);与after方法相反
$(”元素名称”).clone(布尔表达式) 当布尔表达式为真时，克隆元素（无参时，当作true处理）
$(” 元素名称”).empty() 将该元素的内容设置为空
$(”元素名称”).insertAfter(content); 将该元素插入到content之后
$(”元素名称”).insertBefore(content); 将该元素插入到content之前
$(” 元素”).prepend(content); 将content作为该元素的一部分，放到该元素的最前面
$(”元素”).prependTo(content);将该元素作为content的一部分，放content的最前面
$(”元素”).remove(); 删除所有的指定元素
$(”元素”).remove(”exp”); 删除所有含有exp的元素
$(”元素”).wrap(”html”); 用html来包围该元素
$(”元素”).wrap(element); 用element来包围该元素
Traversing：
add(expr)
add(html)
add(elements)
children(expr)
contains(str)
end()
filter(expression)
filter(filter)
find(expr)
is(expr)
next(expr)
not(el)
not(expr)
not(elems)
parent(expr)
parents(expr)
prev(expr)
siblings(expr)

Core：
$(html).appendTo(”body”) 相当于在body中写了一段html代码
$(elems) 获得DOM上的某个元素
$(function(){………}); 执行一个函数
$(”div > p”).css(”border”, “1px solid gray”); 查找所有div的子节点p，添加样式
$(”input:radio”, document.forms[0]) 在当前页面的第一个表单中查找所有的单选按钮
$extend(prop) prop是一个jquery对象，举例： jQuery.extend({ min: function(a, b) { return a < b ? a : b; }, max: function(a, b) { return a > b ? a : b; } }); jQuery( expression, [context] ) —$ ( expression, [context]); 在默认情况下，$()查询的是当前HTML文档中的DOM元素。
each( callback ) 以每一个匹配的元素作为上下文来执行一个函数
举例：1
$(”span”).click(function){
$(”li”).each(function(){
$(this).toggleClass(”example”);
});
});
举例：2
$(”button”).click(function () {
$(”div”).each(function (index, domEle) {
// domEle == this
$(d o m E l e) . c s s (” b a c k g r o u n d C o l o r ”, “ y e l l o w ”); i f ($ (this).is(”#stop”)) {
$(”span”).text(”Stopped at div index #” + index);
return false;
}
});
});
jQuery Event:
ready(fn); $(document).ready()注意在body中没有onload事件，否则该函数不能执行。在每个页面中可以有很多个函数被加载执行，按照fn 的顺序来执行。
bind( type, [data], fn ) 为每一个匹配元素的特定事件（像click）绑定一个或多个事件处理器函数。可能的事件属性有：blur, focus, load, resize,scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover,mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress,keyup, error
one( type, [data], fn ) 为每一个匹配元素的特定事件（像click）绑定一个或多个事件处理器函数。在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同。
trigger( type, [data] ) 在每一个匹配的元素上触发某类事件。
triggerHandler( type, [data] ) 这一特定方法会触发一个元素上特定的事件(指定一个事件类型)，同时取消浏览器对此事件的默认行动
unbind( [type], [data] ) 反绑定，从每一个匹配的元素中删除绑定的事件。
$(”p”).unbind() 移除所有段落上的所有绑定的事件
$(”p”).unbind( “click” ) 移除所有段落上的click事件
hover( over, out ) over,out都是方法, 当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。
$(”p”).hover(function(){
$(this).addClass(”over”);
},
function(){
$(this).addClass(”out”);
}
);
toggle( fn, fn ) 如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。
$(”p”).toggle(function(){
$(this).addClass(”selected”);
},
function(){
$(this).removeClass(”selected”);
}
);
元素事件列表说明
注：不带参数的函数，其参数为可选的 fn。jQuery不支持form元素的reset事件。
事件描述支持元素或对象
blur( ) 元素失去焦点 a, input,textarea, button, select, label, map, area
change( ) 用户改变域的内容 input, textarea,select
click( ) 鼠标点击某个对象几乎所有元素
dblclick( ) 鼠标双击某个对象几乎所有元素
error( ) 当加载文档或图像时发生某个错误 window, img
focus( ) 元素获得焦点 a, input,textarea, button, select, label, map, area
keydown( ) 某个键盘的键被按下几乎所有元素
keypress( ) 某个键盘的键被按下或按住几乎所有元素
keyup( ) 某个键盘的键被松开几乎所有元素
load( fn ) 某个页面或图像被完成加载 window, img
mousedown( fn ) 某个鼠标按键被按下几乎所有元素
mousemove( fn ) 鼠标被移动几乎所有元素
mouseout( fn ) 鼠标从某元素移开几乎所有元素
mouseover( fn ) 鼠标被移到某元素之上几乎所有元素
mouseup( fn ) 某个鼠标按键被松开几乎所有元素
resize( fn ) 窗口或框架被调整尺寸 window, iframe,frame
scroll( fn ) 滚动文档的可视部分时 window
select( ) 文本被选定 document, input,textarea
submit( ) 提交按钮被点击 form
unload( fn ) 用户退出页面 window

JQuery Ajax 方法说明:
load( url, [data], [callback] ) 装入一个远程HTML内容到一个DOM结点。
$(”#feeds”).load(”feeds.html”); 将feeds.html文件载入到id为feeds的div中
$(”#feeds”).load(”feeds.php”, {limit: 25}, function(){
alert(”The last 25 entries in the feed have been loaded”);
});
jQuery.get( url, [data], [callback] ) 使用GET请求一个页面。
$.get(”test.cgi”, { name: “John”, time: “2pm” }, function(data){
alert(”Data Loaded: ” + data);
});
jQuery.getJSON( url, [data], [callback] ) 使用GET请求JSON数据。
$.getJSON(”test.js”, { name: “John”, time: “2pm” }, function(json){
alert(”JSON Data: ” + json.users[3].name);
});
jQuery.getScript( url, [callback] ) 使用GET请求javascript文件并执行。
$.getScript(”test.js”, function(){
alert(”Script loaded and executed.”);
});
jQuery.post( url, [data], [callback], [type] ) 使用POST请求一个页面。
ajaxComplete( callback ) 当一个AJAX请求结束后，执行一个函数。这是一个Ajax事件
$(”#msg”).ajaxComplete(function(request, settings){
$(this).append(”

Request Complete.
”);
});
ajaxError( callback ) 当一个AJAX请求失败后，执行一个函数。这是一个Ajax事件
$(”#msg”).ajaxError(function(request, settings){
$(this).append(”
Error requesting page ” + settings.url +“
”);
});
ajaxSend( callback ) 在一个AJAX请求发送时，执行一个函数。这是一个Ajax事件
$(”#msg”).ajaxSend(function(evt, request, settings){
$(this).append(”<li<Starting request at ” + settings.url
- “</li<”);
  });
  ajaxStart( callback ) 在一个AJAX请求开始但还没有激活时，执行一个函数。这是一个Ajax事件
  当AJAX请求开始(并还没有激活时)显示loading信息
  $(”#loading”).ajaxStart(function(){
  $(this).show();
  });
  ajaxStop( callback ) 当所有的AJAX都停止时，执行一个函数。这是一个Ajax事件
  当所有AJAX请求都停止时，隐藏loading信息。
  $(”#loading”).ajaxStop(function(){
  $(this).hide();
  });
  ajaxSuccess( callback ) 当一个AJAX请求成功完成后，执行一个函数。这是一个Ajax事件
  当AJAX请求成功完成时，显示信息。
  $(”#msg”).ajaxSuccess(function(evt, request, settings){
  $KaTeX parse error: Expected 'EOF', got '}' at position 49: \dotsuest!</li>”); }̲); jQuery.ajax\dots$ .ajax函数取得所有选项信息。
  设置默认的全局AJAX请求选项。
  $.ajaxSetup({
  url: “/xmlhttp/”,
  global: false,
  type: “POST”
  });
  $.ajax({ data: myData });
  serialize( ) 以名称和值的方式连接一组input元素。实现了正确表单元素序列
  function showValues() {
  var str = $(”form”).serialize();
  $(”#results”).text(str);
  }
  $(”:checkbox, :radio”).click(showValues);
  $(”select”).change(showValues);
  showValues();
  serializeArray( ) 连接所有的表单和表单元素(类似于.serialize()方法)，但是返回一个JSON数据格式。
  从form中取得一组值，显示出来
  function showValues() {
  var fields = $(”:input”).serializeArray();
  alert(fields);
  $(”#results”).empty();
  jQuery.each(fields, function(i, field){
  $(”#results”).append(field.value + ” “);
  });
  }
  $(”:checkbox, :radio”).click(showValues);
  $(”select”).change(showValues);
  showValues();
JQuery Effects 方法说明
show( ) 显示隐藏的匹配元素。
show( speed, [callback] ) 以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。
hide( ) 隐藏所有的匹配元素。
hide( speed, [callback] ) 以优雅的动画隐藏所有匹配的元素，并在显示完成后可选地触发一个回调函数
toggle( ) 切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
slideDown( speed, [callback] ) 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以
“滑动”的方式显示出来。
slideUp( speed, [callback] ) 通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以”滑动” 的方式隐藏起来。
slideToggle( speed, [callback] ) 通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以”滑动”的方式隐藏或显示。
fadeIn( speed, [callback] ) 通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的
高度和宽度不会发生变化。
fadeOut( speed, [callback] ) 通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
fadeTo( speed, opacity, [callback] ) 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
stop( ) 停止所有匹配元素当前正在运行的动画。如果有动画处于队列当中，他们就会立即开始。
queue( ) 取得第一个匹配元素的动画序列的引用(返回一个内容为函数的数组)
queue( callback ) 在每一个匹配元素的事件序列的末尾添加一个可执行函数，作为此元素的事件函数
queue( queue ) 以一个新的动画序列代替所有匹配元素的原动画序列
dequeue( ) 执行并移除动画序列前端的动画
animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数。
animate( params, options ) 创建自定义动画的另一个方法。作用同上。
JQuery Traversing 方法说明
eq( index ) 从匹配的元素集合中取得一个指定位置的元素，index从0开始
filter( expr ) 返回与指定表达式匹配的元素集合，可以使用”,”号分割多个expr，用于实现多个条件筛选
filter( fn ) 利用一个特殊的函数来作为筛选条件移除集合中不匹配的元素。
is( expr ) 用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的
表达式就返回true。
map( callback ) 将jQuery对象中的一组元素利用callback方法转换其值，然后添加到一个jQuery数组中。
not( expr ) 从匹配的元素集合中删除与指定的表达式匹配的元素。
slice( start, [end] ) 从匹配元素集合中取得一个子集，和内建的数组的slice方法相同。
add( expr ) 把与表达式匹配的元素添加到jQuery对象中。
children( [expr] ) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。可选的过滤器
将使这个方法只匹配符合的元素(只包括元素节点，不包括文本节点)。
contents( ) 取得一个包含匹配的元素集合中每一个元素的所有子孙节点的集合(只包括元素节点，不
包括文本节点)，如果元素为iframe，则取得其中的文档元素
find( expr ) 搜索所有与指定表达式匹配的元素。
next( [expr] ) 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
nextAll( [expr] ) 取得一个包含匹配的元素集合中每一个元素所有的后面同辈元素的元素集合
parent( [expr] ) 取得一个包含着所有匹配元素的唯一父元素的元素集合。
parents( [expr] ) 取得一个包含着所有匹配元素的唯一祖先元素的元素集合（不包含根元素）。
prev( [expr] ) 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
prevAll( [expr] ) 取得一个包含匹配的元素集合中每一个元素的之前所有同辈元素的元素集合。
siblings( [expr] ) 取得一个包含匹配的元素集合中每一个元素的所有同辈元素的元素集合。
andSelf( ) 将前一个匹配的元素集合添加到当前的集合中
取得所有div元素和其中的p元素，添加border类属性。取得所有div元素中的p元素，
添加background类属性
$(”div”).find(”p”).andSelf().addClass(”border”);
$(”div”).find(”p”).addClass(”background”);
end( ) 结束当前的操作，回到当前操作的前一个操作
找到所有p元素其中的span元素集合，然后返回p元素集合，添加css属性
$(”p”).find(”span”).end().css(”border”, “2px red solid”);

JQuery Selectors 方法说明
基本选择器
$(”#myDiv”) 匹配唯一的具有此id值的元素
$(”div”) 匹配指定名称的所有元素
$(”.myClass”) 匹配具有此class样式值的所有元素
$(”*”) 匹配所有元素
$(”div,span,p.myClass”) 联合所有匹配的选择器
层叠选择器
$(”form input”) 后代选择器，选择ancestor的所有子孙节点
$(”#main > ”) 子选择器，选择parent的所有子节点
$(”label + input”) 临选择器，选择prev的下一个临节点
$(”#prev ~ div”) 同胞选择器，选择prev的所有同胞节点
基本过滤选择器
$(”tr:first”) 匹配第一个选择的元素
$(”tr:last”) 匹配最后一个选择的元素
$(”input:not(:checked) + span”)从原元素集合中过滤掉匹配selector的所有元素（这里有是一个临选择器）
$(”tr:even”) 匹配集合中偶数位置的所有元素(从0开始)
$(”tr:odd”) 匹配集合中奇数位置的所有元素(从0开始)
$(”td:eq(2)”) 匹配集合中指定位置的元素(从0开始)
$(”td:gt(4)”) 匹配集合中指定位置之后的所有元素(从0开始)
$(”td:gl(4)”) 匹配集合中指定位置之前的所有元素(从0开始)
$(”:header”) 匹配所有标题
$(”div:animated”) 匹配所有正在运行动画的所有元素
内容过滤选择器
$(”div:contains(‘John’)”) 匹配含有指定文本的所有元素
$(”td:empty”) 匹配所有空元素(只含有文本的元素不算空元素)
$(”div:has§”) 从原元素集合中再次匹配所有至少含有一个selector的所有元素
$(”td:parent”) 匹配所有不为空的元素(含有文本的元素也算)
$(”div:hidden”) 匹配所有隐藏的元素，也包括表单的隐藏域
$(”div:visible”) 匹配所有可见的元素
属性过滤选择器
$(”div[id]”) 匹配所有具有指定属性的元素
$(”input[name=‘newsletter’]”) 匹配所有具有指定属性值的元素
$(”input[name!=‘newsletter’]”) 匹配所有不具有指定属性值的元素
$(”input[name^=‘news’]”) 匹配所有指定属性值以value开头的元素
$(” i n p u t [n a m e$ =‘letter’]”) 匹配所有指定属性值以value结尾的元素
$(”input[name=‘man’]”) 匹配所有指定属性值含有value字符的元素
$(” i n p u t [i d] [n a m e$ =‘man’]”) 匹配同时符合多个选择器的所有元素
子元素过滤选择器
$(”ul li:nth-child(2)”),
$(”ul li:nth-child(odd)”), 匹配父元素的第n个子元素
$(”ul li:nth-child(3n + 1)”)
$(”div span:first-child”) 匹配父元素的第1个子元素
$(”div span:last-child”) 匹配父元素的最后1个子元素
$(”div button:only-child”) 匹配父元素的唯一1个子元素
表单元素选择器
$(”:input”) 匹配所有的表单输入元素，包括所有类型的input, textarea,select 和 button
$(”:text”) 匹配所有类型为text的input元素
$(”:password”) 匹配所有类型为password的input元素
$(”:radio”) 匹配所有类型为radio的input元素
$(”:checkbox”) 匹配所有类型为checkbox的input元素
$(”:submit”) 匹配所有类型为submit的input元素
$(”:image”) 匹配所有类型为image的input元素
$(”:reset”) 匹配所有类型为reset的input元素
$(”:button”) 匹配所有类型为button的input元素
$(”:file”) 匹配所有类型为file的input元素
$(”:hidden”) 匹配所有类型为hidden的input元素或表单的隐藏域
表单元素过滤选择器
$(”:enabled”) 匹配所有可操作的表单元素
$(”:disabled”) 匹配所有不可操作的表单元素
$(”:checked”) 匹配所有已点选的元素
$(”select option:selected”) 匹配所有已选择的元素
JQuery CSS 方法说明
css( name ) 访问第一个匹配元素的样式属性。
css( properties ) 把一个”名/值对”对象设置为所有匹配元素的样式属性。
$(”p”).hover(function () {
$(this).css({ backgroundColor:”yellow”, fontWeight:”bolder” });
}, function () {
var cssObj = {
backgroundColor: “#ddd”,
fontWeight: “”,
color: “#0028f4”
}
$(this).css(cssObj);
});
css( name, value ) 在所有匹配的元素中，设置一个样式属性的值。
offset( ) 取得匹配的第一个元素相对于当前可视窗口的位置。返回的对象有2个属性，
top和left，属性值为整数。这个函数只能用于可见元素。
var p = $(”p:last”);
var offset = p.offset();
p.html( “left: ” + offset.left + “, top: ” + offset.top );
width( ) 取得当前第一匹配的元素的宽度值，
width( val ) 为每个匹配的元素设置指定的宽度值。
height( ) 取得当前第一匹配的元素的高度值，
height( val ) 为每个匹配的元素设置指定的高度值。

JQuery Utilities 方法说明
jQuery.browser
.msie 表示ie
jQuery.browser.version 读取用户浏览器的版本信息
jQuery.boxModel 检测用户浏览器针对当前页的显示是否基于w3c CSS的盒模型
jQuery.isFunction( obj ) 检测传递的参数是否为function
function stub() { }
var objs = [
function () {},
{ x:15, y:20 },
null,
stub,
“function”
];
jQuery.each(objs, function (i) {
var isFunc = jQuery.isFunction(objs[i]);
$(”span:eq( ” + i + “)”).text(isFunc);
});
jQuery.trim( str ) 清除字符串两端的空格，使用正则表达式来清除给定字符两端的空格
jQuery.each( object, callback ) 一个通用的迭代器，可以用来无缝迭代对象和数组
jQuery.extend( target, object1, [objectN] ) 扩展一个对象，修改原来的对象并返回，这是一个强大的实现继承的工具，这种继承是采用传值的方法来实现的，而不是JavaScript中的原型链方式。
合并settings和options对象，返回修改后的settings对象
var settings = { validate: false, limit: 5, name: “foo” };
var options = { validate: true, name: “bar” };
jQuery.extend(settings, options);
合并defaults和 options对象，defaults对象并没有被修改。options对象中的值代替了defaults对象的值传递给了empty。
var empty = {}
var defaults = { validate: false, limit: 5, name: “foo” };
var options = { validate: true, name: “bar” };
var settings = $.extend(empty, defaults, options);
jQuery.grep( array, callback, [invert] ) 通过一个筛选函数来去除数组中的项
$.grep( [0,1,2], function(n,i){
return n > 0;
});
jQuery.makeArray( obj ) 将一个类似数组的对象转化为一个真正的数组将选取的div元素集合转化为一个数组
var arr = jQuery.makeArray(document.getElementsByTagName(”div”));
arr.reverse(); // use an Array method on list of dom elements
$(arr).appendTo(document.body);
jQuery.map( array, callback ) 使用某个方法修改一个数组中的项，然后返回一个新的数组
jQuery.inArray( value, array ) 返回value在数组中的位置，如果没有找到，则返回-1
jQuery.unique( array ) 删除数组中的所有重复元素，返回整理后的数组

1.Jquery选择器简介

(1) Jquery中的选择器完全继承了CSS的风格，利用Jquery选择器，可以非常便捷和快速的找出特定的Dom元素，然后为他们添加相应的行为，而无需担心浏览器是否支持这一选择器，学会使用选择器是学习Jqeury的基础，Jquery的行为规则都必须在获取到元素后才能生效。

2.jquery选择器的优势

(1) 简洁的写法，$()函数

(2)支持CSS1到CSS3选择器

(3)完善的处理机制

3.下面我们主要来说一下Jquery中所有的选择器

(1) 基本选择器：通过元素id,class和标签名等来查找Dom元素

1)$("#id") 根据给定的ID匹配一个元素，返回单个元素 $("#name")选取Id为test的元素

2)$(".class") 根据给定的类名匹配元素返回集合元素 $(".class")选取所有class为class的元素

3)$(“element”) 根据给定的元素名匹配元素，返回集合元素 $(“input”)选取所有的input元素

4) $(" * ") 匹配所有的元素，返回集合元素，$ ("*")选取所有的元素

5)$(“selector1,selector2,…,selectorN”) 将每一个选择器匹配到的元素合并后返回集合元素， $(“div,span,p.myClass”)选取所有

, 和拥有class为myClass的
标签的一组元素

(2)层次选择器：如果想通过Dom元素之间的层次关系来获取特定元素，例如后代元素，子元素，相邻元素和同辈元素

1) $(" a n c e s t o r d e s c e n d a n t ") 获得 a n c e s t o r 元素里面的所有 d e s c e n d a n t (后代) 元素，$ (“div span”)选取

里的所有的元素

2)$(“parent>child”) 选取parent元素下的child(子)元素，返回集合元素 $(“div span”)选取

元素下元素名为的子元素

注解：和 $(" a n c e s t o r d e s c e n d a n t ") 有区别，$ (“ancestor descendant”)选择的是后代元素

3) $(" p r e v + n e x t ") 选取紧接在 p r e v 元素后的 n e x t 元素，返回集合元素，$ (".one+div")选取class为one的下一个

同辈元素

4) $(" p r e v s i b l i n g s ") 选取 p r e v 元素之后的所有 s i b l i n g s 元素，$ ("#two~div")选取Id为two的元素后面的所有

同辈元素

注解:可以使用next()方法来替代$(‘prev+next’)选择器 $(" . o n e ") . n e x t (" d i v "); 可以使用 n e x t A l l () 方法来替代$ (“prev~siblings”)选择器$("#two").nextAll(div)

(3)过滤选择器：主要通过特定的过滤规则来筛选出所需要的Dom元素，按照不同的过滤规则，过滤选择器可以分为基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤和表单对象属性过滤选择器

1)基本过滤选择器

1) $(" : f i r s t ") 选取第一个元素，$ (“div:first”)选取所有

元素中第一个
元素。

2) $(" : l a s t ") 选取最后一个元素，$ (“div:last”)选取所有

元素中最后一个
元素。

3) $(" : n o t (s e l e c t o r) ") 去除所有与给定选择器匹配的元素，$ (“input:not(.myClass)”)选取class不是myClass的元素。

4) $(" : e v e n ") 选取索引是偶数的所有元素，索引从 0 开始，$ (“input:even”)选取索引是偶数的元素

5) $(" : o d d ") 选取索引是奇数的所有元素，索引从 0 开始，$ (“input:odd”)选取索引是奇数的元素

6) $(" : e q (i n d e x) ") 选取索引等于 i n d e x 的元素， (i n d e x 从 0 开始) ，$ (“input:eq(1)”)选取索引等于1的元素

7) $(" : g t (i n d e x) ") 选取索引大于 i n d e x 的元素， (i n d e x 从 0 开始) ，$ (“input:gt(1)”)选取索引大于1的元素(大于1，而不包括1)

8) $(" : l t (i n d e x) ") 选取索引小于 i n d e x 的元素， (i n d e x 从 0 开始) ，$ (“input:lt(1)”)选取索引小于1的元素(小于1，而不包括1)

9) $(" : h e a d e r ") 选取所有的标题元素，例如： h 1, h 2, h 3 等等，$ (":header")选取网页中的所有的

,

,

…

10) $(" : a n i m a t e d ") 选取当前正在执行动画的所有元素，$ (“div:animated”)选取正在执行动画的

元素。

11) $(" : f o c u s ") 选取当前获取焦点的元素，$ (":focus")选取当前获取焦点的元素

2)内容过滤选择器：主要体现在它所包含的子元素或者文本内容上面

1) $(" : c o n t a i n s (t e x t) ") 选取含有文本为 " t e x t " 的元素，$ (“div:contains(‘我’)”)选取含有文本"我"的

元素

2) $(" : e m p t y ") 选取不包含子元素或者文本的空元素，$ (“div:empty”)选取不包含子元素(包括文本元素)的

空元素

3) $(" : h a s (s e l e c t o r) ") 选取含有选择器所匹配的元素的元素，$ (“div:has§”)选取含有

元素的

元素

4) $(" : p a r e n t ") 选取含有子元素或者文本的元素,$ (“div:parent”)选取拥有子元素(包括文本元素)的

元素

3)可见性过滤选择器：根据元素的可见和不可见状态来选择相应的元素

1) $(" : h i d d e n ") 选取所有不可见的元素，$ (":hidden")选取所有不可见的元素，包括，

和

2) $(" : v i s i b l e ") 选取所有可见的元素，$ (“div:visible”)选取所有可见的

元素

4)属性过滤选择器：通过元素的属性来获取相应的元素

1) $(" [a t t r i b u t e] ") 选取拥有此属性的元素，$ (“div[id]”)选取拥有属性Id的元素。

2) $(" [a t t r i b u t e = v a l u e] ") 选取属性的值为 v a l u e 的元素，$ (“div[title=test]”)选取属性title为"test"的

元素

3) $(" [a t t r i b u t e! = v a l u e] ") 选取属性的值不等于 v a l u e 的元素，$ (“div[title!=test]”)选取属性title不等于"test"的

元素(注意：没有属性title的
元素也会被选取)

4) $quot;[attribute^=value]")选取属性的直以value开始的元素，$ (“div[title^=test]”)选取属性title以"test"开始的

元素

5) $(" [a t t r i b u t e$ =value]")选取属性的值以value结束的元素， $(" d i v [t i t l e$ =test]")选取属性title以"test"结束的

元素

6) $(" [a t t r i b u t e * = v a l u e] ") 选取属性的值含有 v a l u e 的元素，$ (“div[title*=test]”)选取属性title含有"test"的

元素

7) $(" [a t t r i b u t e ∣ = v a l u e] ") 选取属性等于给定字符串或以给字符串为前缀 (该字符串后跟一个连字符 " - ") 的元素,$ (“div[title|=“en”]”)选取属性title等于en或者以en为前缀(给字符串后跟一个"-")的元素

8) $(" [a t t r i b u t e = v a l u e] ") 选取属性用空格分隔的值中包含一个给定值得元素，$ (“div[title~=‘uk’]”)选取属性title用空格分隔的值中包含字符uk的元素

9)$("[attribute1][attribute2][attribute3]")用属性选择器合并成一个复合属性选择器，满足多个条件，每选择一次，缩小一次范围

$(" d i v [i d] [t i t l e$ =‘test’]")选取拥有属性id，并且属性title以"test"结束的

元素

5)子元素过滤选择器

注解：子元素过滤选择器的过滤规则相对于其他的选择器稍微有些复杂，只要将元素的父元素和子元素区分清楚，使用起来还是相当简单的

1)$(":nth-child(idenx/even/odd/equation)")选取每个父元素下的第index个子元素或者奇偶元素(idnex从1算起)

:eq(index)只匹配一个元素，而:nth-child将为每一个父元素匹配子元素，并且:nth-child(index)的index是从1开始的，

而:eq(index)是从0开始的

2)$(":first-child")选取每个父元素的第一个子元素，:first只返回单个元素，而:first-child选择符将为每个父元素匹配第一个

子元素，例如:$(“ulli:first-child”);选取每个
- 中的一个
- 元素
3)$(":last-child")选取每个父元素的最后一个子元素,和上面一样，:last只返回当个元素，而:last-child选择符将为每个符永

元素匹配最后一个子元素，例如：$(“ul li:first-child”);选取每个
- 中的最后一个
- 元素。
4)$(":only-child")如果某个元素是它父元素中唯一的子元素，那么将会被匹配，如果父元素中含有其他元素，这不会被匹配

$(“ul li:only-child”)在
- 中选取是唯一子元素的
- 元素
5):nth-child()选择器是很常用的子元素过滤器，详细功能如下：

1)$(:nth-child(even))能选取每个父元素下的索引值是偶数的元素

2)$(:nth-child(odd))能选取到每个父元素下的索引值是奇数的元素

3)$(:nth-child(2))能选取到每个父元素下索引值等于2的元素

4)$(:nth-child(3n))能选取到每个父元素下索引值是3的倍数的元素(n从1开始)

5)$(:nth-child(3n+1))能选取每个父元素下索引值是(3n+1)的元素(n从1开始)

6)表单对象过滤选择器：对所选择的表单进行过滤

1) $(: e n a b l e d) 选取所有可用元素，$ ("#form :enabled");选取id为"form"的表单内的所有可用元素

2) $(: d i s a b l e d) 选取所有不可用的元素，$ ("#form :enabled");选取id为"form"的表单内的所有不可用元素

3) $(: c h e c k e d) 选取所有被选中的元素 (单选框，复选框) ，$ (“input:checked”)选取所有被选中的元素

4) $(: s e l e c t e d) 选取所有被选中的选项元素 (下拉列表) ，$ (“select option:selected”)选取所有被选中的选项元素

(4)表单选择器：方便的获取到表单的某个或者某类型的元素

1)$(":input")选取所有的,,,元素

2)$(":text")选取所有的单行文本框

3)$(":password")选取所有的密码框

4)$(":radio")选取所有的单选框

5)$(":checkbox")选取所有的多选框

6)$(":submit")选取所有的提交按钮

7)$(":image")选取所有的图像按钮

8)$(":reset")选取所有的重置按钮

9)$(":button")选取所有的按钮

10)$(":file")选取所有的上传域

11)$(":hidden")选取所有的不可见元素

4.选择器中的一些注意事项

(1) 选择器中含有特殊符号的注意事项

1)选择器中含有".","、","#","(","]"等特殊字符

根据w3c的规定，属性中是不能含有这些特殊字符的，但在实际项目中偶尔会遇到表达式中含有"#","."等特殊字符，如果按照普通的方式去处理的话可能会出现错误，解决此类错误是使用转义符转义

例如：

韩迎龙
<divid=“id[1]”>韩迎龙,这时的取法是这样的 KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲id\\#b"),("#id\[1\]")

2)属性选择器的@符号问题

在Jquery升级版本的过程中，jquery在1.3.1版本中彻底放弃了1.1.0版本遗留下来的@符号，加入你使用的是1.3.1以上的版本，

那么你不需要再属性前添加@符号，例如：

$(" d i v [@ t i t l e =^{'} t e s t^{'}] ") ，正确的写法就是去掉 @ 符号，$ (div[title=‘test’])

(2)选择器中含有空格的注意事项

选择器中的空格是不容忽视的，多一个空格或者少一个空格也许会得到截然不同的结果

作者：乡下丫头要进城
来源：CSDN
原文：https://blog.csdn.net/hj_0619/article/details/8264455
版权声明：本文为博主原创文章，转载请附上博文链接