1.1.1 jQuery概述
1.1.1.1 什么是jQuery
jQuery是一个JavaScript框架。它兼容CSS3，还兼容各种浏览器。文档说明很全，应用详细，成熟插件多。
1.1.1.1 引入和对象获取
学习JavaScript时，我们就学习过自定义JS库的导入，学习jQuery只需要将对应js库下载，并导入到我们项目下，在html页面使用<script>导入即可。
<script src="../js/jquery-1.11.0.js"type="text/javascript" ></script>
l 基本语法：jQuery(选择器) 或 $(选择器)
n 及在 jQuery中 "jQuery== $"，区分大小写
//1 获得jQuery对象
// * 命名约定：jQuery对象变量名建议以$开头。
var $demoId = $("#demoId");
l 注释：
//单行注释
/*块注释*/
1.1.1.2 jQuery对象和DOM转换
jQuery对象和DOM对象可以项目转换，但两个对象的函数不能彼此混搭使用。及jQuery对象只能使用自己的函数
DOM对象转换成jQuery对象，语法：jQuery(dom对象)
jQuery对象转换成DOM对象，语法：$username[index]
<scripttype="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<scripttype="text/javascript">
//页面加载完毕,获取文本框的value属性值
//JS的方式
window.onload=function(){
var val =document.getElementById("in").value;
alert(val+"JS");
}
//Jquery方式
$(function(){
var val =$("#in").val();
alert(val);
});
//JS和Jquery混用
$(function(){
//DOM对象
//var inputEle =document.getElementById("in");
//DOM对象调用Jquery方法,val()是Jquery的方法,不能混用
//alert(inputEle.val());
//Jquery对象
//var $input=$("#in");
//Jquery对象调用DOM方法,value是DOM对象的属性,不能混用
//alert($input.value);
/*
* DOM对象转成Jquery对象 $
*/
var inputEle =document.getElementById("in");
//$包装 语法$(DOM对象)
var $inputEle = $(inputEle);
alert($inputEle.val());
/*
* Jquery对象转成DOM对象
* Jquery对象的本质就是数组
*/
var inputEle2 = $inputEle[0];
alert(inputEle2.value);
});
</script>
</head>
<body>
<input type="text"id="in" value="传智播客" />
</body>
1.2 选择器
jquery的选择器与css的选择器的作用是完全一样的，目的是精确快速的定位到某个html元素上并获取该元素对象，进而使用juery的方法对该html进行操作。
jquery常用的选择器有如下：
基本选择器，层级选择器，属性选择器，基本过滤选择器，表单属性选择器等
1.2.1 基本选择器
标签选择器（元素选择器）：$("html标签名")
id选择器：$("#id的属性值")
类选择器：$(".class的属性值")
<script type="text/javascript"src="../js/jquery-1.11.0.min.js" ></script>
<scripttype="text/javascript">
//<input type="button"value="改变 id 为 one 的元素的背景色为 红色" id="b1"/>
//id选择器找到id值为b1的按钮,绑定点击事件
$("#b1").click(function(){
//id选择器为one的标签,jquery的css方法设置样式
$("#one").css("background-color","#FF0000");
});
//<input type="button" value=" 改变元素名为<div> 的所有元素的背景色为 红色" id="b2"/>
//id选择器b2的按钮,绑定点击事件
$("#b2").click(function(){
//获取所有div标签,使用标签选择器
$("div").css("background-color","#FF0000");
});
//<input type="button" value=" 改变 class 为 mini的所有元素的背景色为 红色" id="b3"/>
$("#b3").click(function(){
//class选择器,选择class为mini
$(".mini").css("background-color","#FF0000");
});
// <input type="button"value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色" id="b4"/>
$("#b4").click(function(){
//获取标签span,和id值是two的元素
//多选择器逗号分割
$("span,#two").css("background-color","#FF0000");
});
</script>
1.2.2 层级选择器
获得A元素内部的所有的B元素：$("A B ") --- 后代选择器
获得A元素下面的所有B子元素：$("A > B")
获得A元素同级下一个B元素：$("A + B")
获得A元素同级所有后面B元素：$("A ~ B")
<scripttype="text/javascript">
//<input type="button" value=" 改变 <body> 内所有<div> 的背景色为红色" id="b1"/>
$("#b1").click(function(){
//选择所有body的后代div标签,层级选择器
$("body div").css("background-color","#FF0000");
})
//<input type="button" value=" 改变 <body> 内子<div> 的背景色为 红色" id="b2"/>
$("#b2").click(function(){
//选择body的子标签div
$("body>div").css("background-color","#FF0000");
});
//<input type="button" value="改变 id 为 one 的下一个 <div> 的背景色为 红色" id="b3"/>
$("#b3").click(function(){
//id为one的下一个div
$("#one+div").css("background-color","#FF0000");
});
//<input type="button"value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 红色" id="b4"/>
$("#b4").click(function(){
//id为two后的所有兄弟div
$("#two~div").css("background-color","#FF0000");
});
//<input type="button"value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为红色" id="b5"/>
$("#b5").click(function(){
//siblings方法,选择所有的同级标签
//$("#two").siblings().css("background-color","#FF0000");
//siblings方法继续选择
$("#two").siblings("div").css("background-color","#FF0000");
});
</script>
1.2.3 属性选择器
获得有属性名的元素：$("A[属性名]")
获得属性名等于值元素：$("A[属性名=值]")
获得属性名不等于 值 元素：$("A[属性名!=值]")
获得属性名以 值 9开头 元素：$("A[属性名^=值]")
获得属性名以 值 结尾 元素：$("A[属性名$=值]")
获得属性名含有 值 元素：$("A[属性名*=值]")
复合属性选择器，多个属性同时过滤：$("A[属性名!=值][属性名!=值][属性名!=值]")
<scripttype="text/javascript">
//<input type="button"value=" 含有属性title 的div元素背景色为红色" id="b1"/>
$("#b1").click(function(){
//属性选择器,选择带有title
$("div[title]").css("background-color","#FF0000");
});
// <input type="button"value=" 属性title值等于test的div元素背景色为红色" id="b2"/>
$("#b2").click(function(){
//获取属性值是test的元素
$("div[title='test']").css("background-color","#FF0000");
});
// <input type="button"value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色" id="b3"/>
$("#b3").click(function(){
//属性值不等于test
$("div[title!='test']").css("background-color","#FF0000");
});
// <input type="button"value=" 属性title值 以te开始 的div元素背景色为红色" id="b4"/>
$("#b4").click(function(){
//属性值以te开始的
$("div[title^='te']").css("background-color","#FF0000");
});
// <input type="button"value=" 属性title值 以est结束 的div元素背景色为红色" id="b5"/>
$("#b5").click(function(){
//属性值是est结束的
$("div[title$='est']").css("background-color","#FF0000");
});
// <input type="button"value="属性title值 含有es的div元素背景色为红色" id="b6"/>
$("#b6").click(function(){
//属性值含有es的
$("div[title*='es']").css("background-color","#FF0000");
});
// <input type="button"value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色" id="b7"/>
$("#b7").click(function(){
//属性值是est结束的
$("div[id][title*='es']").css("background-color","#FF0000");
});
</script>
1.2.4 基本过滤选择器
获得选择的元素中的第一个元素： :first
获得选择的元素中的最后一个元素： :last
不包括指定内容的元素例如： :not(selecter)
偶数，从 0 开始计数： :even
奇数，从 0 开始技术： :odd
指定第几个： :eq(index)
大于n个： :gt(index)
小于n个： :lt(index)
获得标题（<h1> /<h2> ....） :header --- 固定写法
获得动画的 :animated ---固定写法 正在执行的动画
<scripttype="text/javascript">
// <inputtype="button" value=" 改变第一个 div 元素的背景色为 红色" id="b1"/>
$("#b1").click(function(){
$("div:first").css("background-color","#FF0000");
});
// <inputtype="button" value=" 改变最后一个 div 元素的背景色为 红色" id="b2"/>
$("#b2").click(function(){
$("div:last").css("background-color","#FF0000");
});
// <inputtype="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色" id="b3"/>
$("#b3").click(function(){
$("div:not(.one)").css("background-color","#FF0000");
});
// <inputtype="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色" id="b4"/>
$("#b4").click(function(){
$("div:even").css("background-color","#FF0000");
});
// <inputtype="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色" id="b5"/>
$("#b5").click(function(){
$("div:odd").css("background-color","#FF0000");
});
// <inputtype="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色" id="b6"/>
$("#b6").click(function(){
$("div:gt(3)").css("background-color","#FF0000");
});
// <inputtype="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色" id="b7"/>
$("#b7").click(function(){
$("div:eq(3)").css("background-color","#FF0000");
});
// <inputtype="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色" id="b8"/>
$("#b8").click(function(){
$("div:lt(3)").css("background-color","#FF0000");
});
// <inputtype="button" value=" 改变所有的标题元素的背景色为 红色" id="b9"/>
$("#b9").click(function(){
$(":header").css("background-color","#FF0000");
});
// <inputtype="button" value=" 改变当前正在执行动画的所有元素的背景色为 红色" id="b10"/>
$("#b10").click(function(){
$(":animated").css("background-color","#FF0000");
});
function moveFn(){
//div向上滑动,slideUp方法,slideToggle方法
$("#mover").slideToggle("slow",function(){
moveFn();
});
}
moveFn();
</script>
1.2.5 表单属性选择器
可用： :enabled
不可用： :disabled
选中（单选radio ，多选checkbox）： :checked
选择（下列列表 <select>）： :selected
<scripttype="text/javascript">
// <inputtype="button" value=" 利用jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值" id="b1"/>
$("#b1").click(function(){
//获取多个input标签属性值是enabled, type属性值是text 返回数组
var $inputs =$("input[type='text']:enabled");
for(var i=0;i<$inputs.length;i++){
//把数组中的DOM对象变成Jquery对象,调用方法val()
alert($($inputs[i]).val());
}
});
// <inputtype="button" value=" 利用jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值" id="b2"/>
$("#b2").click(function(){
//获取多个input标签属性值是disabled,返回数组
var $inputs =$("input[type='text']:disabled");
for(var i=0;i<$inputs.length;i++){
//把数组中的DOM对象变成Jquery对象,调用方法val()
alert($($inputs[i]).val());
}
});
// <inputtype="button" value=" 利用jQuery 对象的 length 属性获取多选框选中的个数" id="b3"/>
$("#b3").click(function(){
var $inputs = $("input[type='checkbox']:checked");
alert($inputs.length);
});
// <inputtype="button" value=" 利用jQuery 对象的 text() 方法获取下拉框选中的内容" id="b4"/>
/*
* html()==DOM对象的innerHTML
* text()==DOM对象的innerText
*/
$("#b4").click(function(){
var $inputs = $("option:selected");
for(var i=0;i<$inputs.length;i++){
alert($($inputs[i]).text());
}
});
第2章 Jquery操作方法
2.1 jquery的DOM操作方法
2.1.1 html代码/文本/值/属性：html()/text()/val()
html() === innerHTML
text() === innerText
val() === value
html text val 传递参数代表赋值 空参代表获取
<scripttype="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<scripttype="text/javascript">
//页面加载完成
$(function(){
//获取张三
alert($("#myinput").val());
//获取标题文本
alert($("#mydiv").text());
//获取mydiv的后的所有内容
alert($("#mydiv").html());
});
</script>
2.1.2 html属性操作：attr()/prop()
attr() === setAttribute和getAttribute
attr(属性名称); --- 获取属性的值
attr(属性名称,属性值) --- 设置的属性的值
<scripttype="text/javascript">
//获取北京节点的name属性值
alert($("#bj").attr("name"));
//设置北京节点的name属性的值为dabeijing
$("#bj").attr("name","dabeijing");
//新增北京节点的discription属性 属性值是didu
$("#bj").attr("discription","didu");
//删除北京节点的name属性并检验name属性是否存在
$("#bj").removeAttr("name");
//获得hobby的的选中状态
alert($("#hobby").prop("checked"));
/*
*JQuery1.6版本后的方法prop
*checked,selected使用prop 单属性
*其他属性使用attr
*/
</script>
2.1.3 html的class属性操作：addClass() removeClass()
addClass（值） === attr(“class”,值)
removeClass（class值） === removeAttr（“class值”）
2.1.4 html的样式的操作：css()
css() ==== js对象.style.属性
css(css属性名) 获取css属性名称对应值
css(css属性名,值) 设置css样式
<scripttype="text/javascript">
//<input type="button"value="采用属性增加样式(改变id=one的样式)" id="b1"/>
$("#b1").click(function(){
$("#one").attr("class","second");
});
//<input type="button" value="addClass" id="b2"/>
$("#b2").click(function(){
$("#one").addClass("second");
});
//<input type="button"value="removeClass" id="b3"/>
$("#b3").click(function(){
$("#one").removeClass();
});
//<input type="button"value=" 切换样式" id="b4"/>
$("#b4").click(function(){
//toggleClass切换样式方法,如果没有样式,设置样式second,如果存在second样式,则还原
$("#one").toggleClass("second");
});
//<input type="button"value=" 通过css()获得id为one背景颜色" id="b5"/>
$("#b5").click(function(){
alert($("#one").css("background-color"));
});
// <input type="button"value=" 通过css()设置id为one背景颜色为绿色" id="b6"/>
$("#b6").click(function(){
$("#one").css("background-color","#00FF00");
});
</script>
2.1.5 html的元素的创建：$(“标签”);
$(“<li></li>”)=== createElement(“li”)
2.1.6 html的内部插入：append() prepend()
<scripttype="text/javascript">
/**将反恐放置到city的后面*/
$("#city").append($("#fk"));
/**将反恐放置到city的最前面*/
$("#city").prepend($("#fk"));
</script>
append() ===appendChild
prepend() 加入所有子元素的最前面
<scripttype="text/javascript">
//删除<li id="bj"name="beijing">北京</li>
$("#bj").remove();
//删除所有的子节点 清空元素中的所有后代节点(不包含属性节点).
$("#city").empty();
//测试(id='city')并没有被删除
</script>
2.2 jquery的效果 (自己测试)
2.2.1 元素的显示与隐藏
show(speed ,fn) 显示
参数 speed，显示速度，单位：毫秒。固定字符串：slow,normal, or fast
参数 fn，显示成功之后回调函数。
hide() 隐藏
toggle() 切换
2.2.2 元素的滑动显示与隐藏
slideDown() 显示，高度变大。
slideUp() 隐藏，高度变小。
slideToggle() 切换
2.2.3 元素的淡入淡出的显示与隐藏
fadeIn() 显示
fadeOut() 隐藏
fadeToggle() 切换
第3章 隔行换色：
3.1 案例实现
<scripttype="text/javascript">
$(function(){
$("tr:gt(1):even").css("background-color","#CC66FF");
$("tr:gt(1):odd").css("background-color","#CC6600");
});
</script>
第4章 全选和全不选
4.1 案例实现
<scripttype="text/javascript">
function selectAll(obj){
$("input[class='itemSelect']").prop("checked",$(obj).prop("checked"));
}
</script>
第5章 定时广告
5.1 案例实现
<scripttype="text/javascript">
$(function(){
setTimeout(function(){
//$("#adDiv").css("display","block");
$("#adDiv").slideDown(3000);
},3000);
setTimeout(function(){
//$("#adDiv").css("display","none");
$("#adDiv").slideUp(3000);
},8000);
});
</script>