一、认识jQuery库与Jquery常用选择器
1、js和jQuery的关系?
js是网页开发语言,jQuery是基于js的一种框架,也是对js对象和函数的封装。
jquery选择器
$(this).hide() // 隐藏当前元素
$(“p”).hide() // 隐藏所有段落
$(".t").hide() //隐藏所有 class=“t” 的所有元素
$("#t").hide() //隐藏所有 id=“t” 的元素
2、创立者和时间,以及思想
jQuery是由美国人John Resig在2006年创建的。
设计思想:write less,do more (写更少,做更多)。
3、jQuery能做什么?
访问和操作DOM元素
控制页面样式
对页面事件进行处理
可以扩展新的jQuery插件
与Ajax技术结合。
注意:jQuery能做的,js也能做,但是jQuery能够提升开发效率!!!
4、jQuery的优点
体积少,少占内存
有着强大的选择器
出色的DOM封装
可靠的事件处理机制
对浏览器的兼容性
使用隐式迭代简化编程
丰富的插件支持
5、获取jQuery库
直接官网下载:http://jquery.com
6、引入jQuery库
7、$(document).ready()与window.onload类似,但也有区别
window.onload
$(document).ready()
执行时机
必须等待网页中所有的内容加载完毕后(包括图片、flash、视频等)才能执行
网页中所有DOM文档结构绘制完毕后即刻执行,可能与DOM元素关联的内容(图片、flash、视频等)并没有加载完
编写个数
同一页面不能同时编写多个
同一页面能同时编写多个
简化写法
无
$(function(){
//执行代码
}) ;
二、jQuery的基本使用
1、语法定义:
$(selector).action() ;
工厂函数$():将DOM对象转化为jQuery对象
选择器 selector:获取需要操作的DOM 元素
方法action():jQuery中提供的方法,其中包括绑定事件处理的方法
2、操作页面元素
使用addClass( )方法为元素添加样式
语法如下:
jQuery 对象.addClass([样式名]);
示例:
$("#current").addClass(“current”);
注意:$(“”)指选择的jQuery对象,addClass是添加样式,里面是自己定义的样式!!!
使用css( )方法设置元素样式
//设置元素的样式:单个属性
css("属性","属性值") ;
//多个属性:
css({"属性1":"属性值1","属性2":"属性值2"...})
//示例:
$(this).css({"background":"#c81623"});
//注释:选择的是当前元素,设置样式!
//使用show( )、hide( ) 方法设置元素的显示和隐藏
//设置显示
$(selector).show( );
//设置隐藏
$(selector).hide( );
//如下:
$("p").show( );
$("p").hide( );
3、jQuery代码的风格
$(document).ready()=jQuery(document).ready();
$(function(){...})=jQuery (function(){...});
注意:在jQuery中,$就代表jQuery
4、链式操作和隐式操作
链式操作:对一个对象进行多重操作,并将操作结果返回给该对象。
$("h2").css("background-color","#ccffff").next().css("display","block");
//注释:给h2设置样式,给h2的下一个同胞元素添加样式。
隐式操作:
$(document).ready(function() {
$("li").css({"font-weight":"bold","color":"red"});
});
//注释:给li添加样式
5、DOM模型
浏览器把HTML文档的元素转换成节点对象,所有节点组成了一个树状结构!
DOM对象:直接使用JavaScript获取的节点对象。
var objDOM=document.getElementById(“title”);
var objHTML=objDOM.innerHTML;
jQuery对象:使用jQuery包装DOM对象后产生的对象,它能够使用jQuery中的方法。
$("#title").html( );
等同于
document.getElementById(“title”).innerHTML;
注意:DOM对象和jQuery对象分别拥有一套独立的方法,不能混用!
DOM对象转jQuery对象:
``
//DOM对象
var txtName =document.getElementById(“txtName”);
//jQuery对象
var
t
x
t
N
a
m
e
=
txtName =
txtName=(txtName);
//注意:jQuery对象命名一般约定以$开头,在事件中经常使用$(this),this是触发该事件的对象,也就是指当前对象
jQuery对象转DOM对象:
// jQuery对象是一个类似数组的对象,可以通过[index]的方法得到相应的DOM对象
//jQuery对象
var $txtName =$ ("#txtName");
//DOM对象
var txtName =$txtName[0];
//通过get(index)方法得到相应的DOM对象
//JQuery对象
var $txtName =$("#txtName");
//DOM对象
var txtName =$txtName.get(0);