Write Less,Do More.

初识jQuery

What?

一个优秀的JS函数库，封装DOM和BOM / Ajax

应用很广，中大型WEB项目开发首选

Why?

HTML元素选取（选择器），jQuery扩展选择器查找标签
HTML元素操作
CSS操作
HTML事件处理，用户交互
JS动画效果
链式调用，a().b().c()
读写合一,使用一个方法读或者写某一个元素
浏览器兼容
易扩展插件
ajax封装
..........

How?

引入jQuery库（js文件）
使用jQuery
- 使用jQuery核心函数($/jQuery)
- jQuery核心对象：执行 $("#btn2")返回的对象
jQuery库的两种引入方式
- 服务器本地库，即src绝对路径
- CDN远程库

jQuery的两把利器

jQuery核心函数：直接可用
- jQuery库向外直接暴露的就是**$/jQuery**这两个函数，但指向是同一个函数,其他都看不见
- 引入jQuery库后，直接使用$
  - 当函数用：$(xxxx)
  - 当对象用：$.xxx()
jQuery核心对象
- 得到jQuery对象：执行jQuery函数返回的对象
- 使用jQuery对象：$obj.xxx()

jQuery核心函数

可以作为函数（用（））或者对象（调用方法）使用

作为函数调用：$(xxx)

参数为函数，当DOM加载完成后，执行此回调函数，一般不用
参数为选择器字符串：查找所有匹配的标签，并将它们封装为jQuery对象
参数为DOM对象：将DOM对象封装成jQuery对象，对其操作

参数为html标签字符串（较少）：创建标签对象并封装成jQuery对象

//函数调用参数为函数
$(function(){
    //选择器字符串
    $("#btn1").click(function(){
        //绑定事件监听
        alert($(this).html())//DOM对象转为jQuery对象并调用其方法
        $("<input type="text" name="msg3">").appendTo("div") //将input塞进div标签内
    })
})

作为对象使用：$.xxx()

$.each():隐式遍历对象/数组

var arr = [1,2,5]
$.each(arr,function(index,item){
    alert(index,item)
})

$.trim():去除两端空格
```
var str = "  aaa  "
$.trim(str)
```

使用jQuery核心函数

选择器

说明：选择器本身只是一个有特定语法规则的字符串，没有实质用处。它的基本语法规则使用的就是CSS的选择器语法，并对其进行了扩展，只有调用$，并将选择器字符串作为参数传入才能起作用。

$(selector):根据选择器规则在整个文档中查找所有匹配的标签的数组（伪），并封装为jQuery对象

基本选择器

#id
element
.class
selector1，selector2，selectorN（并集）

selector1selector2selectorN（交集）找含有某种属性的元素

//选择id为div1的元素
$("#div1").css("background","red")//多个用对象.css({})
//选中所有div元素
$("div").css("background","red")
//选择所有class属性为box的元素
$(".box").css("background","red")
//选择所有的div和span元素
$("div,span").css("background","red")
//选择所有class属性为box的div元素
$("div.class").css("background","red")
//所有元素包括body
$("*").css("background","red")

层次选择器

查找子元素，后代元素，兄弟元素的选择器

ancestor descendant
parent > child
prev + next

prev ~ siblings（匹配prev元素之后的所有siblings（兄弟）元素）

//选中ul下的所有span 所有层
$("ul span").css("background","red")
//选择ul下所有的子元素span
$("ul>span").css("background","red")//子元素是ul内第一层的所有span，而不是多层里的
//选中clas为box的下一个li
$(".box + li").css("background","red")
//选中ul下的属性为box的元素后面的所有兄弟元素 
$("ul .box~*").css("background","red")

过滤选择器

在原有选择器匹配器的元素中进一步进行过滤的选择器,多个过滤选择器顺序执行！

基本
内容
可见性

属性

//选中第一个div
$("div:first").css("background","red")//先选中所有div再过滤出第一个
//选中最后一个class为box的元素
$(".box:last").css("background","red")
//选择所有class不为box的div
$("div:not(.box)").css("background","red")//没有class属性也行
//找某一个
$(".box:eq(index)").css("background","red")
//选择第二个和第三个li
$("li:gt(0):lt(2)").css("background","red")//顺序过滤a:b:c,gt()大于下标的元素，lt()小于下标的元素
//$("li:lt(3):gt(0)").css("background","red")
//选择内容为xxx的li
$("li:contains("xxx")").css("background","red")
//选择隐藏(dispaly:none)的li
console.log($("li:hidden").length,$("li:hidden")[0])//visible
//选择有title属性名的li
$("li[title]").css("background","red")
//选择所有属性为title为hello的li
$("li:[title = "hello"]").css("background","red")//hello双引号可加可不加

