一：简介
jQuery是免费、开源的。jQuery已经成为最流行的javascript库。 jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。
二：基本语法
<script type="text/javascript">
//js 执行时，有加载顺序
/* jQuery获得数据
* * 语法：$("选择器") == jQuery("选择器")
*
*/
var username = $("#username");
// * val()函数 用于获得 value属性的值
alert(username.val());
</script>
三：JQuery与DOM对象的转换
<script type="text/javascript">
//1 使用javascript获得value值
var username = document.getElementById("username");
//alert(username.value);
//2 将 dom对象转换 jQuery对象
// * 语法：$(dom对象)
// * 建议：jQuery对象变量名，建议为$开头
var $username = $(username);
// alert($username.val());
//3 将 jQuery对象转换 dom对象
//3.1 jQuery对象内部使用【数组】存放所有的数据，可以数组的下标获取（索引）
var username2 =$username[0];
alert(username2.value);
//3.2 jQuery提供函数 get() 转换成dom对象
var username3 =$username.get(0);
alert(username3.value);
</script>
三：选择器
3.1 基本选择器
<script type="text/javascript">
$(document).ready(function(){
}); // 这这个就是加载页面 类似于window.onlad
// <input type="button" value="选择 id为 one 的元素." id="btn1"/>
$(document).ready(function() {
$("#btn1").click(function() {
$("#one").css("background-color","#ff0");
});
// <input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
$("#btn2").click(function(){
$(".mini").css("background-color","#ff0");
});
// <input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
$("#btn3").click(function(){
$("div").css("background-color","#ff0");
});
//// <input type="button" value="选择 所有的元素." id="btn4"/>
$("#btn4").click(function(){
$("*").css("background-color","#ff0");
});
// <input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>
$("#btn5").click(function(){
$("span,#two").css("background-color","#ff0");
});
});
</script>
3.2层级
<script type="text/javascript">
$(document).ready(function(){
//<input type="button" value="选择 body内的所有div元素." id="btn1"/>
$("#btn1").click(function(){
$("body div").css("background-color","red");
// div元素里的也算
});
// <input type="button" value="在body内,选择子元素是div的。" id="btn2"/>
$("#btn2").click(function(){
$("body>div").css("background-color","red"); // 只算div元素
});
// <input type="button" value="选择 id为one 的下一个div元素." id="btn3"/>
$("#btn3").click(function(){
$("#one+div").css("background-color","red");
});
// <input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/>
$("#btn4").click(function(){
$("#two~div").css("background-color","red");
});
// <input type="button" value="选择 id为two的元素的所有div兄弟元素." id="btn5"/>
// 要用到筛选
$("#btn5").click(function(){
$("#two").siblings("div").css("background-color","red");
});
});
</script>
3.3基本过滤
<script type="text/javascript">
$(document).ready(function(){
//<input type="button" value="选择第一个div元素." id="btn1"/>
$("#btn1").click(function(){
$("div:first").css("background-color","red");
});
//<input type="button" value="选择最后一个div元素." id="btn2"/>
$("#btn2").click(function(){
$("div:last").css("background-color","red");
});
//<input type="button" value="选择class不为one的 所有div元素." id="btn3"/>
$("#btn3").click(function(){
$("div:not('.one')").css("background-color","red");
});
//<input type="button" value="选择索引值为偶数 的div元素." id="btn4"/>
$("#btn4").click(function(){
$("div:even()").css("background-color","red");
});
//<input type="button" value="选择索引值为奇数 的div元素." id="btn5"/>
$("#btn5").click(function(){
$("div:odd()").css("background-color","red");
});
//<input type="button" value="选择索引值等于3的元素." id="btn6"/>
$("#btn6").click(function(){
$("div:eq(3)").css("background-color","red");
});
//<input type="button" value="选择索引值大于3的元素." id="btn7"/>
$("#btn7").click(function(){
$("div:gt(3)").css("background-color","red");
});
//<input type="button" value="选择索引值小于3的元素." id="btn8"/>
$("#btn8").click(function(){
$("div:lt(3)").css("background-color","red");
});
//<input type="button" value="选择所有的标题元素." id="btn9"/>
$("#btn9").click(function(){
$(":header").css("background-color","red");
});
//<input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/>
$("#btn10").click(function(){
$(":animated").css("background-color","red");
});
//<input type="text" value="请输入账号" defaultValue="请输入账号" />
//<input type="text" value="请输入密码" defaultValue="请输入密码"/>
// 实现功能
$("input[type='text']").on("blur focus",function(){ // 获得帐号密码的文本框
// 现获取默认值
var mr = $(this).attr("defaultValue");
// 判断是否是获取到焦点，
if($(this).is(":focus"))
{
// 如果为空则进行默认值
if($(this).val() ==mr)
{
$(this).val("");
$(this).css("color","#000");
}
}
else // 若不是
{
// 如果不为空，则不进行清空
if($(this).val() == "")
{
$(this).val(mr);
$(this).css("color","#999");
}
}
// 在html5中 ， 一句话就搞定
// 在119行 placeholder
});
});
</script>
3.4内容过滤
<script type="text/javascript">
$(document).ready(function(){
// <input type="button" value="选取含有文本“di”的div元素." id="btn1"/>
$("#btn1").click(function(){
$("div:contains('di')").css("background-color","red");
});
// <input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn2"/>
$("#btn2").click(function(){
$("div:empty").css("background-color","red");
});
// <input type="button" value="选取含有class为mini元素 的div元素." id="btn3"/>
$("#btn3").click(function(){
$("div:has('.mini')").css("background-color","red");
});
//<input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn4"/>
// 意思就是自己是父元素，里面包含别的
$("#btn4").click(function(){
$("div:parent").css("background-color","red");
});
});
</script>
3.5可见性过滤（★）
<script type="text/javascript">
$(document).ready(function(){
// <input type="button" value=" 选取所有可见的div元素" id="b1"/>
$("#b1").click(function(){
$("div:visible").css("background-color","red");
});
// <input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来" id="b2"/>
$("#b2").click(function(){
$("div:hidden").css("background-color","red").show(1000);
});// 显示出来
// <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b3"/>
$("#b3").click(function(){
$("input:hidden").each(function(){
alert($(this).val() );
});
});
// <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b4"/>
$("#b4").click(function(){
$("input:hidden").each(function(){
alert($(this).val() );
});
});
});
</script>
3.6属性选择器
<script type="text/javascript">
$(document).ready(function(){
// <input type="button" value="选取含有 属性title 的div元素." id="btn1"/>
$("#btn1").click(function(){
$("div[title]").css("background","red");
});
// <input type="button" value="选取 属性title值等于“test”的div元素." id="btn2"/>
$("#btn2").click(function(){
$("div[title='test']").css("background","red");
});
// <input type="button" value="选取 属性title值不等于“test”的div元素(没有属性title的也将被选中)." id="btn3"/>
$("#btn3").click(function(){
$("div[title!='test']").css("background","red");
});
// <input type="button" value="选取 属性title值 以“te”开始 的div元素." id="btn4"/>
$("#btn4").click(function(){
$("div[title^='te']").css("background","red");
});
// <input type="button" value="选取 属性title值 以“est”结束 的div元素." id="btn5"/>
$("#btn5").click(function(){
$("div[title$='est']").css("background","red");
});
// <input type="button" value="选取 属性title值 含有“es”的div元素." id="btn6"/>
$("#btn6").click(function(){
$("div[title*='es']").css("background","red");
});
// <input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有“es”的元素." id="btn7"/>
$("#btn7").click(function(){
$("div[id][title*='es']").css("background","red");
});
});
</script>
3.7子元素过滤
<script type="text/javascript">
$(document).ready(function(){
// <input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/>
$("#btn1").click(function(){
// 在div加元素后，一定加空格 否则不可以实现
// 不加空格就是本身div的样式；
$("div[class='one'] :nth-child(2)").css("background-color","red");
});
// <input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/>
$("#btn2").click(function(){
$("div[class='one'] :first-child").css("background-color","red");
});
// <input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/>
$("#btn3").click(function(){
$("div[class='one'] :last-child").css("background-color","red");
});
// <input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4"/>
$("#btn4").click(function(){
$("div[class='one'] :only-child").css("background-color","red");
});
});
</script>
3.8 表单对象属性过滤
<script type="text/javascript">
$(document).ready(function(){
// <button id="btn1">对表单内 可用input 赋值操作.</button>
$("#btn1").click(function(){
$("input:enabled").val("aaa");
});
// <button id="btn2">对表单内 不可用input 赋值操作.</button>
$("#btn2").click(function(){
$("input:disabled").val("assss");
});
// <button id="btn3">获取多选框选中的个数.</button>
$("#btn3").click(function(){
var s11 = $("[name='newsletter']").length; // 获得总共的单选框个数
var s1 = $("[name='newsletter']:checked").length; // 标识选中的个数；
alert(s1);
});
// <button id="btn4">获取下拉框选中的内容.</button>
$("#btn4").click(function(){
$(":selected").each(function(){
$(this).val();
// 添加到selectDivId div中
// 若没有val值，则会取出text值；
// html标签是获得内容
$("#selectDivId").append($(this).html());
});
});
});
</script>