在WebRoot下建立jquery文件夹,添加jquery-2.0.3.js文件,添加script
1 <script type="text/javascript" src="jquery/jquery-2.0.3.js"></script> 2 <script type="text/javascript"> 3 $(document).ready(function(){ //为了防止文档在完全加载(就绪)之前运行 jQuery 代码 4 $("button").click(function(){ 5 $("p").hide(); //隐藏p标签 6 }); 7 }); 8 </script>
body主体:点击按钮隐藏p标签
1 <body> 2 <h2>this is a heading !</h2> 3 <p>this is a paragraph!</p> 4 <p>this is another paragraph!</p> 5 <button type="button">click me</button> 6 </body>
也可直接点击p标签内容进行隐藏,script内容改为
1 <script> 2 $(document).ready(function(){ 3 $("p").click(function(){ 4 $(this).hide(); 5 }); 6 }); 7 </script>
如果您不愿意在自己的计算机上存放 jQuery 库,那么可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件
1 <!--使用 Google 的 CDN--> 2 <head> 3 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs 4 /jquery/1.4.0/jquery.min.js"></script> 5 </head> 6 <!--使用 Microsoft 的 CDN--> 7 <head> 8 <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery 9 /jquery-1.4.min.js"></script> 10 </head>
jQuery 元素选择器,使用 CSS 选择器来选取 HTML 元素,CSS 选择器可用于改变 HTML 元素的 CSS 属性
$(this).hide()隐藏当前的 HTML 元素,$("p").hide()隐藏所有 <p> 元素,
$(".test").hide()隐藏所有 class="test" 的元素,$("p.intro") 选取所有 class="intro" 的 <p> 元素,
$("#test").hide()隐藏 id="test" 的元素,$("p#demo") 选取所有 id="demo" 的 <p> 元素;
jQuery 属性选择器,使用 XPath 表达式来选择带有给定属性的元素
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素,$("[href='#']") 选取所有带有 href 值等于 "#" 的元素,
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素,$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。