jQuery选择器及jQuery基本操作

吐血整理，如有错误，欢迎指出，感激不尽~

1. jq选择器

• jq的选择器，就是在执行jq函数时传参
• 是用来获取DOM元素的方法，通过下标可以获取其中某一个DOM元素
• $ 函数不管使用选择器选中了几个元素，$函数的返回值都是一个对象（伪数组）
• jq选择器是jq最核心的内容，大大简化的了DOM对象的查询
• css1-css3的选择器，都可以当做$函数的参数，如下：

Id选择器: $("#box");
Class选择器: $(".box");
标签选择器: $("span");
通配符选择器: $("*");
包含选择器:  $("#box p");
子选择器: $("#box>p");
群组选择器: $("#box,.cont,p");
属性选择器: $("input[type=button]");

• 还有一些特殊的选择器，如下：

$("#box:first");
$("#box:last");
$("#box:eq(3)");
$("#box:odd");
$("#box:even");

• 及jq的筛选器（对选择器获取到的一组标签对象进行筛选，便于链式编程），如下：

.first(): 匹配第一个
.last(): 匹配最后一个
.eq(): 匹配指定下标
.find(): 匹配指定的后代元素
.children(): 匹配指定的子元素
.prev(): 匹配上一个兄弟
.prevAll(): 匹配上面所有的兄弟
.next(): 匹配下一个兄弟
.nextAll(): 匹配下面所有兄弟
.siblings(): 匹配所有兄弟,不管上下
.parent(): 匹配直接父级
.parents(): 匹配所有父级
.end(): 匹配链式编程选择器的上一级

• jq的$函数类似于原生就是document.querySelectorAll()
• 实际上先有jq，然后原生js才有了querySelectorAll()
• 原生js的DOM对象和jq的DOM对象的转换方式：

// 原生js转jq
    $(原生DOM对象);
// jq转原生js
    jqDOM对象[0];

• jq选择器的使用方法如下，部分举例，希望大家可以举一反三哦~~

// 属性
$("input[abc=hello][qwe]").css("background","red");

// 包含：后代
$(".msg h2").css("background","red");

// 群组：
$("#box,.cont,span").css("background","red");

// 包含：子
$(".msg>h2").css("background","red");

// 下一个兄弟
$(".msg+span").css("background","red");
// 下面所有兄弟
$(".msg~span").css("background","red");

// 指定索引，从0开始
$(".cont:eq(1)").css("background","red");

// 第一个或最后一个
$(".list li:first").css("background","red");
$(".list li:last").css("background","red");

// 第奇数个或第偶数个
$(".list li:odd").css("background","red");
$(".list li:even").css("background","red");

// 匹配所有兄弟
$(".list").siblings().css("background","red");

// 匹配直接父级或所有父级
$(".xbox").parent().css("border","solid 1px black");
$(".xbox").parents().css("border","solid 1px black");

// 简单连缀
$(".list").children("li").eq(3).end().css("background","red");

---

2. 属性操作

原生JS设置属性方式如下：

ele.setAttribute()
ele.getAttribute()

那么来看jq，如下：

①.attr()方法：
attr()：

标签对象.attr(属性): 获取指定属性的属性值
标签对象.attr(属性 , 属性值): 设定属性和属性值
标签对象.attr(自定义属性 , 属性值): 设定自定义属性和属性值

注意：jq中的设置方法一般都可以为全部选中的元素设置，也就是说atrr方法内部自带了循环操作。而获取方法一般只能 获取第一个选中的元素。设置属性时，直接显示在标签上，为可见的内置或自定义。

removeAttr()：

$('.box').removeAttr('name');
// 删除所有类名为box的name属性

②.prop()方法:
prop():

标签对象.prop(属性)： 获取指定属性的属性值
标签对象.prop(属性 , 属性值)： 设定属性和属性值
标签对象.prop(自定义属性 , 属性值)： 设定自定义属性和属性值

注意： 设置内置属性时，可以直接显示在标签上，为 可见的内置属性 设置自定义属性时，不会直接显示在标签上，为不可见的自定义属性。

removeProp():删除指定的属性，多用于自定义属性。

---

3. Class操作

最常用的一个属性操作是类名。
原生JS操作方式如下：

ele.className = 'item';

那么来看jq，如下：

hasClass(class): 判断标签是否具有某个class，返回布尔值。
addClass(class) ：为每个匹配的元素添加指定的类名。
removeClass(class) ：从所有匹配的元素中删除指定的类。
toggleClass(class)：如果存在（不存在）就删除（添加）一个类。

示例代码（1）：

$('.box').hasClass('item');
$('.box').addClass('item');
$('.box').removeClass('item');
$('.box').toggleClass('item');	

示例代码（2）：

①hasClass:

$("div").click(function(){
  if ( $(this).hasClass("protected") )
    $(this)
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: 0 });
});

②addClass：

$('ul li:last').addClass(function() {
  return 'item-' + $(this).index();
});

③removeClass：删除最后一个元素上与前面重复的class。

