jQuery选择器大全整理

时间 2020-11-30

标签 javascript html java jquery api 数组浏览器 ruby markdown app 栏目 JQuery 繁體版

原文原文链接

1、选择网页元素

$(document) //选择整个文档对象

$('#myId') //选择ID为myId的网页元素

$('div.myClass') // 选择class为myClass的div元素

$('input[name=first]') // 选择name属性等于first的input元素

$('a:first') //选择网页中第一个a元素

$('tr:odd') //选择表格的奇数行

$('#myForm :input') // 选择表单中的input元素

$('div:visible') //选择可见的div元素

$('div:gt(2)') // 选择全部的div元素，除了前三个

$('div:animated') // 选择当前处于动画状态的div元素

$('div').has('p'); // 选择包含p元素的div元素

$('div').not('.myClass'); //选择class不等于myClass的div元素

$('div').filter('.myClass'); //选择class等于myClass的div元素

$('div').first(); //选择第1个div元素

$('div').eq(5); //选择第6个div元素

$('div').next('p'); //选择div元素后面的第一个p元素

$('div').parent(); //选择div元素的父元素

$('div').closest('form'); //选择离div最近的那个form父元素

$('div').children(); //选择div的全部子元素

$('div').siblings(); //选择div的同级元素

2、链式操做

每一步的jQuery操做，返回的都是一个jQuery对象，因此不一样操做能够连在一块儿。javascript

$('div') //找到div元素
　　　.find('h3') //选择其中的h3元素
　　　.eq(2) //选择第3个h3元素
　　　.html('Hello'); //将它的内容改成Hello

链式操做可使用 end 回退到上一步的结果集：html

$('div')
　　　.find('h3')
　　　.eq(2)
　　　.html('Hello')
　　　.end() //退回到选中全部的h3元素的那一步
　　　.eq(0) //选中第一个h3元素
　　　.html('World'); //将它的内容改成World

3、元素的操做：取值（getter）和赋值（setter）

$('h1').html(); //html()没有参数，表示取出h1的值

$('h1').html('Hello'); //html()有参数Hello，表示对h1进行赋值

.html() //取出或设置html内容

.text() //取出或设置text内容

.attr() //取出或设置某个属性的值

.width() //取出或设置某个元素的宽度

.height() //取出或设置某个元素的高度

.val() //取出某个表单元素的值

须要注意的是，若是结果集包含多个元素，那么赋值的时候，将对其中全部的元素赋值；取值的时候，则是只取出第一个元素的值（.text()例外，它取出全部元素的text内容）。java

4、元素的操做：移动

$('div').insertAfter($('p')); //把div元素移动p元素后面

$('p').after($('div')); //把p元素加到div元素前面

两种效果同样，区别在于返回值的不一样：第一种方法返回div元素，第二种方法返回p元素jquery

.insertAfter()和.after()：在现存元素的外部，从后面插入元素

.insertBefore()和.before()：在现存元素的外部，从前面插入元素

.appendTo()和.append()：在现存元素的内部，从后面插入元素

.prependTo()和.prepend()：在现存元素的内部，从前面插入元素

5、元素的操做：复制、删除和建立

复制元素使用.clone()。api
删除元素使用.remove()和.detach()。二者的区别在于，前者不保留被删除元素的事件，后者保留，有利于从新插入文档时使用。数组
清空元素内容（可是不删除该元素）使用.empty()。浏览器

6、工具方法

$.trim() 去除字符串两端的空格。ruby
$.each() 遍历一个数组或对象。markdown

$.inArray() 返回一个值在数组中的索引位置。若是该值不在数组中，则返回-1。app

var arr = [ 4, "Pete", 8, "John" ];
$.inArray( "John", arr );//结果为3
$.inArray( "Karl", arr );//结果为-1

$.grep() 返回数组中符合某种标准的元素。

var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];
arr = $.grep(arr, function( n, i ) {
  return ( n !== 5 && i > 4 );
});
arr.join( ", " )

//结果为 
1, 9, 4, 7, 3, 8, 6, 9, 1
过滤了=5的元素和数组索引位置小于等于4的元素

$.extend() 将多个对象，合并到第一个对象。

var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var object2 = {
  banana: { price: 200 },
  durian: 100
};

// Merge object2 into object1
$.extend( object1, object2 );
console.log(JSON.stringify( object1 ));

结果为：
{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}

$.makeArray() 将对象转化为数组。

$.type() 判断对象的类别（函数对象、日期对象、数组对象、正则对象等等）。

jQuery.type( undefined ) === "undefined"
jQuery.type() === "undefined"
jQuery.type( window.notDefined ) === "undefined"
jQuery.type( null ) === "null"

jQuery.type( true ) === "boolean"
jQuery.type( new Boolean() ) === "boolean"
jQuery.type( 3 ) === "number"
jQuery.type( new Number(3) ) === "number"
jQuery.type( "test" ) === "string"
jQuery.type( new String("test") ) === "string"
jQuery.type( function(){} ) === "function"
jQuery.type( [] ) === "array"
jQuery.type( new Array() ) === "array"
jQuery.type( new Date() ) === "date"
jQuery.type( new Error() ) === "error" // as of jQuery 1.9
jQuery.type( /test/ ) === "regexp"

$.isArray() 判断某个参数是否为数组。

$.isEmptyObject() 判断某个对象是否为空（不含有任何属性）。

