JavaScript库——jQuery基础及选择器

jQuery含义

1. Write less,do more! 写的很少 做的很多
2. jquery是一个快速，小巧而且功能丰富的JavaScript库（框架）。
   总结：jQuery是一个JavaScript函数库，是一个轻量级“写得少，做得多”的JavaScript库

jQuery作用

• HTML元素选取
• HTML元素操作
• css操作
• 事件函数
• JavaScript特效和动画
• DOM遍历
• ajax

jQuery目的

化大为小，化简为繁 ——简化代码，使得程序更加高效
主要代替繁琐的原生的JavaScript

优势

1. 轻量级
2. 强大的选择器
3. 出色的DOM操作及封装
4. 可靠的事件处理机制
5. 完善的ajax

通过ID获取一个HTML元素

JavaScript：

var obj = document.getElementById("id");

jQuery：

var obj = $("id");

将一个HTML元素隐藏

JavaScript：

document.getElementById("id").style.display="none";

jQuery：

var obj = $("id").hide();

把一个HTML元素宽度变成200px

JavaScript：

document.getElementById("id").style.width="200px";

jQuery：

var obj = $("id").css("width","200px");

页面就绪函数

js页面就绪函数

window.onload = function(){};

jQuery原始格式 原生版本

$(document).ready(function(){});

jQuery缩写 经典版本

版本一

$().ready(function(){});

版本二

$(function(){});

jQuery选择器

选择器

JavaScript

var obj = document.getElementById(“dom-id”);

jQuery

