一、jquery安装
方法一,下载jquery,在页面中引用:
<head> <script src="jquery.js"></script> </head>
方法二,使用google CDN(内容分发网络):
<head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"> </script> </head>
二、语法示例
$("p").hide() 隐藏所有<p>段落 $(this).hide() 隐藏当前标签 $("p.test").hide() 隐藏所有class=test的<p>段落 $("p#test").hide() 隐藏所有id=test的<p>段落
jquery基本的语法是:$(selector).action()
美元符号用来定义Jquery;
选择符(selector)用来查询html元素;
action()用来执行对html元素的操作;
开始使用jquery:
$(document).ready(function(){..........});
所有的jquery函数都位于document ready函数中,为了防止文档在完全加载前就运行行jquery代码。
三、选择器
示例:
$("[href]") 选择所有href
$("[href='#']")选择所有路径为#的href
$("[href!='#']")选择所有路径不为#的href
$("[href$='.jpg']")选择所有尾部为.jpg的href
jquery css选择器,可以改变html元素的css属性,示例:
$("p").css("backgroundcolor","red");
四、jquery事件
示例:
javascript代码练习 目的:点击button,让所有的段落隐藏 <html> <head> <script src=""></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); </script> </head> <body> <h2>这是一段代码<h2> <p>这是一个段落</p> <p>这是另一个段落</p> <button>click me</button> </body> </html>