12、jQuery知识总结-2
1、避免冲突
jQuery 使用 $ 符号作为 jQuery 的简介方式
1 <html> 2 <head> 3 <script type="text/javascript" src="jquery-1.12.2.min.js"></script> 4 <script type="text/javascript" src="demo.js"> ;</script> 5 </head> 6 7 <body> 8 <h2>This is a heading</h2> 9 10 <p>This is a paragraph.</p> 11 12 <p>This is another paragraph.</p> 13 <button type="button">Click me</button> 14 </body> 15 </html>
1 /** 2 * Created by kunyashaw on 2016/3/23. 3 */ 4 var jq = jQuery.noConflict(); 5 jq(document).ready(function(){ 6 jq("button").click(function(){ 7 jq("p").hide(); 8 }); 9 });
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(); }); });