var obj = $(“#dom-id”);

返回的对象是jQuery对象，类似数组，每个元素都是引用DOM节点对象

特点

• 不会返回undefined或null
• 不必在下一行判断if(div===undefined)

选择器包含

包含：基本选择器、多项选择器、层级选择器、属性选择器、过滤器、表单相关、查找和过滤

基本选择器

ID选择器

#id
概念：根据给定的id匹配一个元素 选中的是数组
优先级高，效率最高

$(document).ready(function(){
			var div0 = $("#div0");
			console.log(div0);
  });

Element选择器

标签名
概念：根据给定的元素标签名匹配所有元素
$(this).index()确定第几个，运用隐式迭代
&(‘div’)[index]数组方式调用
效率相对差点，建议使用

$(document).ready(function(){
			var divs = $("div");
			console.log(divs);
  });

Class选择器

.class
概念：根据给定的css类名匹配元素
可以用共同的class值选中多个元素，也可以对独特的class值选中
class和id的不同在于，id不可以重复，class可以重复，表现层用class，行为层用id
效率相对差点，建议使用

$(document).ready(function(){
			var divs = $(".div");
			console.log(divs);
  });

通配符选择器

匹配所有元素
行为层慎用
效率最差，不建议

$(document).ready(function(){
			var divs = $("*");
			console.log(divs);
  });

多项选择器

$(“selector1,select2,selectN”);
将每一个选择器匹配到的元素合并后一起返回
可以指定任意多个选择器，并将匹配到的元素合并一个结果内
数组顺序会遵循html顺序，不会破坏原有的DOM结构

$(document).ready(function(){
			var divs = $("#first,div,.second");
			console.log(divs);
  });

层级选择器

祖孙后代选择器

$(“anscestor descendant”)
在给定的祖先元素下匹配所有后代

$(function(){
        var summaries = $("aside summary");
        console.log(summaries);
    });

子选择器

$(“parent>child”)
在给定父元素下匹配所有的子元素 子选择器的效率相对较高

$(function(){
        var summaries = $("aside>detail");
        console.log(summaries);
    });

兄弟选择器

$(“prev+next”)
匹配所有紧接在prev元素后的next元素

$(function(){
        var summaries = $("summary+ul");
        console.log(summaries);
    });

siblings 兄弟选择器

$(“prev~siblings”)
匹配prev元素之后的所有的siblings元素
重点是必须是同一个层级；不常用

 $(function(){
        var summaries = $("summary~details");
        console.log(summaries);
    });

子选择器和直接子选择器用的相对较多

属性选择器

[属性名] —— 属性名选择器

$(document).ready(function(){
            var all = $("[class]");
            console.log(all);
        });

[属性名 = value] —— 等于属性值

$(document).ready(function(){
            var all = $("[class=tool]");
            console.log(all);
        });

[属性名!=value] —— 不等于属性值

 $(document).ready(function(){
            var all = $("[class!=tool]");
            console.log(all);
        });

[属性名^=value] —— 以什么为开头

$(document).ready(function(){
            var all = $("[class^=tool]");
            console.log(all);
        });

[属性名$=value] —— 以什么为结尾

 $(document).ready(function(){
            var all = $("[class$=vs]");
            console.log(all);
        });

[属性名*=value] —— 包含属性值选择器

 $(document).ready(function(){
            var all = $("[class*=vs]");
            console.log(all);
        });

多个属性选择器 —— [selec1][selec2][select3]

 $(document).ready(function(){
            var all = $("[class][class*=lang][class$=y]");
            console.log(all);
        });

过滤器

概念：不会单独使用，必须在现有的选择器基础上进行新一轮的筛选

过滤器之child系列

1. :first-child 第一个孩子

$(function(){
       var divs = $("details>p:first-child");
       console.log(divs);
});

2. :last-child 最后一个孩子

$(function(){
       var divs = $("details>p:last-child");
       console.log(divs);
});

3. :nth-child(n) 第几个孩子

$(function(){
       var divs = $("details>p:nth-child(2)");
  //这里的2是正常顺序数的2
       console.log(divs);
});

4. :nth-last-child(n) 倒数第几个孩子

$(function(){
       var divs = $("details>p:nth-last-child(2)");
       console.log(divs);
});

5. :only-child 独生子 必须只有一个，和类型无关

$(function(){
       var divs = $("details>p:only-child");
       console.log(divs);
});

过滤器之type系列

1. :first-of-type

$(function(){
       var divs = $("details>p:first-of-type");
       console.log(divs);
});

2. :last-of-type

$(function(){
       var divs = $("details>p:last-of-type");
       console.log(divs);
});

3. :nth-of-type(n)

$(function(){
       var divs = $("details>p:nth-of-type(2)");
       console.log(divs);
});

4. :nth-last-of-type(n)

$(function(){
       var divs = $("details>p:nth-last-of-type(2)");
       console.log(divs);
});

5. :only-of-type

$(function(){
       var divs = $("details>p:only-of-type");
       console.log(divs);
});

过滤器的参数问题

:nth-of-type(even|odd|formula)

• n表示匹配子元素序号 – 必须是整数 – 从1开始
• Even表示匹配所有偶数元素
• Odd表示匹配所又得奇数元素
• Formula表示特殊公式（an+b）进行选择

$(function(){
        var ps = $("p:nth-of-type(3n)");
        console.log(ps);
              var ps1 = $("p:nth-of-type(2n)");
        console.log(ps1);
              var ps2 = $("p:nth-of-type(2n+1)");
        console.log(ps2);
});

表单相关

表单相关的选择器

• :input 可以选择input textarea select 和button

$(function(){
       var inputs = $(":input");
       console.log(inputs);
});

• :text 匹配所有得单行文本，和input[type=’text’]一样

$(function(){
        var texts = $(":text");
        console.log(texts);
});

• 其他得input得type:password/:radio/:checkbox/:image/:reset/:button/:file…

表单相关的表单状态

• :enabled – 匹配所有可用元素

$(function(){
        var enabled = $(":enabled");
        console.log(enabled);
});

• :disabled – 匹配所有得不可用元素

$(function(){
        var disabled = $(":disabled");
            console.log(disabled);
});

• :checked – 匹配所有选中得被选中得元素（复选框、单选框，select中得option）

$(function(){
        var checked = $(":checked");
        console.log(checked);
});

• :selected – 匹配所有选中得options元素

$(function(){
        var selected = $(":selected");
        console.log(selected);
});

注意：checked会选中selected，但selected不会选中checked

查找和过滤

1. find()

（ expr | object | element ）
概念：搜索所有与指定表达式匹配的元素
Find找出的不管是孩子还是孙子，只要满足表达式，都能找到；

$(function(){
        var js = $("aside").find(".javascript");
        console.log(js);
});

2. children()

（ [ expr ] ）
概念：取得一个包含匹配元素集合中每一个元素的所有子元素的元素集合
注意：children表示找到孩子，孙子以下不算；

$(function(){
        var js = $("aside").children("details");
        console.log(js);
});

3. parent()

（ [ expr ] ）
概念：取得一个包含所有匹配元素的唯一父元素的集合；

$(function(){
        var js_parent = js.parent();
        console.log(js_parent);
});

4. next()

（ [ expr ] ）
概念：取得一个包含匹配的元素集合中每一个紧邻的后面同辈元素的元素集合

$(function(){
        var less = $(".less");
        console.log(less);
            var sass = less.next();
            console.log(sass);
});

5. prev()

（ [ expr ] ）
概念：取得一个包含匹配的元素集合中每一个紧邻的前面同辈元素的元素集合

$(function(){
        var less = $(".less");
        console.log(less);
            var css = less.prev();
            console.log(css);
});

6. eq

（ index | -index ）
概念：获得当前链式操作中第N个jQuery对象
• 如果eq传入的是正数，那么显示正数第几个；
• 如果eq参数传入的是负数，就显示倒数第几个；
eq是正数 显示正数第几个

$(function(){
       var lis = $('li').eq(8);
         console.log(lis);
});

eq是负数 显示倒数第几个

$(function(){
       var lis = $('li').eq(-8);
         console.log(lis);
});

7. siblings()

（ [ expr ] ）
概念：取得一个包含匹配的元素集合中每一个元素的所有唯一同辈的元素集合

$(function(){
      var php = $('.php');
        console.log(php);
        var lis = php.siblings();
        console.log(lis);
});

8.过滤 – filter()

( expr | object | element | fn )
概念：筛选出与指定表达式匹配的元素集合

$(function(){
      var allLis = $('li');
        console.log(allLis);
        var python = allLis.filter('.python');
        console.log(python);
});

参数：

1. expr：字符串值，包含供匹配当前元素集合的选择器表达式
2. object：现有的jQuery对象，以匹配当前的元素
3. element：一个用于匹配元素的DOM元素
4. fn：一个函数用来作为测试元素的集合

$(function(){
      var obj = allLis.filter(function(index){
      console.log(index);
   });
});
//index 索引值