jQuery核心技术 (一)
jQuery教程
jQuery简介
jQuery是一个快速、简洁的JavaScript框架，是一个优秀的JavaScript库。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互
jQuery功能
-HTML 元素选取
-HTML 元素操作
-CSS 操作
-HTML 事件函数
-JavaScript 特效和动画
-HTML DOM 遍历和修改
-AJAX
-Utilities
jQuery的安装
下载 jQuery，jQuery有两个版本
-Production version - 用于实际的网站中，已被精简和压缩。
-Development version - 用于测试和开发（未压缩，是可读的代码）
引用jQuery
将下载的jQuery文件放在网页的同一目录下，使用jQuery。
<head>
<script src="jquery-1.10.2.min.js">script>
head>jQuery语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(选择器).动作()
jQuery入门例子
//引入jquery
<script type="text/javascript" src="jQuery/jquery-3.2.1.js">script>
<body>
<input id="username" type="text" value="zhangsan" >
<script type="text/javascript">
var n=$("#username"); //获取id为username的jQuery对象
alert(n.val()); //val函数为获取value属性的值
script>
body>文档就绪事件
我们的js代码都需要等文档加载完毕后才开始执行js代码。
在jQuery中，所有 jQuery 函数位于一个 document ready 函数中，这是文档就绪事件。
$(document).ready(function(){
// 开始写 jQuery 代码...
});将dom对象转换成jQuery对象
<script type="text/javascript" src="jQuery/jquery-3.2.1.js">script>
<body>
<input id="username" type="text" value="zhangsan" >
<script type="text/javascript">
//获取的是dom对象
var n=document.getElementById("username");
//将dom对象转换成jQuery对象 语法：$(dom对象) 建议：jQuery对象以$符开头命名
var $n=$(n);
alert($n.val());
script>
body> 将jQuery对象转换成dom对象
jQuery内部是一个数组，比如我们获取所有文本框，然后得到一个jQuery对象，其实这个对象内部是数组。
<body>
<input id="username" type="text" value="zhangsan" >
<script type="text/javascript">
var n=document.getElementById("username");
//获取jQuery对象
var $n=$(n);
//两种方式，将JQuery对象转换成dom对象
var n1=$n[0]; //直接使用数组下标获得dom对象
var n2=$n.get(0);//使用jQuery对象的get方法
alert(n1.value);
alert(n2.value);
script>
body> jQuery选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。
1. id选择器
语法：$(“#id”) 通过id获取指定元素 。
2. 元素选择器
语法：$(“input”):通过标签名获得元素。
3. 类选择器
语法：$(“.class”):通过class属性来获取元素。
基础选择器例子
例子：传统的js中点击事件需要按钮的onClick()方法指定js函数。jquery能将两者给分离开
<script type="text/javascript">
$(document).ready(function(){
//使用id选择器
$("#btn1").click(function(){
alert("hello world");
});
});
script>
head>
<body>
<input type="button" id="btn1" value="按钮">
body>
其他的几个选择器都差不多，可以自己下去练习。 4. 层级选择器
A B：获取A元素内部所有的B元素，也包括B元素的子元素
A >B: 获取A元素内部所有的B子元素
A +B: 获取A元素后面的第一个兄弟B （平级）
A ~B: 获取A元素后面的所有兄弟B
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
//选择ul1元素所有的li元素
$("#ul1 li").css("background-color","red");
});
});
script>
head>
<body>
<ul id="ul1">
<li>1li>
<li>2li>
<li>3li>
ul>
<ul id="ul2">
<li>一li>
<li>二li>
<li>三li>
ul>
<br>
<input type="button" id="btn1" value="按钮1">
body> 5. 基本过滤选择器
:first 第一个元素
:last 最后一个元素
:eq(index) 获得指定索引的元素
:gt(index) 大于指定索引的元素
:lt(index) 小于指定索引的元素
:even 查找索引为偶数的元素，从0开始
:odd 查找索引为奇数的元素
:not(selector) 去除所有与给定选择器匹配的元素
例如：
$("li:first") //第一个li
$("li:last") //最后一个li
$("li:even") //挑选下标为偶数的li
$("li:odd") //挑选下标为奇数的li
$("li:eq(4)") //下标等于4的li
$("li:gt(2)") //下标大于2的li
$("li:lt(2)") //下标小于2的li
$("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
//选择最后一个ul元素
$("ul:last").css("background-color","red");
});
});
script>
head>
<body>
<ul id="ul1">
<li>1li>
<li>2li>
<li>3li>
ul>
<ul id="ul2">
<li>一li>
<li>二li>
<li>三li>
ul>
<br>
<input type="button" id="btn1" value="按钮1">
body> 6. 内容过滤选择器
:empty 选择为空的元素(是否有标签体，包括子元素，文本等)
:has(selector) 选择含有指定的子元素的元素
:parent 当前元素是否是父元素
:contains(text) 选择含有指定的文本的元素
例子1：
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
//选择含有文本123的div将其背景色变为红色
$("div:contains('123')").css("background-color","red");
});
});
script>
head>
<body>
<div>
123
div>
<input type="button" id="btn1" value="按钮">
body>例子2：
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
//选择含有input子元素的div 将其背景色改为红色
$("div:has('input')").css("background-color","red");
});
});
script>
head>
<body>
<div>
<input/>
div>
<input type="button" id="btn1" value="按钮">
body>7. 可见性过滤选择器
:hidden 选取隐藏的元素
:visible 选取可见的元素
例子1：
<script type="text/javascript">
$(document).ready(function(){
//点击按钮1使可见的div背景色变为黑色
$("#btn1").click(function(){
$("div:visible").css("background-color","black");
});
//点击按钮2使隐藏的div背景色变为红色，并且显示 jQuery的show()方法为显示隐藏的元素
$("#btn2").click(function(){
$("div:hidden").css("background-color","red").show();
});
});
script>
head>
<body>
<div style="width:100px;height:100px;background:red;">div>
<div style="display:none;width:100px;height:100px;">div>
<input type="button" id="btn1" value="按钮1">
<input type="button" id="btn2" value="按钮2">
body>例子2：
<script type="text/javascript">
$(document).ready(function(){
//遍历所有隐藏的input元素的值 each是进行遍历的方法
$("#btn1").click(function(){
$("input:hidden").each(function(){
alert($(this).val());
});
});
});
script>
head>
<body>
<input type="hidden" value="1">
<input type="hidden" value="2">
<input type="hidden" value="3">
<input type="button" id="btn1" value="按钮1">
body>8. 属性选择器
[属性名] 获取指定属性名的元素
[属性名=值] 获取属性名等于指定值的元素
[属性名!=值] 获取属性名不等于指定值的元素
[属性名^=值] 获得以指定属性值开头的元素
[属性名$=值] 获得以指定属性值结尾的元素
[属性名*=值] 获得含有属性值的元素
[a1][a2][a3] 复合选择器，多个条件同时成立
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
//打印含有class属性的input元素的值
alert($("input[class]").val());
});
});
script>
head>
<body>
<input type="text" "id="i1" class="1" value="1">
<br>
<input type="text" id="i2" value="2">
<br>
<input type="button" id="btn1" value="按钮">
body>9. 子元素过滤选择器
:nth-child(index) 选择指定索引的子元素
:first-child 选择第一个子元素
:last-child 选择最后一个子元素
:only-child 选择只有一个子元素的元素
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
//选择class为one的第三个子元素
//如果元素没有任何条件，可以直接写 例如 “div:nth-child(2)”
//如果元素有条件，则必须在中间加空格 例如 "div[class='one'] :last-child"
$("div[class='one'] :nth-child(3)").css("background-color","white");
});
});
script>
head>
<body>
<div class="one" style="width:100px;height:100px;background:gray;">
<div style="width:10px;height:10px;background:red;" id="1">div>
<br>
<div style="width:10px;height:10px;background:yellow;" id="2"/>div>
<br>
<div style="width:10px;height:10px;background:blue;" id="3"/>div>
div>
<br>
<div>
<input type="button" id="btn1" value="按钮1">
div>
body>10. 表单元素选择器
:input 所有的表单元素(包括,