jquery选择器及对元素样式的操作.pptVIP

第二讲 Jquery 选择器 目录 jQuery 内置函数 1 Dom 对象与 jQuery 对象 2 jQuery 选择器 3 操作元素的属性和 CSS 样式 4 JavaScript 脚本的载入 ? 有些事情需要页面加载完毕后 再执行，以前的做 法是使用 window.onload 完成 ? 部分大型的图片文件会使 window.onload() 载入的 很慢 ? 这种方式只能绑定一个函数 ? jQuery 有一个用来作为 DOM 快速载入 javascript 的 小函数，那就是 ready 方法 ? 用法： ? $(document).ready(function(){ ? // Your code here... ? }); ? 或使用简便语法 :$(function(){ … }) Ready 和 Dom 的 onload 的区别 ? Onload 是所有 DOM 元素创建完毕，并且图 片、 css 等都加载完毕后才触发 ? Ready 是 DOM 元素创建完毕后就触发，提 高了响应速度 ? jQuery 中 $(window).load() 可以实现 onload 调用时机 ? Ready 可以有多个执行结果不同，而 onload 不管有多少个只输出最后一个结果 jQuery 内置函数 ? $.map(arry,fn) ：对数组 array 中每个元素调用 fn 函数进行 处理， fn 函数将处理返回得到一个新的数组： ? 如：得到一个元素值是原数组值二倍的新数组 var arr=[3,5,9]; ? var arr2=$.map （ arr ， function （ item ） { return item*2} ） ? $. 不处理 Dictionary 风格的数组 ? $.each （ array ， fn ）：对数组 array 每个元素调用 fn 函数进 行处理，没有返回值 ? Var arr={“tom” ：“汤姆”，“ petter” ：“彼得” } ； ? $.each(arr,function(key,value){alert(key+”=”+value);}); ? 如果是普通的数组，则 key 的值是序号 ? 如果省略 fn 参数，可以用 this 得到遍历的元素 jQuery 包装集（ jQuery 对象） ? jQuery 包装集可以说是 Dom 对象的扩充 . 在 jQuery 的世界中将所有的对象 , 无论是 一个还是一组 , 都封装成一个 jQuery 包装 集 . ? jQuery 包装集都是作为一个对象一起调用 的 . jQuery 包装集拥有丰富的属性和方法 ? Dom 对象只提供了很少的属性和方法 Dom 对象与 jQuery 对象的转换 ? Dom 转 jQuery 包装集 如果要使用 jQuery 提供的函数 , 就要首先构 造 jQuery 包装集 ， ? 使用选择器直接创建： $(“#testDiv”); ? 如果已经获取了一个 Dom 元素 ，可以将其转换 成 jQuery 包装集 var div = document.getElementById( estDiv); var domToJQueryObject = $(div); Dom 对象与 jQuery 对象的转换 ? jQuery 包装集转 Dom 对象 ? jQuery 包装集是一个集合 , 所以我们可以通过索 引器访问其中的某一个元素 var domObject = $(#testDiv)[0]; ? jQuery 包装集的某些遍历方法 , 比如 each() 中 , 可以传递遍历函数 , 在遍历函数中的 this 也是 Dom 元素 ，如： $(#testDiv).each(function() { $(this). 湩敮??? 修改内容 ) }) jQuery 选择器 ? Dom 编程中我们只能使用有限的函数根据 id 或者 TagName 获取 Dom 对象 ? jQuery 中则完全不同 ,jQuery 提供了异常强 大的选择器用来帮助我们获取页面上的对 象 , 并且将对象 以 jQuery 包装集的形式返回 ? 符号 ? ? 符号在 jQuery 中代表对 jQuery 对象的引 用 ?橜畑牥屹 是核心对象 , ? 根据 ID 获取 jQuery 包装集 ，如下