2-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 testDiv ; var domToJQueryObject $ div ; Dom对象与jQuery对象的转换 jQuery包装集转Dom对象 jQuery包装集是一个集合, 所以我们可以通过索引器访问其中的某一个元素 var domObject $ #testDiv [0]; jQuery包装集的某些遍历方法,比如each 中, 可以传递遍历函数, 在遍历函数中的this也是Dom元素 ，如： $ #testDiv .each function $ this . innerHTML 修改内容 jQuery选择器 Dom编程中我们只能使用有限的函数根据id或者TagName获取Dom对象 jQuery中则完全不同,jQuery提供了异常强大的选择器用来帮助我们获取页面上的对象, 并且将对象以jQuery包装集的形式返回 $符号 $符号在jQuery中代表对jQuery对象的引用, jQuery是核心对象, 根据ID获取jQuery包装集 ，如下两种方法是等效的 var jQueryObject $ #testDiv ; var jQueryObject jQuery #testDiv ; 基础选择器 Jquery的选择器有很多类，我们现在先看看基础选择器： 名称 说明 举例 #id 根据元素Id选择 $ “#divId 选择ID为divId的元素 element 根据元素的名称选择 $ a 选择所有 元素 .class 根据元素的css类选择 $ .bgRed 选择所用CSS类为bgRed的元素 * 选择所有元素 $ * 选择页面所有元素 selector1, selector2, selectorN 可以将几个选择器用,分隔开然后再拼成一个选择器字符串.会同时选中这几个选择器匹配的内容. $ #divId, a, .bgRed 层次选择器 $ “div li” 获取div下所有