JQUERY的基本使用方法

#准备工作

• 在官网下载JQUERY库
• 将库在你需要的网页上引用

  1 2 3

  <head> <script src="jquery.js"></script> </head>

#Jquery的基本语法

• 所有Jquery代码都需在如下代码里运行

  1 2 3

  $(function(){ --- jQuery functions go here ---- })

• 大致语法

  1 2 3 4 5

  基础语法是：$(selector).action() 美元符号定义 jQuery 选择符（selector）“查询”和“查找” HTML 元素 jQuery 的 action() 执行对元素的操作

示例

1
2
3
4

$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落 大专栏  JQUERY的基本使用方法
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素

#Jquery 选择器

• 元素选择器

  1 2 3

  $("p") 选取 <p> 元素。 $("p.intro") 选取所有 class="intro" 的 <p> 元素。 $("p#demo") 选取所有 id="demo" 的 <p> 元素。

• 属性选择器

  1 2 3 4

  $("[href]") 选取所有带有 href 属性的元素。 $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。 $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。 $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

• CSS 选择器

  1	$("p").css("background-color","red");

• jQuery 选择器