1、避免冲突
jQuery 使用 $ 符号作为 jQuery 的简介方式
<html>
<head>
<script type="text/javascript" src="jquery-1.12.2.min.js"></script>
<script type="text/javascript" src="demo.js"> ;</script>
</head> <body>
<h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>
/**
* Created by kunyashaw on 2016/3/23.
*/
var jq = jQuery.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").hide();
});
});
2、jquery常用
<html>
<head> <meta charset="utf-8">
<script type="text/javascript" src="jquery-1.12.2.min.js"></script>
<script type="text/javascript" src="demo.js"> ;</script> </head> <body>>
<div id="divAll">
<p id="p2">这是段落中的<b>粗体</b>文本。</p>
<br/>
<p id='p1'>This is a paragraph.</p>
<br/>
<a href="http://www.baidu.com" id="a1"> baidu </a>
<br/>
姓名:<input id='input'> </input> <div style="
position: relative;
width: 100px;
height: 200px;
background-color: blueviolet;"> This is another paragraph.</div> <button type="button" id='button1'>Click me</button>
<button type="button" id="button2">Click me2</button> <button type="button" id="button3">显示text</button>
</div> <button type="button" id="button4">显示html</button> </body>
</html>
/**
* Created by 众磊 on 2016/3/23.
*/
;
$(document).ready(function(){
$("#button1").click(function(){ var div= $('div');
var height = $('div').length;
$('div').hide(500, function () {
if(height-- > 1)
{return}
else
{
alert("over");}
}); $("#p1").css("color","red").slideUp(2000).slideDown(2000);
}); $("#button2").click(function () {
var a = $('a1');
alert($("#a1").attr('href')); var input = $('input');
alert(input.val());
input.val("oh no!张众磊");
}); var p = $('#p2');
$("#button3").click(function () {
alert(p.text());
p.html('<b>haha</b>');
}); $("#button4").click(function () {
//alert(p.html());
p.text("fucking");
$("#divAll").empty(); }); });