|
;
</body>
</html>
--3、window.onload与$(document).ready()的对比
window.onload:
执行时机:
必须等待网页中所有的内容加载完毕后(包括图片,Flash、视频等)才能执行
编写个数:
同一时间不能编写多个
执行以下代码:
window.onload=function(){
alert("小明学习不好");
}
window.onload=function(){
alert("小明学习不好");
}
结果只会输出一个"小明学习不好"
简写方法:
无
$(document).ready():
执行时机:
网页中所有DOM文档结构绘制完毕后即刻执行,可能与DOM元素关联的内容(图片、flash、视频等)并没有加载完
编写个数:
同一时间能同时编写多个
执行以下代码:
$(document).ready(function(){
alert("小明学习不好");
});
$(document).ready(function(){
alert("小明学习不好");
});
结果会输出两次"小明学习不好"
简化写法:
$(document).ready(function(){
//执行代码
});
可以简写成:
$(function(){
//执行代码
});
--4、jQuery语法结构
-1.通过语句$(document).ready(function(){});不难发现,这条jQuery语句主要包含三大部分:$()、document和ready()。这三大部分在jQuery中分别称为工厂函数、选择器函数和方法,将其语法化后,结构如下。
语法:
$(selector).action();
-2.工厂函数$()
在jQuery中,美元符号"$"等价于jQuery,即$()=jQuery()。$()作用是将DOM对象转化为jQuery对象,只有将DOM对象转化为jQuery对象后,才能使用jQuery的方法
-3.选择器selector
jQuery支持CSS 1.0到CSS 3.0规则中几乎所有的选择器,如标签选择器、类选择器、ID选择器和后代选择器和后代选择器等,使用jQuery选择器和$()工厂函数可以非常方便地获取操作的DOM元素,语法如下。
语法:
$(selector)
ID选择器、标签选择器、类选择器的用法如下所示。
$("#userName") //获取DOM中id为userName的元素
$("div") //获取DOM中所有的div的元素
$(".content"); //获取DOM中class为content的元素
-3.方法action()
jQuery中提供了一系列方法。在这些方法中,一类重要的方法就是事件处理方法,主要用来绑定DOM元素的事件和事件处理方法。
1.addClass()方法是jQuery中用于进行CSS操作的方法之一,它的作用是被向被选元素添加一个或多个类样式,它的语法格式如下。
语法:
jQuery 对象.addClass([样式名])
2.$(this)的一个jQuery对象,指向鼠标指针当前移向的一菜单级
3.css()方法是jQuery中用于进行CSS操作的另一种方法,它的作用是为匹配的元素添加CSS样式,它的语法格式如下。
4.show()、hide()在jQuery中经常用到,分别用来显示、隐藏HTML元素,简单的语法格式如下。
语法:
$(selector).show();
$(selector).hide();
5.获取当前元素的下一个元素
next();
--5、jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象,他能够使用jQuery中的方法
--6、DOM对象和jQuery对象互转
-1.dom对象转成jquery对象
获取dom对象:var title = document.getElementById("title");
把dom对象转成jquery对象 var $title=$(title)括号中的是dom对象
-2.jquery对象转成dom对象
获取jquery对象 var $title=$("#title");
把jquery对象转成dom对象 var title = $title.get(0);
-------------------------------------------------------------------------------------------------------------------------------------------
第六章 jQuery选择器
--1、介绍
-1.Query选择器的优势
1.简介的语法
2.完善的处理机制
-2.属性选择器就是通过HTML元素的属性选择元素的选择器,它与CSS中的属性选择器语法构成完全一致。
-3.过滤选择器主要通过特定的过滤规则来筛选出需的DOM元素,过滤规则与CSS中的伪类语法相同,即选择器都一一个冒号(:)开头,冒号前是需要过滤的元素。
-4.过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。
-5.编写选择器时需要注意特殊符号和空格
--2、属性选择器
语法 描述
[attribute] 选取包含指定属性的元素
[attribute = value] 选取指定等于属性的某个元素
[attribute != value] 选取不是指定属性的某个元素
[attribute ^= value] 选取指定属性是以某个特定值开始的元素
[attribute $= value] 选取指定属性是以某个特定值结束的元素
[attribute *= value] 选取包含某个属性的元素
--3、基本过滤选择器
语法 描述
:first 选取第一个元素
:last 选取最后一个元素
:not(selector) 选取去除所有与给定选择器匹配的元素
:even 选取索引是偶数的元素
:odd 选取索引是基数的元素
:eq(index) 选取索引等于index的元素
:gt(index) 选取索引大于index的元素
:lt(index) 选取索引小于index的元素
:header 选取索引标题元素如h1、h2等
:focus 选取当前获取焦点的元素
:animated 选择所有动画元素
--4、可见性过滤选择器
选择器 描述
:visible 选取所有可见元素
:hidden 选取所有隐藏元素
--5、层次选择器
后代选择器 div p 中间加空格 {意思是div里面全部带p标签的全部选择}
子选择器 div>p 中间大于号{意思是div相当于爷爷 下面第一个p标签相当于他的儿子 被选中}
相邻选择器 div+p 中间加好 {和div平级也就是邻居 而第一家邻居被选择}
通用邻居选择器 div~p 中间波浪号{和div的平级是邻居 而此选择器选择的适合他的全部同级邻居}
-------------------------------------------------------------------------------------------------------------------- |