您的位置：首页 > Web前端 > JQuery

jQuery学习笔记

2016-05-07 21:42 323 查看

基本选择器

选择器是用来从HTML文档中选择一个或者一组标签。

“#id”：id选择器，通过 id 属性来进行选择。关键字“#”

“.class”：类选择器，通过 class 属性来选择标签。关键字“.”

“element”：标签选择器，只写 element 的名字，用来选择一组标签。注意：不用加尖括号。例如：$(“div”).addClass(“green”);

“element *”：选择指定 element 的全部子代。

“selector，selector…，selector”：多个简单的选择器叠加，用逗号隔开。例如：$(“div,p”).hide();

层次选择器

示例代码：
<body>
<h3>attr()方法设置元素属性</h3>
<p>body的子代。</p>
<span id="1">hello</span>
<span></span>
<span></span>
<span></span>
<div>
<p>div的子代。</p>
<span id="2"></span>
<span></span>
<span></span>
<span></span>
</div>
</body>

“div p”：选择 div 所有的 p 子代“p1”和“p2”。

“body > p”：父子选择器。

“p + span”：邻居选择器，只选择所有符合条件组的第一个邻居，选择的是

<span id="1">

和

<span id="2">

标签。

“p ~ span”：邻居选择器加强版，选择所有组的所有邻居

过滤选择器

常常用来选择单个标签。属性过滤选择器，内容过滤选择器，元素过滤选择器比较好用，其他参考 jQuery中文网。例如：

$("span[id=2]").css("color","green");  //属性过滤选择器
$("span[id!=2]").css("color","green"); //属性过滤反选器
$("p:contain('div')").css("color","green");    //内容过滤选择器
$("span:has('id')").css("color","green");  //元素过滤选择器

表单选择器

涉及到

form

的选择器要加空格，就像这样

form

。例如：

$("form :input").css("color","green");

表单选择器，选择的是各个表单的

type

属性。下面是几个示例：

$("form :password").css("color","green");  //选择type="password"的表单
$("form :radio").css("color","green");     //选择type="radio"的表单

:input

选择器比较特殊，他选择的不仅仅是

<input>

标签，选择的是

input

select

textarea

标签。但是已经被

.filter(":input")

代替。

对DOM的操作

两种获取文本内容的方式比较

.html()

和

.text()

的区别在于，前者不仅仅获得文本，而且包括文本格式，而后者仅仅是获得纯文本。

ready 和 onLoad 的比较

ready的调用方式：

$(document).ready(function(){...})

或者可以写为

$(function(){...})

onLoad的调用方式：

window.onLoad=function(){...}

所属不同：ready 为 jQuery 所有， onLoad 是原生JavaScript。

加载顺序不同：ready 函数是按 Dom 树的构建顺序，同 Script 标签一同加载执行的。onLoad 是在 Dom 树加载完成后，再进行执行。

jQuery事件

绑定事件：以前用

bind(event, function(){...})

现在用

on

。

$(this).bind("click change",function(){...});  //绑定多个事件时，同时放在第一个变量里，用空格隔开

toggle(functionA,functionB,...,functionX)

为点击事件绑定多个处理函数。

triggle(event)

手动触发一个事件，这个事件可以是自定义的，也可以是原有的。示例如下，绑定了一个自定义的事件

change-color

并且手动触发了它。

<script type="text/javascript">
$(function () {
$("div").bind("change-color", function () {
$(this).addClass("color");
});
$("div").trigger ("change-color");
});
</script>

bind()

的加强版————

live()

：它可以将事件绑定到动态元素(在 javascript 中动态创建的标签为动态标签)中。

一些常用事件：

focus 和 blur：聚焦和取消聚焦是的两个事件

hover：指针移入目标的触发该事件

change：在选择框中，选择内容改变，或者文本内容改变时触发该事件

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航