JQuery自学记录1——库加载及选择器

最新推荐文章于 2024-07-16 23:55:42 发布

sjerry_9

最新推荐文章于 2024-07-16 23:55:42 发布

阅读量353

点赞数

分类专栏： JQuery 文章标签： jquery function class microsoft button 脚本

8 篇文章 0 订阅

订阅专栏

一、加载JQuery库

1、本地加载：

<head>
 <script type="text/javascript" src="jquery.js"></script>
</head>

2、使用Google或者Microsoft的CDN（内容分发网络？）

<head>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
</head>

<head>
 <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
</head>

二、一般格式：

书写JQuery一般使用document的ready函数，等页面加载完毕后再运行相应的js脚本，保证js脚本运行正确。

<script type="text/javascript">
 $(document).ready(function(){
  $("button").click(function(){
   $("p").hide();
  });
 });
</script>

对这段代码解释如下：

1、$符号：类似document.getElementByTagName的功能，后面的括号参数可以有三种：

1)("p")含义：对应页面中所有的p元素

2)("#p1")含义：对应页面中第一个id=p1的元素

3)(".p2")含义：对应页面中class=p2的元素

4)延伸类推：$("p.test")含义：对应页面中class=test的p元素

2、$(document).ready(function(){...});

这段是实现上面说的，待页面document加载完毕ready后再执行后面的函数function内容。

3、$("button").click(function(){...});

这段是说页面中所有的按钮被点击click后就执行后面的函数function内容。

4、$("p").hide();

hide()这个函数是JQuery中实现隐藏功能的，这段会隐藏页面中的所有p标签。

三、JQuery选择器：

1)上面二.1说的就是选择器，不过只说了基础，选择操作对象的方法还可以更加复杂一些，以下是W3SCHOOL的原表：

语法	描述
$(this)	当前 HTML 元素
$("p")	所有 <p> 元素
$("p.intro")	所有 class="intro" 的 <p> 元素
$(".intro")	所有 class="intro" 的元素
$("#intro")	id="intro" 的第一个元素
$("ul li:first")	每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']")	所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")	id="intro" 的 <div> 元素中的所有 class="head" 的元素

2)css直接赋值：

如把所有 p 元素的背景颜色更改为红色：$("p").css("background-color","red");

四、JQuery事件：类似上面二.3的click事件还可以用dblclick（双击事件）、focus（焦点事件）、mouseover（鼠标悬停事件）等（还有很多= =！）。

未完待续……

关注