jQuery.isEmptyObject({}); // true
jQuery.isEmptyObject({ foo: "bar" }); // false

$.isFunction() 判断某个参数是否为函数。

function stub() {}
var objs = [
  function() {},
  { x:15, y:20 },
  null,
  stub,
  "function"
];

jQuery.each( objs, function( i ) {
  var isFunc = jQuery.isFunction( objs[ i ]);
  console.log(isFunc );
});

结果：
true
false
false
true
false

$.isPlainObject() 判断某个参数是否为用”{}”或”new Object”创建的对象。
$.support() 判断浏览器是否支持某个特性。

7、事件操做

//为P元素绑定click事件
$('p').click(function(){
alert('Hello');
});

.blur() 表单元素失去焦点。

$( "#target" ).blur(function() {
  alert( "Handler for .blur() called." );
});

.change() 表单元素的值发生变化

<!--HTML-->
<form>
  <input class="target" type="text" value="Field 1">
  <select class="target">
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
</form>
<div id="other">
  Trigger the handler
</div>

//JS
$( ".target" ).change(function() {
  alert( "Handler for .change() called." );
});

.click() 鼠标单击
.dblclick() 鼠标双击
.focus() 表单元素得到焦点
.focusin() 子元素得到焦点
.focusout() 子元素失去焦点
.hover() 同时为mouseenter和mouseleave事件指定处理函数
.keydown() 按下键盘（长时间按键，只返回一个事件）
.keypress() 按下键盘（长时间按键，将返回多个事件）
.keyup() 松开键盘

.load() 元素加载完毕

$( "img.userIcon" ).load(function() {
  if ( $( this ).height() > 100) {
    $( this ).addClass( "bigImg" );
  }
});

.mousedown() 按下鼠标
.mouseenter() 鼠标进入（进入子元素不触发）
.mouseleave() 鼠标离开（离开子元素不触发）
.mousemove() 鼠标在元素内部移动
.mouseout() 鼠标离开（离开子元素也触发）
.mouseover() 鼠标进入（进入子元素也触发）
.mouseup() 松开鼠标
.ready() DOM加载完成

.resize() 浏览器窗口的大小发生改变

$( window ).resize(function() {
  $( "body" ).prepend( "<div>" + $( window ).width() + "</div>" );
});

.scroll() 滚动条的位置发生变化
.select() 用户选中文本框中的内容
.submit() 用户递交表单

.toggle() 根据鼠标点击的次数，依次运行多个函数

$( "td" ).toggle(
  function() {
    $( this ).addClass( "selected" );
  }, function() {
    $( this ).removeClass( "selected" );
  }
);

.unload() 用户离开页面

以上这些事件在jQuery内部，都是.bind()的便捷方式。使用.bind()能够更灵活地控制事件，好比为多个事件绑定同一个函数：

　　$('input').bind(
　　　　'click change', //同时绑定click和change事件
　　　　function() {
　　　　　　alert('Hello');
　　　　}
　　);

有时，你只想让事件运行一次，这时可使用.one()方法。

　　$("p").one("click", function() {
　　　　alert("Hello"); //只运行一次，之后的点击不会运行
　　});

.unbind()用来解除事件绑定。

　　$('p').unbind('click');

全部的事件处理函数，均可以接受一个事件对象（event object）做为参数，好比下面例子中的e：

　　$("p").click(function(e) {
　　　　alert(e.type); // "click"
　　});

这个事件对象有一些颇有用的属性和方法：

event.pageX 事件发生时，鼠标距离网页左上角的水平距离　　
event.pageY 事件发生时，鼠标距离网页左上角的垂直距离
event.type 事件的类型（好比click）　　
event.which 按下了哪个键　
event.data 在事件对象上绑定数据，而后传入事件处理函数
event.target 事件针对的网页元素
event.preventDefault() 阻止事件的默认行为（好比点击连接，会自动打开新页面）
event.stopPropagation() 中止事件向上层元素冒泡

若是在代码里自动触发一个事件，一种是直接使用事件函数，另外一种是使用.trigger()或.triggerHandler()。

　　$('a').click(); //直接使用事件函数
　　$('a').trigger('click');

通常用来触发其余事件，好比点击某个元素触发另一个元素的hover事件。

8、特殊效果

$('h1').show(); //展示一个h1标题

　　.fadeIn() 淡入
　　.fadeOut() 淡出
　　.fadeTo() 调整透明度
　　.hide() 隐藏元素 = display:none
　　.show() 显示元素 
　　.slideDown() 向下展开
　　.slideUp() 向上卷起
　　.slideToggle() 依次展开或卷起某个元素
　　.toggle() 依次展现或隐藏某个元素

除了.show()和.hide()，全部其余特效的默认执行时间都是400ms（毫秒），可是你能够改变这个设置。

$('h1').fadeIn(300); // 300毫秒内淡入
$('h1').fadeOut('slow'); // 缓慢地淡出

在特效结束后，能够指定执行某个函数。

$('p').fadeOut(300, function() { 
    $(this).remove(); 
});

更复杂的特效，能够用.animate()自定义。

$('div').animate(
　　　　{
　　　　　　left : "+=50", //不断右移
　　　　　　opacity : 0.25 //指定透明度
　　　　},
　　　　300, // 持续时间
　　　　function() { 
    　　　　alert('done!'); 
    　　} //回调函数
　　);

.stop()和.delay()用来中止或延缓特效的执行。
$.fx.off若是设置为true，则关闭全部网页特效。