jQuery相关方法总结 01

jQuery

jQuery是一个快速、简洁的JavaScript库。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

使用jQuery获取元素

• jQuery定义了一套选择器规则，和css选择器的目的一样，都是为了选择出符合特定规则的元素。

选择器：

基本选择器	功能
$('*');	匹配页面所有元素
$('#id');	id选择器
$('.class');	类选择器
$('element');	标签选择器

组合/层次选择器	功能
$('E,F')	多元素选择器，用”,分隔，同时匹配元素E或元素F
$('E F')	后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下递归）元素F
$(E>F)	子元素选择器，用”>”分隔，匹配E元素的所有直接子元素
$('E+F')	直接相邻选择器，匹配E元素之后的相邻的同级元素F
$('E~F')	普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否）
$('.class1.class2')	匹配类名中既包含class1又包含class2的元素

基本过滤选择器	功能
$("E:first")	所有E中的第一个
$("E:last")	所有E中的最后一个
$("E:not(selector)")	按照selector过滤E
$("E:even")	所有E中index是偶数
$("E: odd")	所有E中index是奇数
$("E:eq(n)")	所有E中index为n的元素
$("E:gt(n)")	所有E中index大于n的元素
$("E:lt(n)")	所有E中index小于n的元素
$(":header")	选择h1~h6 元素
$("div:animated")	选择正在执行动画效果的元素

内容过滤器	功能
$('E:contains(value)')	内容中包含value值的元素
$('E:empty')	内容为空的元素
$('E:has(F)')	子元素中有F的元素，$('div:has(a)'):包含a标签的div
$('E: parent')	父元素是E的元素，$('td: parent'):父元素是td的元素

可视化选择器	功能
$('E:hidden')	所有被隐藏的E
$('E:visible')	所有可见的E

属性过滤选择器	功能
$('E[attr]')	含有属性attr的E
$('E[attr=value]')	属性attr=value的E
$('E[attr !=value]')	属性attr！=value的E
$('E[attr ^=value]')	属性attr以value开头的E
$('E[attr $=value]')	属性attr以value结尾的E
$('E[attr *=value]')	属性attr包含value的E
$('E[attr][attr *=value]')	含有属性attr且属性attr！=value的E

子元素过滤器	功能
$('E:nth-child(n)')	E的第n个子节点
$('E:nth-child(3n+1)')	E的index符合3n+1表达式的子节点
$('E:nth-child(even)')	E的index为偶数的子节点
$('E:nth-child(odd)')	E的index为奇数的子节点
$('E:first-child')1	所有E的第一个子节点
$('E:last-child')	所有E的最后一个子节点
$('E: only-child')	只有唯一子节点的E的子节点
$("E:first-of-type");	匹配所有E的父元素的第一个E类型的孩子
$('E:last-of-type');	匹配所有E的父元素的最后一个E类型的孩子
$('E:nth-of-type(2)');	匹配所有E的父元素的第二个E类型的孩子
$('E:nth-last-of-type(n)');	匹配所有E的父元素的第二个E类型的孩子，从最后一个子元素开始计数

表单元素选择器	功能
$('E:type')	特定类型的input
$(':checked')	被选中的checkbox或radio
$('option: selected')	被选中的option

元素获取的方法

对于一个特定结果集，我们想获取到指定index的jQuery对象

• 使用 .eq(index): $('div').eq(3); // 获取结果集中的第四个jQuery对象
• 使用 .get(index): $('div').get(3); //获取结果集中的第四个jQuery对象
• 使用 [index] 这种方法会获取到DOM对象: $('div')[3]; //获取结果集中 第四个jQuery对象转换为DOM对象的结果

兄弟元素获取

• next([selector]):next取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合 $('.test').next();
• prev([selector]):next取得匹配的元素集合中每一个元素紧邻的前面同辈元素的元素集合 $('.test').prev('li');
• nextAll([selector])
• prevAll([selector])
• siblings([selectors])：获得匹配元素集合中每个元素的兄弟元素,可以提供一个可选的选择器

