设置和获取样式值
语法:css(name,value) ; 或 css({name:value, name:value,name:value…})
追加和移除样式
追加样式
语法:$(selector).addClass(class); 或 $(selector).addClass(class1 class2 … classN);
移除样式
语法:$(selector).removeClass("class") ; 或 $(selector).removeClass("class1 class2 … classN ") ;
toggleClass() 模拟了addClass()与removeClass()实现样式切换的过程
语法:$(selector).toggleClass(class) ;
<!doctype html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>追加和移除样式</title>
<style type="text/css" >
*{
margin:0px;
padding:0px;
font-size:14px;
font-family:"微软雅黑";
line-height: 28px;;
}
.title {font-size:14px; color:#03F; text-align: center; }
.text{ padding:10px;}
.content {background-color:#FFFF00; }
.border {border:1px dashed #333; }
</style>
</head>
<body>
<h2 class="title" >jQuery操作CSS</h2>
<p class="text">
css()设置或返回样式属性<br>
addClass()增加一个或多个类<br>
removeClass()移除一个或多个类
</p>
<script src="js/jquery-1.12.4.js" ></script>
<script>
// $(document).ready(function(){
// $("h2").mouseover(function() {
// $("p").addClass("content border");
// });
// $("h2").mouseout(function() {
// $("p").removeClass("text content");
// });
$("h2").click(function() {
$("p").toggleClass("content border");
});
// });
</script>
</body>
</html>
判断是否含指定的样式
hasClass( )方法来判断是否包含指定的样式
语法:$(selector). hasClass(class);
<!doctype html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>追加和移除样式</title>
<style type="text/css" >
*{
margin:0px;
padding:0px;
font-size:14px;
font-family:"微软雅黑";
line-height: 28px;;
}
.title {font-size:14px; color:#03F; text-align: center; }
.text{ padding:10px;}
.content {background-color:#FFFF00; }
.border {border:1px dashed #333; }
</style>
</head>
<body>
<h2 class="title" >jQuery操作CSS</h2>
<p class="text">
css()设置或返回样式属性<br>
addClass()增加一个或多个类<br>
removeClass()移除一个或多个类
</p>
<script src="js/jquery-1.12.4.js" ></script>
<script>
$(document).ready(function(){
/* $("h2").mouseover(function() {
$("p").addClass("content border");
});
$("h2").mouseout(function() {
$("p").removeClass("text content");
});*/
/*
$("h2").click(function() {
$("p").toggleClass("content border");
});
*/
$("h2").mouseover(function() {
if(!$("p").hasClass("content ")){
$("p").addClass("content ");
}
});
$("h2").mouseout(function() {
if($("p").hasClass("content ")) {
$("p").removeClass("content ");
}
});
});
</script>
</body>
</html>
HTML代码操作:html()可以对HTML代码进行操作,类似于JS中的innerHTML
语法:$("div.left").html(); 或 $("div.left").html("<div class='content'>…</div>")
标签内容操作:text()可以获取或设置元素的文本内容
语法:$("div.left").text(); 或 $("div.left").text("<div class='content'>…</div>")
属性值操作:val()可以获取或设置元素的value属性的值
语法:$(this).val(); 或 $(this).val(value);
节点操作
创建节点
工厂函数$()用于获取或创建节点
$(selector):通过选择器获取节点
$(element):把DOM节点转化成jQuery节点
$(html):使用HTML字符串创建jQuery节点
插入节点
元素内部插入子节点
语法 | 功能 |
append(content) | $(A).append(B)表示将B追加到A中 如:$("ul").append($newNode1); |
appendTo(content) | $(A).appendTo(B)表示把A追加到B中 如:$newNode1.appendTo("ul"); |
prepend(content) | $(A). prepend (B)表示将B前置插入到A中 如:$("ul"). prepend ($newNode1); |
prependTo(content) | $(A). prependTo (B)表示将A前置插入到B中 如:$newNode1. prependTo ("ul"); |
元素外部插入同辈节点
语法 | 功能 |
after(content) | $(A).after (B)表示将B插入到A之后 如:$("ul").after($newNode1); |
insertAfter(content) | $(A). insertAfter (B)表示将A插入到B之后 如:$newNode1.insertAfter("ul"); |
before(content) | $(A). before (B)表示将B插入至A之前 如:$("ul").before($newNode1); |
insertBefore(content) | $(A). insertBefore (B)表示将A插入到B之前 如:$newNode1.insertBefore("ul"); |
删除节点
jQuery提供了三种删除节点的方法
remove():删除整个节点
empty():清空节点内容
detach():删除整个节点,保留元素的绑定事件、附加的数据
替换节点
replaceWith()和replaceAll()用于替换某个节点
var $newNode1=$("<li>你喜欢哪些冬季运动项目?</li>");
$(".gameList li:eq(2)").replaceWith($newNode1);
$($newNode1).replaceAll(".gameList li:eq(2)");
复制节点:clone()用于复制某个节点
语法:$(selector).clone([includeEvents]) ;
属性操作
获取与设置元素属性:attr()用来获取与设置元素属性
语法:$(selector).attr([name]) ; 或 $(selector).attr({[name1:value1]…[nameN:valueN]}) ;
删除元素属性:removeAttr()用来删除元素的属性
语法: $(selector).removeAttr(name) ;
节点遍历
遍历子元素:children()方法可以用来获取元素的所有子元素
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点遍历</title>
<style>
.hot{ color:#F00;}
a{ color:#000;
text-decoration:none;
}
.orange{
background: #c3910b;
}
.orange a{
color: #ffffff;
}
</style>
</head>
<body>
<section>
<img src="images/ad.jpg" alt="美梦成真系列抽奖" />
<ul>
<li><a href="#">小米的MI 2手机</a><span class="hot">火爆销售中</span></li>
<li><a href="#">苹果iPad mini</a></li>
<li><a href="#">三星GALAXY Ⅲ</a></li>
<li><a href="#">苹果iPhone 5</a></li>
</ul>
</section>
<script src="js/jquery-1.12.4.js" ></script>
<script>
$(document).ready(function(){
//遍历子节点
var $section =$("section").children();
alert($section.length);
});
</script>
</body>
</html>
遍历同辈元素:jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素
语法 | 功能 |
next([expr]) | 用于获取紧邻匹配元素之后的元素 $("li:eq(1)").next().addClass("orange"); |
prev([expr]) | 用于获取紧邻匹配元素之前的元素 $("li:eq(1)").prev().addClass("orange"); |
siblings([expr]) | 用于获取位于匹配元素前面和后面的所有同辈元素 $("li:eq(1)"). siblings().addClass("orange"); |
遍历前辈元素
Query中可以遍历前辈元素
parent():获取元素的父级元素
parents():元素元素的祖先元素
jQuery中的事件
鼠标事件
方法 | 描述 | 执行时机 |
click( ) | 触发或将函数绑定到指定元素的click事件 | 单击鼠标时 |
mouseover( ) | 触发或将函数绑定到指定元素的mouseover事件 | 鼠标指针移过时 |
mouseout( ) | 触发或将函数绑定到指定元素的mouseout事件 | 鼠标指针移出时 |
mouseenter( ) | 触发或将函数绑定到指定元素的mouseenter事件 | 鼠标指针进入时 |
mouseleave( ) | 触发或将函数绑定到指定元素的mouseleave事件 | 鼠标指针离开时 |
键盘事件
方法 | 描述 | 执行时机 |
keydown( ) | 触发或将函数绑定到指定元素的keydown事件 | 按下键盘时 |
keyup( ) | 触发或将函数绑定到指定元素的keyup事件 | 释放按键时 |
keypress( ) | 触发或将函数绑定到指定元素的keypress事件 | 产生可打印的字符时 |
浏览器事件 :调整窗口大小时,完成页面特效
语法: $(selector).resize( );
绑定事件
移除事件