JQUERY的基本使用方法

时间：2020-02-01 12:47:08 收藏：0 阅读：92

技术图片

#准备工作

在官网下载JQUERY库

将库在你需要的网页上引用

1
2
3

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

#Jquery的基本语法

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

1
2
3

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

大致语法

基础语法是：$(selector).action()

美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

示例

$(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> 元素。

属性选择器

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

CSS 选择器
1
$("p").css("background-color","red");
jQuery 选择器