父子元素的获取

• parent([selector]):取得匹配元素集合中，每个元素的父元素，可以提供一个可选的选择器 $('li.item-a').parent()
• parents([selector]):获得集合中每个匹配元素的祖先元素，可以提供一个可选的选择器作为参数
• children([selector]): 获得匹配元素集合中每个元素的子元素，选择器选择性筛选
• find([selector]): 查找符合选择器的后代元素

筛选当前结果集

• first()：获取当前结果集中的第一个对象
• last()：获取当前结果集的最后一个对象
• .filter(selector), filter(function(index))：筛选当前结果集中符合条件的对象，参数可以是一个选择器或者一个函数

$('li').filter(':even')

$('li').filter(function(index) {
  return index % 3 == 2;
})


//相当于对结果集中的每个元素(DOM对象)进行了处理，但只有返回true的元素才会被选中(选中后再被包装成jquery对象)
$('li').filter(function(index, node){
  // 这里node和this的类型都是DOM对象
  console.log(node);
  console.log(this);
  return true; // 最终会得到所有li元素
  // 因此可以通过相关操作,只对符合的元素返回true
});

• not(selector), not(function(index)):从匹配的元素集合中移除指定的元素，和filter相反
• is(selector), is(function(index)), is(dom/jqObj):判断当前匹配的元素集合中的元素，是否为一个选择器，DOM元素，或者jQuery对象，如果这些元素至少一个匹配给定的参数，那么返回true
• has(selector), has(dom)：筛选匹配元素集合中的那些有相匹配的选择器或DOM元素的后代元素 $('li').has('span')

jQuery DOM操作

创建元素

• 只需要把DOM字符串传入$方法即可返回一个jQuery对象

var obj = $('<div class="test"><p><span>Done</span></p></div>');

添加元素

• append(content[,content]) / append(function(index,html))：匹配的元素/对象 尾部插入内容(插入到最后)

  • 可以一次添加多个内容，内容可以是DOM对象、HTML string、 jQuery对象
  • 如果参数是function，function可以返回DOM对象、HTML string、jQuery 对象，参数是集合中的元素位置与原来的html值

• appendTo(target)：对象 插入到目标元素尾部，目标元素可以是selector, DOM对象, HTML string, 元素集合, jQuery对象

  • $( "<p>Test</p>" ).appendTo( $( ".container" ) );

• prepend(content[,content]) / prepend(function(index,html)):向匹配的元素头部追加内容，用法和append类似，内容添加到最开始

  • $( ".inner" ).prepend( "<p>Test</p>" );

• prependTo(target):对象 插入到目标元素头部

  • $( "<p>Test</p>" ).prependTo( ".inner" );

• before([content][,content]) / before(function):在 匹配的元素/对象 前面(不是头部，而是外面，和对象并列同级)插入内容

• insertBefore(target):把对象插入到target之前（同样不是头部，是同级）

• after([content][,content]) / after(function(index)):在匹配的元素/对象前面(不是头部，而是外面，和对象并列同级)插入内容
  后面(不是尾部，而是外面，和对象并列同级)插入内容

• insertAfter(target): 把对象插入到target之后（同样不是尾部，是同级）、

删除元素

• remove([selector]):删除被选元素（及其子元素）,可以添加一个可选的选择器参数来过滤匹配的元素
  • $("#div1").remove();
• empty(): 清空被选择元素内所有子元素
• detach(): 会返回删除的jquery对象,方便该jquery对象插入到其他位置(这部分remove可以实现),但是使用detach方法可以保持jquery对象上的事件,但是remove不能

包裹元素

• wrap(wrappingElement) / wrap(function(index)): 为每个对象包裹一层HTML结构，可以是selector, element, HTML string, jQuery object

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

$('.inner').wrap("<div class='new'></div>");

<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
  </div>
  <div class="new">
    <div class="inner">Goodbye</div>
  </div>
</div>

• wrapAll(wrappingElement):把所有匹配对象包裹在同一个HTML结构中

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