$('li:last').removeClass(function() {
    return $(this).prev().attr('class');
});

④toggleClass：根据父元素来设置class属性。

$('div.foo').toggleClass(function() {
  if ($(this).parent().is('.bar') {
    return 'happy';
  } else {
    return 'sad';
  }
});

---

4. 样式操作

（1）原生JS操作方式如下：

ele.style.width
getComputedStyle

（2）那么来看jq，如下：

标签对象.css(属性)：获取指定属性的属性值
标签对象.css(属性 , 属性值) ： 设定属性以及属性值
标签对象.css({属性 : 属性值}) ：以对象的形式,设定属性以及属性值，也可以同时设定多个属性，属性定义的方式比较灵活

示例代码：

$('.box').css('width',100)
//将类名为box的元素宽度设置为100
$('.box').css('width')
//获取第一个类名为box的元素的宽度

（3）注意：

当用.css({属性 : 属性值}) 这种方法时，因为是对象的形式，所以，其背景颜色（background-color）、行高（line-height）、字体大小（font-size）等这种由两个单词中间加中划线组成的属性在书写时，要注意去掉中划线，并写成小驼峰模式。“px”可以省略（但行高（line-height）除外，如果“px”省略，则变成倍数）。

示例代码：

$("#box").css({
    width:"100px",
    height:200,
    background:"red",
    opacity:0.5,
    fontSize:30,
    lineHeight:"100px"
});

---

5. 内容操作

（1）原生JS操作方式如下：

ele.innerHTML = '< h2 >ddd< /h2 >';
ele.innerText = '< h2 >aaa< /h2 >';
ipt.value = 'zhangsan'

（2）那么来看jq，如下：

.html()：获取或者设置元素的html内容，这个函数不能用于XML文档。但可以用于XHTML文档。在一个 HTML 文档中，我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。
.text()：获取或者设置元素的文本内容，结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
.val()：获取或者设置输入框的内容，在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选，将返回一个数组，其包含所选的值。

示例代码（1）：
总结就是：没有参数是获取，有参数是设置。

$('.box').html();		// 获取
$('.box').html('aaa');   // 设置

$('.box').text();		// 获取
$('.box').text('aaa');  // 设置


$('.ipt').val();		// 获取
$('.ipt').val('aaa');   // 设置

示例代码（2）：
.html()：

$("p").html(function(n){
    return "这个 p 元素的 index 是：" + n;
    });

.text()：

$("p").text(function(n){
    return "这个 p 元素的 index 是：" + n;
    });

.val()：

$('input:text.items').val(function() {
  return this.value + ' ' + this.className;
});

---

6. 尺寸操作

• height([val])：取得匹配元素当前计算的高度值（px）。参数的意思是：设定CSS中 ‘height’ 的值，可以是字符串或者数字，还可以是一个函数，返回要设置的数值。函数接受两个参数，第一个参数是元素在原先集合中的索引位置，第二个参数为原先的高度。

示例如下：以 50 像素的幅度增加 p 元素的高度。

  $("button").click(function(){
    $("p").height(function(n,c){
    return c+50;
    });
  });

• width([val])：取得第一个匹配元素当前计算的宽度值（px）。设定CSS中 ‘width’ 的值，可以是字符串或者数字，还可以是一个函数，返回要设置的数值。函数接受两个参数，第一个参数是元素在原先集合中的索引位置，第二个参数为原先的宽度。

示例如下：以 50 像素的幅度增加 p 元素的宽度。

  $("button").click(function(){
    $("p").width(function(n,c){
    return c+10;
    });
  });

注意：以下所有示例的HTML代码为：

<p>Hello</p><p>world</p>

• innerHeight()：获取第一个匹配元素内部区域高度（包括补白、不包括边框）。此方法对可见和隐藏元素均有效。

var p = $("p:first");
$("p:last").text( "innerHeight:" + p.innerHeight() );

• innerWidth()：获取第一个匹配元素内部区域宽度（包括补白、不包括边框）。此方法对可见和隐藏元素均有效。

var p = $("p:first");
$("p:last").text( "innerWidth:" + p.innerWidth() );

• outerHeight()：获取第一个匹配元素外部高度（默认包括补白和边框）。此方法对可见和隐藏元素均有效。参数设置为 true 时，计算边距在内。

var p = $("p:first");
$("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );

• outerWidth()：获取第一个匹配元素外部宽度（默认包括补白和边框）。此方法对可见和隐藏元素均有效。参数设置为 true 时，计算边距在内。

var p = $("p:first");
$("p:last").text( "outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true) );

• offset([coordinates])：获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性：top 和 left，以像素计。方法只对可见元素有效。值对：比如 {top:100,left:0}

代码①：

var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );

代码②：

$("p:last").offset({ top: 10, left: 30 });

• position()：获取匹配元素相对父元素的偏移。返回的对象包含两个整型属性：top 和 left。此方法只对可见元素有效。

var p = $("p:first");
var position = p.position();
$("p:last").html( "left: " + position.left + ", top: " + position.top );

---