第十讲jQuery.pptVIP

本章目标 了解什么是jQuery 使用jQuery选择器获得操作对象 使用jQuery处理页面事件 使用jQuery动画方法创建简单动画 jQuery是一个轻量的JavaScript库，是由John Resig在2006年1月创建的一个开源项目 jQuery常规作用可以概括为以下7个方面： 获取页面中的元素 修改页面外观 改变页面内容 响应用户在页面上的操作 为页面添加动态效果 页面无刷新获取服务器端信息 简化常规的JavaScript代码 jQuery简介 编写第一个jQuery应用 配置jQuery环境 在页面中添加对于jQuery库文件的引用 编写jQuery代码 script src=js/jquery-1.9.1.min.js type=text/javascript/script script type=text/javascript $(document).ready(function() { alert(Hello World!); }); /script 编写第一个jQuery应用 比较 $(document).ready(function(){}) window.onload() 执行时机 网页中的DOM结构绘制完毕，但可能有些DOM元素关联的内容还没有下载完毕 网页中所有的内容都加载完毕后触发，包括元素关联的内容（如链接的图片和资源）都必须下载完毕后触发 执行个数 同时编写多个，可以依次执行 同时编写多个，但只能执行最后一个 简化写法 简写一：$().ready(function(){}); 简写二：$(function(){}); 无 工厂函数$() $(document).ready(function(){}) jQuery选择器 选择器 说明 返回值 示例 #id 根据id选择元素 元素 $(‘#div1’)：选取id=”div1”的元素 .class 根据类名选择元素 元素集合 $(‘.first’)：选取所有class=”first”的元素 tagname 根据标记名选择元素 元素集合 $(‘input’)：选择所有的input元素 * 选择所有元素 元素集合 $(‘*’)：选择所有的元素 selector1,selector2,…selectorN 将每一个选择器匹配的元素合并后一起返回 元素集合 $(‘input,#div2’)：选择所有的input元素和id=”div2”的元素 $(#btn1).click(function() { $(#div1).css(width, 20px).css(height, 20px); }); $(#btn2).click(function() { $(‘.inner’).css(‘background-color’, ‘red’); }); $(#btn3).click(function() { $(div).hide(); }); $(#btn5).click(function() { $(‘*’).css(‘background-color’, ‘white’); }); $(#btn6).click(function() { $(input,#div2).css(background-color,gray); }); jQuery DOM操作 方法 说明 示例 html() 获取或设置html内容 var $phtml=$(‘p’).html()：获取p元素的html代码 $(‘p’).html(‘strong标题/strong’)：设置p元素的html内容 text() 获取或设置元素的文本 var $txt=$(‘p’).text()：获取p元素的文本 $(‘p’).text(‘你喜欢jQuery吗？’)：设置p元素的文本 attr() 获取或设置元素属性 $(‘li’).attr(‘title’)：获取li元素的title属性值 $(‘li’).attr(‘title’,’test’)：设置li元素的title属性值为test val() 获取或设置元素的值 $(‘#email’).val()：获取id=email的元素的value $(‘#email’).val(‘请输入Email’)：设置id=email的元素的value $() 动态创建HTML内容 var $html=$(‘p动态创建段落/p’)：动态创建p元素 节点操作 节点操作包括查找节点、创建节点、插入节点、删除节点和复制节点操作 $(function() { $(:radio).click