jQuery技术
1.jQuery选择器允许对元素组或单个元素进行操作,分为元素选择器,属性选择器以及css选择器
元素选择器例如:$("p#demo") 选取所有 id为"demo"的p元素,属性选择器例如:$([href='#']") 选取所有带有 href 值等于 "#" 的元素,
css选择器例如:$("p").css("background-color","red")2.jQuery事件函数及效果的切换,通过点击显示/隐藏实现Hello world!的动态效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="flip">显示/隐藏</div>
<div id="panel">Hello world!</div>3.jQuery获取内容
(1)text()设置或返回所选元素的文本内容
(2)html()设置或返回所选元素的内容(包括 HTML 标记)
(3)val() 设置或返回表单字段的值
(4)attr() 方法用于获取属性值
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
$("#btn1").click(function(){
alert("Value: " + $("#test").val());
});
$("button").click(function(){
alert($("#w3s").attr("href"));
});4.jQuery遍历
parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素
children() 方法返回被选元素的所有直接子元素。
find() 方法返回被选元素的后代元素,一路向下直到最后一个后代
siblings() 方法返回被选元素的所有同胞元素
next() 方法返回被选元素的下一个同胞元素
nextAll() 方法返回被选元素的所有跟随的同胞元素
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,它们返回的是前面的同胞元素
5.jQuery - noConflict() 方法
是为了解决同时使用jQuery与其他框架时,其他框架也占用$符号的问题
我们可以使用使用noConflict()函数,重新定义名字即可实现所需效果,例如:
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
var jq=$.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").hide();
});
});
</script>
</head>
<body>
<h2>这是标题</h2>
<p>这是一个段落。</p>
<button>请点击这里</button>
</body>
</html>
查看14道真题和解析
