初识jQuery
-
预习检查
- 简单描述JavaScript与jQuery的关系
- jQuery的语法结构包括哪几部分？
- 在jQuery中用于加载文档的方法是什么？
- 在jQuery中显示和隐藏HTML元素的方法分别是什么？
-
本章任务
- 编写第一个jQuery程序
- 制作当当顶部导航
- 使用jQuery变换网页效果
- 制作广告图片轮播切换效果
-
本章目标
- 能够搭建jQuery开发环境
-
使用ready( )方法加载页面、掌握jQuery语法
- 使用addClass( )方法和css( )方法为元素添加CSS样式
- 使用next( )方法获取元素
- 会使用show( )和hide( )显示和隐藏元素
-
jQuery简介
- jQuery由美国人John Resig于2006年创建
- jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装
- 它的设计思想是write less,do more
- 初识jQuery
示例：
实现隔行变色效果，只需一句关键代码
$("tr:even").css("background-color","#e8f0f2");
- jQuery的应用
jQuery与其他JavaScript库
-
-
- jQuery
- Bootstrap
- Zepto
- Ext
- YUI
-
-
jQuery能做什么？
- 访问和操作DOM元素
- 控制页面样式
- 对页面事件进行处理
- 扩展新的jQuery插件
- 与Ajax技术完美结合
提示：
jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率
-
jQuery的优势
- 体积小，压缩后只有100KB左右
- 强大的选择器
- 出色的DOM封装
- 可靠的事件处理机制
- 出色的浏览器兼容性
- 使用隐式迭代简化编程
- 丰富的插件支持
-
jQuery库文件
- jQuery库分开发版和发布版
-
- 在页面中引入jQuery
<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
- jQuery基本语法
使用jQuery弹出提示框
示例：
<script>
$(document).ready(function() {
alert("我欲奔赴沙场征战jQuery，势必攻克之！");
});
</script>
- $(document).ready()
$(document).ready()与window.onload类似，但也有区别
- jQuery语法结构
语法：
$(selector).action() ;
工厂函数$()：将DOM对象转化为jQuery对象
选择器 selector：获取需要操作的DOM 元素
方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法
-
jQuery操作页面元素
- 使用addClass( )方法为元素添加样式
- 使用css( )方法设置元素样式
- 使用show( )、hide( ) 方法设置元素的显示和隐藏
$(function(){
$("tr:even").css("background-color","#e8f0f2");
});
- addClass( )方法
语法：
jQuery 对象.addClass([样式名]);
示例：
$("#current").addClass("current");
- css( )方法
语法：
css("属性","属性值") ;
css({"属性1":"属性值1","属性2":"属性值2"...}) ;
示例：
$(this).css({"background":"#c81623"});
- 设置元素的显示和隐藏
语法：
$(selector).show( );
$(selector).hide( );
示例：
$(".nav-top").show( );
$("p").hide( );
-
jQuery代码风格
- “$”等同于“ jQuery ”
$(document).ready()=jQuery(document).ready()
$(function(){...})=jQuery (function(){...})
-
- 链式操作
- 隐式迭代
- 链式操作
对一个对象进行多重操作，并将操作结果返回给该对象
示例：
$("h2").css("background-color","#ccffff").next().css("display","block");
- 隐式迭代
示例：
$(document).ready(function() {
$("li").css({"font-weight":"bold","color":"red"});
});
- 添加注释
- DOM模型
浏览器把HTML文档的元素转换成节点对象，所有节点组成了一个树状结构
-
DOM对象和jQuery对象
- 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");
var $txtName =$(txtName);
注意：
jQuery对象命名一般约定以$开头
在事件中经常使用$(this)，this是触发该事件的对象
-
jQuery对象转DOM对象
- jQuery对象是个类似数组的对象，可以通过[index]的方法得到相应的DOM对象
var $txtName =$ ("#txtName");
var txtName =$txtName[0];
-
- 通过get(index)方法得到相应的DOM对象
var $txtName =$("#txtName");
var txtName =$txtName.get(0);
- 总结