1、jQuery简介
［1］ jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多javascript高手加入其team。
［2］ jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!
［3］ 它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器
［4］ jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。
［5］ jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
2、jQuery对象
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法
$("#test").html()
意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法
这段代码等同于用DOM实现代码： document.getElementById(" test").innerHTML;
虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错
约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$.
var $variable = jQuery 对象
var variable = DOM 对象
$variable[0]：jquery对象转为dom对象
$("#msg").html() //jquery代码实现
$("#msg")[0].innerHTML //DOM代码实现
3、寻找元素（选择器和筛选器）
【1】选择器
基本选择器：
$("*") 通配符（全部）
$("#id") id选择器
$(".class") class选择器
$("element") 标签选择器
$(".class,p,div") 组合选择器
层级选择器：
$(".outer div") 后代元素选择器
$(".outer>div") 子元素选择器
$(".outer+div") 毗邻元素选择器
$(".outer~div") 普通兄弟选择器
基本筛选器
$("li:first") 筛选第一个li标签
$(“li:last”) 筛选最后一个li标签
$("li:eq(2)") 筛选第3个li标签
$("li:even") 筛选排序为奇数的li标签（隔行筛选）
$("li:gt(1)") 筛选排序大于1的li标签
属性选择器
$(‘[id="div1"]‘)
$(‘["alex="sb"][id]‘)
表单选择器：只适用于表单标签
$("[type=‘text‘]") 等同于$(":text")
注意只适用于input标签 : $("input:checked")
【2】筛选器
过滤筛选器
$("li").eq(2) 筛选第2个li标签（推荐使用，方便传参）
$("li").first() 筛选第1个li标签
$("ulli").hasclass("test") 筛选class中含有test的ul、li标签
查找筛选器
查找子标签：
$("div").children(".test") //找儿子标签的test
$("div").find(".test") //找所有后代标签中的test
向下查找兄弟标签：
$(".test").next() $(".test").nextAll()
$(".test").nextUntil() //开区间查找，不含尾
向上查找兄弟标签：
$("div").prev() $("div").prevAll() $("div").prevUntil()
查找所有兄弟标签：
$("div").siblings()
查找父标签：
$(".test").parent()
$(".test").parents() 找所有父标签，到html
$(".test").parentUntil(“.outer”) 查找父标签（不含outer）
4、文本操作
Jquery事件绑定
$(“.p1”).click(function (){
alert(123)
})
练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<p class="p1">P1</p>
<p class="p1">P2</p>
<p class="p1">P3</p>
<p class="p1">p4</p>
<script>
// DOM对象转为Jquery对象 $(DOM对象)
$("p").click(function () {
console.log($(this));
// 取值操作
//alert($(this).html());
//alert($(this).text())
// 赋值操作
$(this).html("<a href=‘‘>hello</a>")
//$(this).text("<a>hello</a>")
})
</script>
</body>
</html>本文出自 “lyndon” 博客，请务必保留此出处http://lyndon.blog.51cto.com/11474010/1976510
原文地址：http://lyndon.blog.51cto.com/11474010/1976510
