一、css()方法,它既是getter又是setter。
注意：
1.当css()方法中有两个参数时，第一个参数代表属性（font-size也可写作fontSize），第二个参数代表对应的属性值
$("#d1").css("font-size","20px");//字体样式
$("#d1").css("border-radius","20px");//边框圆角，当圆角半径等于边框一半时，边框变为圆
$("#d1").css("box-shadow","5px 5px 5px black");
//"5px 5px 5px black"其中第一个数表示阴影向右5px（右正，左负）,第二个数表示阴影向下5px（下正，上负）, /第三个数表示阴影模糊度5px（越大越模糊），第四个数表示阴影颜色
2.当css()方法中仅有一个参数时，该参数表示属性，代表获取该属性对应的属性值
3.jQuery中很多方法调用完之后，会返回jQuery对象本身（可以进行链式调用），css()就是这样的
二、jQuery对象与DOM对象的相互转换
1.jQuery对象是通过jQuery包装DOM对象后产生的对象，如果一个对象是jQuery对象,那么它就可以使用jQuery里的方法,比如
$(“#test”).html() 等价于 document.getElementById(“test”).innerHTML;
2.虽然jQuery对象是包装DOM对象后产生的,但jQuery对象不能使用任何DOM对象的方法,同样DOM对象也不能使用jQuery中的方法,乱用会报错.
3. dom对象===>jquery对象
$(dom对象)
jquery对象===>dom对象
方式1: 每一个jQuery对象都是一个数组对象,可以通过[index]的方法来得到对象的DOM对象
jquery对象[index]
方式2: jQuery本身提供,通过get(index)方法,得到相应的DOM对象
jquery对象.get(index)
三、jQuery选择器
1.基本选择器
$("#id值") $(".class值") $("标签名")
了解:$("*")
理解:获取多个选择器 用逗号隔开（并集）
$("#id值,.class值") 注意：$(...)不管你是否为正规标签，哪怕是一个随便起的标签，只要…与标签名相同，同样可以选中；一个网页中id只能使用一次,class能使用多次
2.层次选择器 过一个层次换一个标签
$(“form input”) —-匹配所有form标记中的input后代元素
$(“form>input”)—-匹配所有form标记中的input子元素
$(“div+span”) —-匹配所有div后面的第一个span元素
$(“#a ~ marquee ”) —-匹配id为a的元素后面的所有marquee兄弟元素
注意,如果想访问某个节点的父节点,则使用parent()方法即可。
3.基础过滤选择器
:first 匹配找到的第一个元素（单个元素）
:last 匹配找到的最后一个元素（单个元素）
:not(selector) 匹配符合条件以外的元素（集合）
:even 匹配所有索引值为偶数的元素
:odd 匹配所有索引值为奇数的元素
:eq() 匹配指定索引值的元素,支持负数，-2是倒数第二个
:gt() 匹配大于指定索引值的元素
:lt() 匹配小于指定索引值的元素
4.内容过滤选择器
内容过滤选择器的过滤规则主要体现在它所包含的的子元素和文本内容上.
:contains(text) 内容包含
:empty 空标签，只有<><>才算空，里面有空格或者回车均不是空
:has(selector)
:parent （如div：parent选出的是有子节点的div标签，<div></div>中间什么都没有才是无子节点，一旦有东西哪怕是空格或者回车都算是有子节点）
5.属性过滤选择器
属性过滤选择器和一般的选择器有所不同，它不是以:开头，而是以[]括起来的。通过元素的属性来获取相应的元素
[attribute]
[attribute=value]
[attribute!=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]
[属性过滤器1][属性过滤器2]…[属性过滤器n]6.表单选择器
$("input[type=text]") 等价于简写形式 $(":text")，但是只适用于input标签
$(“select option:selected”)
注意：
1.单选框checked属性是布尔属性，只有两种状态：要么选中，要么不选中
2.checked="checked"、checked=""、checked、checked="aisfdvbia随便写的"，这些效果一样，因为布尔属性的状态与属性无关，只要该布尔属性出现，结果就会为真，自动默认将其选中
3.单选框中出现两个checked时，选中后面的（前面的被覆盖）
4.下拉框select标签中的option标签有个属性selected,他也是布尔属性
5.下拉框select标签的multiple属性也是布尔属性
四、jQuery中的DOM操作
DOM(Document Object Model 文档对象模型),一种与浏览器，平台，语言无关的接口。使用该接口可以轻松地访问页面中的所有标准组件
1.插入节点
内部插入节点
append()
appendTo()
prepend()
prependTo()
外部插入节点
after()
before()
insertAfter()
insertBefore()
2.查找和创建节点
(1)查找节点:
查找属性节点,通过jQuery选择器完成
查找到所需要的元素后,可以调用jQuery对象的attr方法来获取或设置它的各种html属性
(2)创建节点
使用$()函数也可以创建节点: $(“<p></p>”),返回的是一个jQuery对象。
也可以在创建节点的同时加上属性
$(“<font color=‘red’></font>”)，
$(“<marquee direction=‘left’></marquee>”)。
3.删除节点
remove():从DOM中删除所有匹配元素,这个方法的返回值是一个指向已被删除的节点的引用(被指向的节点类型是jQuery对象)。—-自杀，选择谁杀谁
empty():清空所有后代节点—-他爸动手杀了他
4.设置和获取HTML,文本和值
(1)设置和获取某个元素中的HTML内容:html(),只用于双标记
该方法可用于XHTML,但不能用于XML文档
(2)设置和获取某个元素中的文本内容:text()
该方法即可用于XHTML,也可用于XML文档
(3)设置和获取某个元素的值:val()，适用于单标记且有value属性
该方法专用于具有value属性的元素（如文本框，下拉框，单选框，复选框等）
(4)方法css()，只有原生代码中的style中的样式才可以
方法attr()，只有原生代码中的普通属性才可以
方法prop()，专门用来获取和设置布尔属性
5. 常用的遍历节点方法
(1)取得匹配节点的所有子元素组成的集合:children()
该方法只考虑子元素，而不考虑后代元素
(2)取得匹配元素后面紧邻的同辈元素的集合:next()
(3)取得匹配元素前面紧邻的同辈元素的集合:prev()
(4)取得匹配元素前后所有同辈元素:siblings()
五、jQuery事件
事件：动作
事件源：动作承受着
事件处理程序：事件发生后浏览器回掉函数
鼠标事件：click、dblclick、mouseup、mousedown、mouseover、mouseout、mousemove、mouseenter、mouseleave
键盘事件：keydown、keyup
焦点事件：focus、blur
改变事件：change
其他事件：select、resize、scroll
jQuery事件处理
原生DOM中页面加载完毕window.onload=function(){...}等价于：
jQuery中
$(function(){
...
})jQuery事件处理程序的高级注册
bind()方法也可以用来给jQuery对象注册事件处理程序.
unbind()、one()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-2.0.2.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
//window.onload=function(){...}等价于
/*
$(function(){
...
})
*/
/*
$("button:eq(0)").bind("click mouseenter",function(){
alert(1234);//bind()可以注册绑定多个事件
});
*/
/*$("button:eq(0)").one("dblclick",function(){
alert("sadfv");//one()事件只执行一次
});*/
//$("button:eq(0)").unbind("click")
//unbind()可以取消绑定的事件
$("button:eq(0)").bind("click.aa",function(){
alert(1234);//bind()可以注册绑定多个事件
});
$("button:eq(0)").bind("click.bb",function(){
alert("sdfbfdsbg");//bind()可以注册绑定多个事件
});
$("button:eq(0)").unbind("click.aa");
}
</script>
<button>GO</button>
</body>
</html>六、动画及其基本原理
（jQuery中方法内可以嵌套定义方法）
(1) jQuery定义了9个简单的动画方法用来隐藏和显示元素.
fadeIn()、fadeOut()、fadeTo()
show()、hide()、toggle()
slideDown()、slideUp()、slideToggle()
注意：参数都是毫秒值，可以写成fast(表示600)，slow(表示200)，不写表示默认400
(2)自定义动画
与简单动画方法实现的效果相比,使用animate()方法可以实现更多通用动画效果.
animate()方法
第一个参数是必需的,它必需是一个对象,它是动画属性对象。该对象的属性指定要变化的CSS属性和它们的目标值;animate()方法会将每个选中元素的这些CSS属性从初始值变化到指定的目标值.
第二个参数是可选的,它也是一个对象,它是动画选项对象。属性duration指明了动画持续时间,属性complete指定动画完成后自动执行的回调函数
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
border:1px solid #000;
width:100px;
height:100px;
}
</style>
<!-- 导入js库 ，注意：使用src属性之后，标签体中不能写入内容-->
<script src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//给b1加上一个单击事件
//<input type="button" id="b1" value="显示/隐藏 b1Div" />
$("#b1").click(function(){
//获取id="b1Div",jQuery对象
//show(毫秒数):通过多少时间显示
//hide(毫秒数):通过多少时间隐藏
//toggle(毫秒数):如果隐藏则显示,如果显示则隐藏
//$("#b1Div").hide(2000);
$("#b1Div").toggle(2000);
})
//<input type="button" id="b2" value="滑出/滑入b2Div"/>
$("#b2").click(function(){
//slideDown(毫秒数):通过多少时间从上到下划入
//slideUp(毫秒数):通过多少时间,从下往上划出
//slideToggle(毫秒数):如果划入则划出,如果划出则划入
$("#b2Div").slideToggle(3000);
})
//<input type="button" id="b3" value="淡出/淡入b3Div" />
$("#b3").click(function(){
//fadeIn(毫秒数):通过多少时间单入
//fadeOut(毫秒数):通过多少时间淡出
//fadeToggle(毫秒数):如果淡入则淡出如果淡出则淡入
//$("#b3Div").fadeOut(2000);
$("#b3Div").fadeToggle(2000);
})
});
</script>
</head>
<body>
<input type="button" id="b1" value="显示/隐藏 b1Div" />
<div id="b1Div"></div> <br/>
<input type="button" id="b2" value="滑出/滑入b2Div"/>
<div id="b2Div"></div> <br/>
<input type="button" id="b3" value="淡出/淡入b3Div" />
<div id="b3Div"></div>
</body>
</html><!DOCTYPE HTML>
<html>
<head>
<script src="../js/jquery-2.0.2.min.js"></script>
<style>
</style>
</head>
<body>
<script>
window.onload = function() {
function showMsg(msg, w,h, time) {
var div = document.createElement("div");
div.innerHTML = msg;
div.style.border="#000 solid 5px";
div.style.backgroundColor="#ff0";
div.style.fontSize="20px";
div.style.width = w + "px";
div.style.height = h + "px";
div.style.textAlign="center";
div.style.lineHeight= h + "px";
div.style.fontWeight="bold";
document.body.appendChild(div);
var start = new Date();
// 制作动画特效
function animate() {
var now = new Date();
var lapse = now - start;
document.title = lapse;
//div.style.height = 200 - lapse/time*200 +"px";
//div.style.lineHeight = 200 - lapse/time*200 +"px";
div.style.opacity = 1 - lapse/time;
if(lapse < time) {
setTimeout(animate, 1);
} else {
document.body.removeChild(div);
}
}
animate();
}
showMsg("注册成功",80,500,5000);
}
</script>
</body>
</html>练习1:百度图片方法模式
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<script src="../js/jquery-2.0.2.min.js"></script>
<style>
</style>
</head>
<body>
<script>
window.onload = function() {
$("img").mouseenter(function() {
$(this).css("transform","scale(1.5)");
});
$("img").mouseleave(function() {
$(this).css("transform","scale(1.0)");
});
}
</script>
<img src="../img/fbb.jpg" width="200" />
<img src="../img/fbb.jpg" width="200" />
<img src="../img/fbb.jpg" width="200" />
<img src="../img/fbb.jpg" width="200" />
<img src="../img/fbb.jpg" width="200" />
</html>练习2：一输入钓鱼岛，就显示钓鱼岛是中国的
<!DOCTYPE HTML>
<html>
<head>
<script src="../js/jquery-2.0.2.min.js"></script>
<style>
</style>
</head>
<body>
<script>
//一输入钓鱼岛，就显示钓鱼岛是中国的
window.onload = function() {
$("input:eq(0)").keyup(function() {
document.title = $(this).val();
if($(this).val().indexOf("钓鱼岛") != -1) {
$(this).val("钓鱼岛是中国的");
}
});
}
</script>
</body>
<input type="text" />
</html>
练习3：画个三角形
<!DOCTYPE HTML>
<html>
<head>
<script src="../js/jquery-2.0.2.min.js"></script>
<style>
div {
width:0px; height:0px;
border-left:red solid 15px;
border-right:white solid 15px;
border-top:white solid 15px;
border-bottom:white solid 15px;
background-color:#8ab42e;
transition: background-color 1s,transform 1s;
}
div:hover {
background-color:#ff6600;
transform:rotateZ(90deg);
}
</style>
</head>
<body>
<script>
$(function() {
});
</script>
</body>
<div></div>
</html>
练习4：连续按键GM才显示图片
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<script src="../js/jquery-2.0.2.min.js"></script>
<style>
</style>
</head>
<body>
<script>
window.onload = function() {
$("img:eq(0)").css("display","none");
var str = "";
$(document).keydown(function(e) {
str += String.fromCharCode(e.keyCode);
document.title = str;
if(str.indexOf("GM") != -1) {
$("img:eq(0)").css("display","block");
}
});
}
</script>
</body>
<img src="../img/1.jpg" />
</html>练习5：在鼠标点击出插入一张图片
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<script src="../js/jquery-2.0.2.min.js"></script>
<style>
</style>
</head>
<body>
<script>
window.onload = function() {
$(document).click(function(e) {
var m = $("<img src='../img/fbb.jpg' width='50'>")
m
.css("position","absolute")
.css("left",e.pageX+"px")
.css("top",e.pageY+"px");
$(document.body).append(m);
});
}
</script>
</body>
</html>练习6：西定义动画练习
<!DOCTYPE HTML>
<html>
<head>
<script src="../js/jquery-2.0.2.min.js"></script>
<style>
</style>
</head>
<body>
<script>
$(function() {
function f1() {
$("div:eq(0)").css(
{
"width":"100px",
"height":"100px",
"border":"#000 solid 2px"
}
);
$("div:eq(0)").animate(
{
"marginLeft":"300px"
}
,
{
"duration":1000,
"complete":function(){
var r = parseInt(Math.random()*256);
var g = parseInt(Math.random()*256);
var b = parseInt(Math.random()*256);
$("div:eq(0)").css("background-color","rgba("+r+","+g+","+b+",1)");
}
}
).animate(
{
"marginTop":"300px"
}
,
{
"duration":1000,
"complete":function(){
var r = parseInt(Math.random()*256);
var g = parseInt(Math.random()*256);
var b = parseInt(Math.random()*256);
$("div:eq(0)").css("background-color","rgba("+r+","+g+","+b+",1)");
}
}
).animate(
{
"marginLeft":"0px"
}
,
{
"duration":1000,
"complete":function(){
var r = parseInt(Math.random()*256);
var g = parseInt(Math.random()*256);
var b = parseInt(Math.random()*256);
$("div:eq(0)").css("background-color","rgba("+r+","+g+","+b+",1)");
}
}
).animate(
{
"marginTop":"0px"
}
,
{
"duration":1000,
"complete":function(){
var r = parseInt(Math.random()*256);
var g = parseInt(Math.random()*256);
var b = parseInt(Math.random()*256);
$("div:eq(0)").css("background-color","rgba("+r+","+g+","+b+",1)");
f1();
}
}
);
}
f1();
});
</script>
</body>
<div>
哈哈
</div>
</html>
练习7：做多选择三个
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<script src="../js/jquery-2.0.2.min.js"></script>
<style>
div{
float:left;
}
</style>
</head>
<body>
<script>
window.onload = function() {
$(":checkbox").change(function() {
if($(":checkbox:checked").length > 3) {
$(this).prop("checked","");
}
});
}
</script>
<input type="checkbox" />足球
<input type="checkbox" />爬山
<input type="checkbox" />游戏
<input type="checkbox" />电影
<input type="checkbox" />学习
<input type="checkbox" />饮食
<input type="checkbox" />游泳
<input type="checkbox" />宅
<input type="checkbox" />运动
<input type="checkbox" />睡觉
<hr />
</html>七、jQuery表单验证
jQuery表单验证是jQuery的一个插件,jQuery的插件总共有100多个!
jQuery表单验证插件下载地址
我们自己利用jQuery表单验证框架功能,必须满足以下2点
1.引入jQuery框架(至少是1.3.2以上版本)
2.引入jQuery.validate.js表单验证框架
还有一个可选的操作:引入jQuery表单验证的提前制作好的样式
以上代码中的username:”required”表示表单中的username输入框中的值是必须的(不能为空)
也可以改写为:
从以上例子可以看出,在引入了jQuery表单验证框架后:
1.通过jQuery获得表单
2.调用表单的validate()方法
3.validate()方法必须接受一个对象直接量参数
4.该对象必须有两个属性:
rules:验证规则
messages:验证错误时的提示信息
5.这两个属性的属性值还是一个对象直接量
6.在这个对象直接量中的属性名必须是表单中元素的名字
我们下面要学习的重点就是jQuery的各种默认验证规则.
1.required:true
2.email:true
3.url:true
4.date:true
5.number:true
6.digits:true
7.creditcard
8.equalsTo:”#field”
9.accept:”.txt”
10.maxlength:5
11.minlength:3
12.rangelength:[3,5]
13.max:5
14.min:10
15.range:[5,10]
16.dateISO:true(只验证格式,不验证有效性)
17.remote:”index.jsp”(ajax中会用到,超纲)
注意上例中验证身份证的规则是没有的，需要自定义验证规则:
messages对于各种验证错误提示的默认值
jQuery插件datePicker日期选择器
jQuery树形插件
472
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
