没有合适的资源?快使用搜索试试~ 我知道了~
jQquery 入门 选择符 事件 效果 DOM操作
资源推荐
资源详情
资源评论
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![CHM](https://img-home.csdnimg.cn/images/20210720083646.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![exe](https://img-home.csdnimg.cn/images/20210720083343.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/release/download_crawler_static/4614731/bg1.jpg)
jQuery 入门[1]-构造函数
http://thinhunan.cnblogs.com/archive/2008/03/05/1091816.htmljQuery 优点
◦ 体积小(v1.2.3 15kb)
◦ 丰富的 DOM 选择器(CSS1-3 + XPath) ◦跨浏览器(IE6,FF,Safari,Opera)
◦ 链式代码
◦ 强大的事件、样式支持
◦ 强大的 AJAX 功能
◦ 易于扩展,插件丰富
jQuery 的构造函数接收四种类型的参数:
jQuery(expression,context)
jQuery(html)
jQuery(elements)
jQuery(fn)
第一种根据表达式(ID,DOM 元素名,CSS 表达式,XPath 表达式)找出文档中的元素,
并组装成一个 jQuery 对象返回。
DEMO:
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>
<title>jQuery basictitle>
<style type="text/css">
.selected
{
background-color:Yellow;
}
style>
<script src="../scripts/jquery-1.2.3.intellisense.js"
type="text/javascript">script>
head>
<body>
<h3>jQuery 构造函数 h3>
<ul>
<li>jQuery(expression,context)li>
<li>jQuery(html)li>
<li>jQuery(elements)li>
<li>jQuery(fn)li>
ul>
<script type="text/javascript">
![](https://csdnimg.cn/release/download_crawler_static/4614731/bg2.jpg)
script>
body>
html>
将以下 jQuery 代码加入文末的脚本块中:
jQuery("ul>li:first").addClass("selected");
页面运行效果如下:
其中 jQuery()可替换为快捷方式$(),如 果 $被其它对象占用,可使用 jQuery.noConflict()
函数取消快捷方式。
"ul>li:first"中 ul>li 表示所有位于 ul 下的 li 元素(为 CSS 表达式,XPath 方式可用
ul/li),:first 表示其中的第一个。addClass()为 jQuery 对象用来添加 CSS 样式类的函数,
相反的函数为 removeClass()。
再加入以下代码:
$('ul').append($('
new item '));
运行效果如下:
其中$('
new item
')将其中的字符串转换为 DOM 对象,然后通过 append()函数加入 ul 对象的最后。
接下来:
$(document).ready(function(){
$('ul').css('color','red');
});
则效果如:
![](https://csdnimg.cn/release/download_crawler_static/4614731/bg3.jpg)
jQuery 构造函数中还可以真接传入 DOM 对象,如 document,或 jQuery 对象(当然就
没什么意义)。ready()函数为 document 添加事件处理函数,将 ul 的颜色设为红色。
$(document).ready()由于应用场景众多,所以可以直接用$(fn)来代替,fn 表示处理函
数 。( ready 处理函数貌似在文档内容载入完成后执行,无需等待相关其它图片等资源载入
完成,所以比 load 事件要更早执行,对于这点,没有具体证实)
$(function(){
alert('welcome to jQuery');
});
以上代码的效果是页面一载入,就弹出一个对话框。
jQuery1.2 选择器
jQuery1.2选择器
以下的文档根据官网1.2选择器汉化,并做相应的调整及加入了部份示例。
由于实际使用中选择器在 IE 和非 IE 下会有不同的效果,请参照红色的字样。如有错误请
及时联系我。
绯雨汉化:http://feiyu.asgard.cn/http://feiyu.asgard.cn
基本选择器
#myid
返回:对象>
匹配一个 id 为 myid 的元素。
element
返回:对象>数组
匹配所有的 element 元素
.myclass
返回:对象>数组
匹配所有 class 为 myclass 的元素
*
返回:对象>数组
匹配所有元素。该选择器会选择文档中所有的元素,包括 html,
head,body
selector1,selector2,selectorN
返回:对象>数组
匹配所有满足 selector1或 selector2或 selectorN 的元素
层次选择
elementParent elementChild
返回:对象>数组
![](https://csdnimg.cn/release/download_crawler_static/4614731/bg4.jpg)
匹配 elementParent 下的所有子元素 elementChild。例如:$("div p")选择所有 div 下的 p
元素
elementParent > elementChild
返回:对象>数组
匹配 elementParent 下的子元素 elementChild。例如:$("div>p")选择所有上级元素为 div
的 p 元素
prev+next
返回:对象>数组
匹配 prev 同级之后紧邻的元素 next。例如:$("h1+div")选择所有 div 同级之前为 h1的元
素()
prev ~ siblings
返回:对象>数组
匹配 prev 同级之后的元素 siblings。例如:$("h1~div")可以匹配()
基本滤镜
:first
返回:对象>
匹配第一个元素
:last
返回:对象>
匹配最后一个元素
:not(selector)
返回:对象>数组
匹配不满足 selector 的元素
:has(selector)
返回:对象>数组
匹配包含满足 selector 的元素。此选择器为1.2新增
:even
返回:对象>数组
从匹配的元素集中取序数为偶数的元素。
:odd
返回:对象>数组
从匹配的元素集中取序数为奇数的元素。
:eq(index)
返回:对象>数组
从匹配的元素集中取第 index 个元素
:gt(index)
返回:对象>数组
从匹配的元素中取序数大于 index 的元素
:lt(index)
返回:对象>数组
从匹配的元素中取序数小于 index 的元素
:header
返回:对象>数组
匹配所有的标题元素,例如 h1,h2,h3……hN。此选择器
剩余19页未读,继续阅读
资源评论
![avatar-default](https://csdnimg.cn/release/downloadcmsfe/public/img/lazyLogo2.1882d7f4.png)
![avatar](https://profile-avatar.csdnimg.cn/default.jpg!1)
kangliu592
- 粉丝: 0
- 资源: 3
上传资源 快速赚钱
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![voice](https://csdnimg.cn/release/downloadcmsfe/public/img/voice.245cc511.png)
![center-task](https://csdnimg.cn/release/downloadcmsfe/public/img/center-task.c2eda91a.png)
安全验证
文档复制为VIP权益,开通VIP直接复制
![dialog-icon](https://csdnimg.cn/release/downloadcmsfe/public/img/green-success.6a4acb44.png)