jQuery语言精粹
一.jQuery 是一个 JavaScript 函数库。
jQuery 库包含以下特性：
1.HTML 元素选取
2.HTML 元素操作
3.CSS 操作
4.HTML 事件函数
5.JavaScript 特效和动画
6.HTML DOM 遍历和修改
7.AJAX(**Asynchronous JavaScript and XML** 译为（异步的[JavaScript](https://zh.wikipedia.org/wiki/JavaScript)与[XML](https://zh.wikipedia.org/wiki/XML)技术）)
8.Utilities(实用工具,设备)
11.jpg
- jQ语法是XPath(XML路径语言,在XML文档中查找信息的语言)与css选择器语法的组合
- jQuery基础语法$(selector).action()实例
$(this).hide()- 隐藏当前元素 - 文档就绪函数
$(document).ready(function(){
--- jQuery functions go here ----
});
也可写成
$(function(){
})```
>* jQuery选择器
* 元素选择器(css)
1.$("p") 选取 < p > 元素。
2.$("p.intro") 选取所有 class="intro" 的 < p > 元素。
3.$("p#demo") 选取所有 id="demo" 的 < p > 元素。
* 属性选择器(XPath)
1.$("[href]") 选取所有带有 href 属性的元素。
2.$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
3.$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
4.$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
* 解除jQuery名称冲突(自定义名称)
>jQuery 使用 $ 符号作为 jQuery 的简介方式。
某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。
jQuery 使用名为 noConflict() 的方法来解决该问题。
*var jq=jQuery.noConflict()*，帮助您使用自己的名称（比如 jq）来代替 $ 符号。
>#####二.jQ效果
* 隐藏/显示语法hide(),show().toggle()
语法
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);
实例
$("button").click(function(){
$("p").toggle();
});
***可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
toggle是显示/隐藏转换***
* 淡入淡出 fadeIn(),fadeOut(),fadeToggle() , fadeTo()
** fadeTo()** 语法
$(selector).fadeTo(speed,opacity,callback);
**其余三个同显示/隐藏**
* 滑动slideDown(),slideUp(),slideToggle()
**语法同显示/隐藏**
* 效果 - 动画(允许创建自定义动画)animate()
语法
`$(selector).animate({params},speed,callback);`
**params 参数定义形成动画的 CSS 属性**
定义多个属性动画实例
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
######注意:用驼峰写法,颜色动画要下 Color Animations 插件
* 停止动画 (方法用于在动画或效果完成前对它们进行停止)stop()
语法
`$(selector).stop(stopAll,goToEnd);`
######可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
######可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
######因此，默认地，stop() 会清除在被选元素上指定的当前动画。
* chaining链锁
语法
`$("#p1").css("color","red").slideUp(2000).slideDown(2000);`
实例
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
#####三.jQuery HTML
>* 获得内容和属性text()、html() 以及 val()
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
实例
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
$("#btn1").click(function(){
alert("Value: " + $("#test").val());
});
* 设置内容和属性
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
实例
$("#btn1").click(function(){
$("#test1").text("哈哈!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("你好");
});
* 添加元素
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
实例
`$("p").append("Some appended text.");`
* 删除元素
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
语法同上
* 获取并设置 CSS 类
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
* css() 方法
实例
`$("p").css("background-color","yellow");`
* 尺寸
通过 jQuery，很容易处理元素和浏览器窗口的尺寸。
jQuery 尺寸 方法
width()设置或返回元素的宽度（不包括内边距、边框或外边距）。
height()方法设置或返回元素的高度（不包括内边距、边框或外边距）。
innerWidth()方法返回元素的宽度（包括内边距）。
innerHeight()方法返回元素的高度（包括内边距）。
outerWidth()方法返回元素的宽度（包括内边距和边框）。
outerHeight()方法返回元素的高度（包括内边距和边框）。
实例
$("button").click(function(){
var txt="";
txt+="Outer width: " + $("#div1").outerWidth() + "</br>";
txt+="Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
#####四.遍历
>* 遍历
* 祖先parent(),parents(),parentsUntil()
parent() 方法返回被选元素的直接父元素。
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
实例之一
$(document).ready(function(){
$("span").parents("ul");
});
* 后代children(),find()
children() 方法返回被选元素的所有直接子元素。
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
实例
$(document).ready(function(){
$("div").children("p.1");
});
* 同胞siblings(),next(),nextAll(),nextUntil(),prev(),prevAll(),prevUntil()
siblings() 方法返回被选元素的所有同胞元素。
next() 方法返回被选元素的下一个同胞元素。
nextAll() 方法返回被选元素的所有跟随的同胞元素。
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。
实例
$(document).ready(function(){
$("h2").siblings("p");
});
* 过滤first(), last() , eq(),filter() 和 not()
first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。
实例
$(document).ready(function(){
$("div p").first();
});
filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
实例
$(document).ready(function(){
$("p").not(".intro");
});
