什么是jQuery，jQuery的特点。

什么是jQuery

流行的JavaScript库

简化JavaScript的开发，一些JavaScript库就诞生了，JavaScript库封装了很多预定义的对象和使用函数，能帮助使用者建立高难度交互的web2.0特性的富客户端页面，并且兼容各大浏览器，jQuery 极大地简化了 JavaScript 编程。

JQuery特点

轻量级：封装后的库不到100k下载快

强大的选择器：快速查找Dom元素

隐式遍历(迭代)：一次操作多个元素

读写和一读数据/写数据用的是同一个函数

链式调用

事件处理

Dom操作

样式操作

动画

浏览器兼容

丰富的插件支持

jQuery的下载

访问jquery官网 来进行对jquery文件复制 再编辑器中新建一个js文件粘贴进去

jQuery官网：jQuery

jQuery的引入使用

jQuery的三种使用方法

    <script>
        //相当于Jquery
        //第一种写法
        $(document).ready(function(){

        })

        //第二种写法
        $().ready(function(){

        })
        //第三种写法
        $(function(){
            //编写功能代码实现
        })
</script>

$符即jquery

在head标签中使用<script src="XXXX"></script>进行引入，src为文件路径，这个script标签中不能写js代码 不能写js代码 不能写js代码

js代码应在一个新的script标签中写

jQuery入口函数

jquery代码执行时不需要等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jquery已经做好了封装，不同于原生jsload事件：等页面文件、外部的js文件、css文件，图片等加载完毕才执行内部代码

//第一种写法
$(document).ready(function(){})
//第二种写法
$().ready(function(){})
//第三种写法
$(function(){})

将Dom对象转换为jQuery对象

jQuery对象与Dom对象转换

//获取dom元素
var div0 = docuement.querySelectorAll("div")
//获取jquery对象
var div1 = $("div")
​
//Dom对象转换为jquery对象
$(div0)
//jquery对象转换为Dom对象
//第一种
var div1 = $(div1[0])
//第二种
var div1 = $(div1.get(0))

jQuery基本选择器

id选择器：$("#id") 获取指定id元素

类选择器：$(".className") 获取所有类名相同元素

标签选择器：$("div") 获取所有div元素

并集选择器：$("div,p") 获取所有div元素和p元素

交集选择器：$("div.blue") 获取class为blue的div元素

层次选择器

子代选择器：$("ul>li") 仅包括子级li标签

后代选择器：$("ul li") 包括ul下的所有li标签

---

属性选择器

基本属性选择器

$("input[checked]") 获取checked选中的标签

$("input[name='username']") 获取input的name属性等于username的标签

$("input[name!='username']") 获取input的name属性不包含username的标签

$("div[class^='b']") 获取类名以b开始的标签

$("div[class*='z']") 获取类名包含z的标签

---

操作标签的属性

标签属性方法 attr(name)/attr(name,value) 读/写非布尔值的标签属性

标签属性方法 prop(name)/prop(name,value) 读/写布尔值的标签属性

删除属性方法 removeAttr(name)/removeProp(name) 删除指定名字属性

自定义属性方法 data() 读写标签的附加数据（data-*属性）

---

过滤选择器

div:eq(index) 获取索引为index的元素

div:odd 获取索引为奇数的元素

div:even 获取索引为偶数的元素

div:first 获取第一个元素

div:last 获取最后一个元素

div:gt(index) 获取索引大于index的元素

div:lt(index) 获取索引小于index的元素

div:not(selector) 去除某一个元素

---

筛选选择器

:contains('12') 如果元素中有某个内容则获取该元素

:has('p') 如果元素中有某个标签时则获取该元素

:empty 获取空元素或者不包含子元素的标签

:parent 获取含有子元素或文本的标签

---

筛选选择器（方法）

方法	使用	描述
children(selector)	$("ul").children("li")	相当于$("ul>li"),子类选择器
find(selector)	$("ul").find("li")	相当于$("ul li"),后代选择器
siblings(selector)	$("#first").siblings("li")	获取兄弟节点，不包括本身
parent()	$("#first").parent()	查找父亲元素
eq(index)	$("li").eq(2)	查找索引为2的li元素
next()	$("li").next()	下一个兄弟
prev()	$("li").prev()	上一个兄弟

CSS多个样式设置

    <script>
        $(function(){
            //第一种
            $("div").click(function(){
                $(this).css({
                    "color":"red",
                    "font-size":"20px"
                })
            //第二种
                $(this).css("color","red").css("font-size","20px")
            })
        })
    </script>