表单选择器

  //选择不可用的文本输入框
  $(":text:disabled").css("background","red")
  //选择显式爱好的个数
  $(":checkbox:checked").length
  //显式选择的城市的名称
  $(":submit").click(function(){
      var city = $("select>option:selected").html()
      console.log(city)
  })

jQuery核心对象

理解：jQuery对象内部包含的是DOM元素对象的伪数组（可能只有一个元素），该对象拥有很多有用的属性和方法，让程序员能更加方便的操作DOM

【注】jQuery对象与DOM元素对象方法不一样！

属性/方法

基本行为

size（）/ length ：DOM元素个数
[index] / get(index) ：根据下标获取对应DOM元素
each()：遍历包含的所有DOM元素，注意与$.each()区分

index()：得到在所在兄弟元素中的下标

//统计button个数
var $btns = $("button")//伪数组
console.log($btns.length,$btns.size())//4
//取出第二个button
$btns[1].innerHTML//$btns[1]，这是DOM元素。已经取出来了，所以能用innerHTML方法
//输出所有button文本
$btns.each(function(inex,domEle){
    console.log(index，domEle.innerHTML，this)//this是对应DOM元素就等同于domEle
    //简便写法：console.log(this)
})
//输出某个按钮是所有按钮的第几个
console.log($("#btn3").index())//2

伪（类）数组

Object对象
length属性
数值下标属性
没有数组的特有方法：forEach()，push（），pop（）

//定义一个伪数组
var fArr = {}
fArr.length = 0
fArr[0] = "a"
fArr.length = 1
fArr[1] = "b"
fArr.length = 2
for (var i = 0;i<fArr.length;i++){
    var obj = fArr[i]
    console.log(i,obj)
}
console.log(fArr.forEach)//false

$_工具方法

$.each()：遍历数组或对象中的数据
$.trim()：去除字符串两边的空格
$.type(obj)：得到数据的类型
$.isArray(obj)：判断是否是数组
$.isFunction(obj)：判断是否是函数
$.parseJSON(json)：解析json字符串转换为js对象/数组

//$.each() 遍历对象
var obj = {
    name:"a",
    setName:function(name){
        this.name = name
    }
}
$.each(obj,function(key,value){
    console.log(key,value)
})
//$.type($)  function
//$.isArray($("a")) false
//$.parseJSON(json)
var json = '{"name":"Tom","age":12}'//json对象
var josn1 = '['{"name":"Tom","age":12}','{"name":"jack","age":12}']'//json数组
//json对象/数组===>js对象/数组
$.parseJSON(json)
JSON.parse(jsonString)//json对象/数组===>js对象/数组
JSON.stringify(jsObject/jsArray)//js对象/数组===>json对象/数组

jQuery对象属性

//读取第一个div的title属性
$('div:first').attr('title')
//给所有div设置name属性
$('div').attr('name'，'a')
//移除所有div的title属性
$('div').removeAttr('title')//removeProp()
//给所有div设置class='aaa'
$('div').attr('class','aaa')
//给所有div添加class='bbb'，bbb对应css中的类名其中可以有样式
$('div').addClass('bbb')//attr是设置会覆盖，添加是累加的过程
//移除所有div的aaa的class
$('div').removeClass('class','aaa')
//得到最后一个li的标签文本
$('li:last').html()//注意是标签体文本，并不是纯文本，可能是<span>asv</span>
//设置第一个li的标签体为"<h1>aaa</h1>"
$('li:first').html('<h1>aaa</h1>')
//得到输入框的value
$(':text').val()//注意与DOM的value方法区分
//将输入框的值设置为abc 
$(':text').val('abc')//读写合一
//点击'全选'按钮，实现全选
//attr():操作属性值不为布尔值的属性
//prop():专门操作属性值为布尔值的属性
var $checkboxs = $(':checkbox')
$('button:first').click(function(){    //property
    $checkboxs.prop('checked',true)
})
//点击'全不选'按钮，实现全不选
var $checkboxs = $(':checkbox')
$('button:last').click(function(){
    $checkboxs.prop('checked',false)
})

jQuery核心知识点总结