第五章 jQuery基础及选择器

1.jQuery 简介:由美国人John  Resig于2006年创建,设计思想是write less,do more

2.在页面中引入jQuery

<script src="js/jquery-1.12.4.js" type="text/javascript"></script>

3.jQuery语法规则

工厂函数$():将DOM对象转化为jQuery对象

选择器 selector:获取需要操作的DOM 元素

方法action():jQuery中提供的方法,其中包括绑定事件处理的方法

语法:$(selector).action()

4.jQuery操作页面元素

使用addClass( )方法为元素添加样式

使用css( )方法设置元素样式

使用show( )、hide( ) 方法设置元素的显示和隐藏

5.jQuery应用方法:addClass()、css()方法、show() 、hide()、 next()

1)使用jQuery弹出提示框

<script>

$(document).ready(function() {                为页面加载事件绑定方法

alert("我的第一个jQuery示例!");

});

</script>

2)addClass()方法:为元素添加样式

语法:jQuery 对象.addClass([样式名]);

示例:

$("tr:odd").addClass("odd");

$("tr:even").addClass("even");

3)css( )方法设置元素样式

语法:

css("属性","属性值");

css({"属性1":"属性值1","属性2":"属性值2"...});

示例

$(this).css({"background":"#c81623"});

4)show() 和hide()设置元素的显示和隐藏

语法:

$(selector).show( );

$(selector).hide( );

示例:

$(this).children("div").show();

$(this).children("div").hide();

6.jQuery代码风格

“$”等同于“jQuery

链式操作:对一个对象进行多重操作,并将操作结果返回给该对象

 示例:$("h2").css("background-color","#ccffff").next().css("display","block")

隐式迭代

示例:$(document).ready(function() {

$("li").css({"font-weight":"bold","color":"red"});

});

7.DOM对象和jQuery对象的区别:

DOM:Document Object Model(文档对象模型)

jQuery:是一个简洁而快速的JavaScript库,可用于简化事件处理,HTML文档遍历,Ajax交互和动画,以便快速开发网站。jQuery简化了HTML的客户端脚本,从而简化了Web 2.0应用程序的开发

DOM对象:直接使用JavaScript获得的节点对象   var objDOM=document.getElementById("title");   var objHTML=objDom.innerHTML;

jQuery对象:使用jQuery包装产生的能够使用jQuery中的方法的对象   $("#title").html();等同于document.getElementById("title").innerHTML;

DOM对象转换jQuery对象   使用$()进行转化:$(DOM)对象

jQuery对象转换DOM对象:1)通过index方法得到相应的DOM对象

                                            2)通过get(index)得到相应的DOM对象

8.jQuery能做什么?

访问和操作DOM元素

控制页面样式

对页面事件进行处理

与Ajax技术完美结合

9.jQuery的优势

体积小,压缩只有100KB左右

强大的选择器

出色的DOM包装

可靠的事件处理机制

出色的浏览兼容性

第五章 jQuery基础及选择器

上一篇:MVC


下一篇:OPNET之processor与queue