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>
投递牛客等公司10个岗位 >