$('.inner').wrapAll("<div class='new'></div>");

<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
  </div>
</div>

• wrapInner(wrappingElement) / .wrapInner(function(index))

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

$('.inner').wrapInner("<div class='new'></div>");

<div class="container">
  <div class="inner">
    <div class="new">Hello</div>
  </div>
  <div class="inner">
    <div class="new">Goodbye</div>
  </div>
</div>

• unwap():把DOM元素的parent移除

• html([string]): 用于获取/修改元素的innerHTML

  • 当没有传递参数的时候，返回元素的innerHTML
  • 当传递了一个string参数的时候，修改元素的innerHTML为参数值

• text():和html方法类似，操作的是DOM的innerText值

属性和CSS操作

• jQuery对象可能包含了多个DOM对象,为jQuery直接添加事件处理程序,其内的所有DOM对象都会拥有该事件处理程序,相当于为每个对象都添加了事件处理程序

<ul class="img-list">
    <li data-src = "1.jpg">1</li>
    <li data-src = "2.jpg">2</li>
    <li data-src = "3.jpg">3</li>
</ul>
<button type="button" id="add">增加</button>
<script>
$('.img-list>li').on('click', function(){
    // 这里this指的是 <li data-src = "x.jpg">x</li> DOM对象
    var url = $(this).attr('data-src');
    $image.attr('src', url);
})
$('#add').on('click', function(){
    $('.imag-list').append("<li data-src = '1.jpg'>1</li>");
})
</script>

• 注意:$('.img-list>li')获取的jQuery对象是静态的,不会因为后续的相关操作而变化(例如再网ul中新插入li,但是该li不会拥有上述事件处理程序)

属性相关:

• val():这是一个读写双用的方法,用来处理 input 的value,当方法没有参数的时候返回input的value值，当传递了一个参数的时候，方法修改input的value值为参数值.

$('input').val();
$('input').val('newValue');

//js原生方法获取input元素的value值
var input = document.getElementById('#username');
console.log(input.value);
input.value = 'newValue';

• .attr():获取/设置元素特定属性的值

$('img').get(0).attr("src");  // 获取img的src

$('img').get(0).attr("src", "http://image.baidu.com/123.jpg");

// js原生原生方法 获取/设置元素特定属性的值

var img = document.querySelector("img");
var origin = img.getAttribute("src");
img.setAttribute("src", "http://image.baidu.com/123.jpg")

• removeAttr(): 移除属性

$('div').removeAttr('id');
// js原生方法
document.querySelector('div').removeAttribute('div');

CSS相关

• css():

// 查看jquery对象的所有css样式
console.log($('#container').css());
// 获取jquery对象的指定样式
var color = $('#container').css("background-color");
var styleProps = $('#container').css([
  "width",
  "height",
  "color",
  "background-color"
]);
// 为jquery对象设置样式
$('#container').css( "background-color", "yellow" );

$('#container').css({
  "background-color": "yellow",
  "font-weight": "bolder"
});

// 输出element的所有有css样式
document.querySelector('#container').style;
// 输出element的指定样式
document.querySelector('#container').style.borderColor;
// 设置element的指定样式
document.querySelector('#container').style.border = "1px solid red";

• 当状态发生改变时,需要对元素的样式做出改变,使用直接修改css样式的方法太繁琐,可以将元素在新状态时的样式写在一个类中,当状态改变时,只需修改元素的class值或者添加class值即可

• addClass(className)和removeClass(className):

$( "p" ).addClass( "myClass yourClass" );
$( "p" ).removeClass( "yourClass" );
//JS原生方法
var p = document.querySelector('p');
p.classList.add("myClass","yourClass");
p.classList.remove("yourClass")

• hasClass(className):检查元素是否包含某个class，返回true/false

• toggleClass(className):用于切换class

第一次执行
$( "div.tumble" ).toggleClass( "bounce" )
<div class="tumble bounce">Some text.</div>
第二次执行
$( "div.tumble" ).toggleClass( "bounce" )
<div class="tumble">Some text.</div>