JQuery 学习笔记 选择器之一_Javascript教程-查字典教程网
JQuery 学习笔记 选择器之一
JQuery 学习笔记 选择器之一
发布时间:2016-12-30 来源:查字典编辑
摘要:本章主要先对Jquery的选择器进行说明下,本人也不敢说讲解,哈,因为我也是正在学习中,本系列文章所写目的只在与对自己学习过程中的心得等记录...

本章主要先对Jquery的选择器进行说明下,本人也不敢说讲解,哈,因为我也是正在学习中,本系列文章所写目的只在与对自己学习过程中的心得等记录下来,一方面加强自己的印象,另一方面共享下学习的经验,呵,小弟刚开始写这种文章,希望大家多多支持^^,有哪些方法不好可以跟贴指导指导^^

现在,让我们一起开始在JQuery的世界里飞翔吧^^

首先,本章先来学习JQuery最基本的选择器的使用咯

先声明下,使用JQuery最基本的规则

$(document).ready(function(){

//do something

})

而在本系列文章中,采用缩写

$(

function(){

//do something

}

)

关于例子中使用的外部JS文件jquery-1.3.2.js则是使用JQuery的最基本的库文件,没有的同学可以去 这里下载也可到我CSDN的资源里去下

好咯,以下是我做测试用的HTML文件内容,大家可参考下

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css"><></style><style type="text/css" bogus="1"> .test{

background:red;}</style>

<script src="js/jquery-1.3.2.js"></script>

<script type="text/javascript"><></script>

<title>无标题文档</title>

</head>

<body>

<form>

<p id="oneP">one</p> <div><p>two</p></div>

</form>

<form>

<p>three</p>

</form>

<a href="#" id="aFirst">获取ID为"oneP"的HTML内容</a>|

<a href="#" id="aSecond">获取所有Form元素的HTML的内容</a>|

<a href="#" id="aThird">获取CSS样式为test的HTML的内容</a>|

<a href="#" id="aFourthly">获取页面所有HTML内容</a><br />

Result:

<div >

<span id="sResult"></span>

</div>

</body>

</html>

本章讲的内容分别就是四个连接元素aFirst、aSecond、aThird、aFourthly所完成的功能

先对代码中一起不属性选择器的内容进行解释下吧

1.element.html(string content)

这个方法也是属于比较常用的功能吧

当此方法无传参数时,则用于读取当前element的纯HTML内容,如果传参进去使用时,则为修改element的HTML内容,这应该还算好理解吧^^

2.each()

此方法主要就是用于遍历element数组,比如例子中的aSecond连接,当点击aSecond时,将会遍历页面中的两个Form表单,并用.html()方法来显示每个表单的内容

课外就简单讲到这,现在该讲正题咯

1.$("#ID")

描述:此方法用于根据Element的ID来获取该元素,学过JS的人应该很容易了解此意思,就相当于JS里的document.getElementById("ID");

在例子中,就用此方法来获取ID为oneP的元素,并显示其HTML内容.

返回值:Element

2.$("TagName")

描述:此方法用于获取某种元素的的集合,相当于JS里的document.getElementsTagName("TagName").如例子中获取所有的Form表单元素集合.

返回值:Array(Element);

3.$(".className")

描述:此方法用于获取使用某个样式的元素集合,如例子中获取样式为test的元素集合.

返回值:Array(Element);

4.$("*")

描述:用于获取页面上所有的HTML,目前还不知道这个有哪些实用的地方,哈,先存着

返回值:Array(Element);

5.$("#ID,TagName,.className,...N")

描述:此方法其实就是把前四种选择器合起来一起用,以","进行分隔,返回一个元素集合,上面没例子,我就在这稍做个解释,比如要获取ID为oneP、DIV元素、样式为test的元素,即可使用$("#oneP,div,.test")。

返回值:Array(Element);

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类