js 五 ?jquery的使用，调用

4 this 关键字 ???this 表示当前函数或方法的调用者 ???1 全局函数由window调用，所以全局函数中的this 指的是window对象 ???2 事件处理函数中使用this,指的是当前事件的触发对象2 事件对象 ???1 事件对象伴随事件触发产生，包含当前事件相关的所有信息 ???2 获取事件对象 ???????事件对象伴随事件发生,自动产生，由浏览器以参数的形式传入到事件处理函数中，我们只需要接收参数就可以 ???????????et: ???????????????function fn(evt){ ???????????????????console.log(evt) ?????????????????} ???????????????fn(evt); ???3 事件对象的属性 ???????1 target / srcElement ???????????表示当前事件的触发对象； ???????????et: ???????????????console.log(evt) ???????2 不同的事件类型对应的事件对象中包含的信息也有所不同 ???????????1 鼠标事件对象常用属性 ???????????????1 offsetX offsetY ???????????????????获取鼠标在元素上的坐标位置 ???????????????????默认元素左上角为原点 ???????????????2 clientX clientY ???????????????????获取鼠标在网页上的坐标位置 ???????????????3 screenX screenY ???????????????????获取鼠标在屏幕上的坐标位置 ???????3 键盘事件对象的常用属性 ???????????1 onkeydown 事件 ???????????????1 which 属性 ???????????????????获取当前按键的键码 ???????????????????对于大小写字母不进行区分 ???????????2 onkeypress 事件 ???????????????1 key属性 ???????????????????获取当前按键对应的字符 ???????????????2 which 属性 ???????????????????获取按键对应的ASC码 ，区分大小写3 事件处理机制 ???1 事件传递 ???????当页面元素触发事件时，其他相关元素都会接收到这个事件，可以选择对事件作出处理 ???2 事件传递机制： ???????指页面中元素处理事件的顺序 ?????????1 分类： ???????????1 冒泡 ???????????????冒泡传递指事件由里向外传递机制 ???????????2 捕获 ???????????????捕获指事件从外向里传递，IE不支持 ???????????W3C标准事件监听函数 ???????????addEventListener(param,fun,boolean) ???????????参数： ???????????????param:事件函数名，取消on前缀 ???????????????????et : click ???????????????fun:事件触发要执行的操作，通常以匿名函数给出 ???????????????boolean:默认为false，可以省略，表示冒泡传递，设置为true，表示捕获传递 ???????2 阻止事件传递 ???????????evt.stopPropagation()jquery 使用 ???1 jquery是一个JS库，封装了原生的JS,得到一套完整的方法 ???????核心 ：write less, do more ???????版本： ???????????1 xx.xx版本的jquery兼容IE6.7.8 ???????????2 XX.XX 版本的jquery 不再兼容ie6.7.8 ???????优点： ???????????1 简化DOM操作，像操作css一样操作DOM ???????????2 直接通过选择器设置样式 ???????????3 简化JS事件操作 ???????????4 采用链式调用操作JS节点 ???????????-------------------- ???????????5 Ajax技术更加完善 ???????????6 提供各种便捷的动画处理 ???????????7 基于jquery的插件使用更便捷 ???????????8 可能通过jquery自定义插件 ???????1 引入jquery 文件 ???????????<script src=‘‘></script> ???????2 如果想要使用jQuery语法，必须将文件引入操作放在代码前面 ???2 ?使用jQuety ???????1 jquery对象：实际上是对原生的js对象进行封装，封装之后可以使用jQuery提供的方法 ???????????注意： ???????????1 jQuery对象可以使用jQuery提供的方法，原生js对象可以使用原生JS方法，方法不能混用 ???????????2 jQuery对象和原生JS对象可以共存，也可以互相转换 ???????2.工厂函数 $() ???????????jQuery对象可以使用 jQuery或者 $表示 ???????????使用： ???????????????$(‘param‘) ???????3 原生对象与jquery对象互相转换 ???????????1 DOM -> jquery ???????????????var h1 = document.get.... ???????????????var $h1 = $(h1); ???????????2 jquery -> DOM ???????????????var h1 = $h1[0]; ???????????????var h1 = %h1.get(0); ???3 jQuery选择器 ???????1 根据提供的选择器到页面获取元素，返回都是jquery对象组成的数组 ???????2 $(‘选择器‘); ???????3 选择器分类： ???????????1 基础选择器 ???????????????1 id 选择器 ???????????????????$(‘#id‘); ???????????????2 类选择器 ???????????????????$(‘.className‘); ???????????????3 标签选择器 ???????????????????$(‘tagName‘); ???????????????4 群组选择器 ???????????????????$(‘selector1,selector2,...‘) ???????????2 层级选择器 ???????????????1 后代选择器 ???????????????????$(‘selector1 selector2‘); ???????????????2 子选择器 ???????????????????$(‘selector1>selector2‘); ???????????????3 相邻兄弟选择器 ???????????????????$(‘selector1+selector2‘); ?只匹配一个 ???????????????????匹配紧跟在seletor1后 ???????????????4 通用兄弟选择器 ???????????????????$(‘selector1~selector2‘); ???????????????????匹配selector1 后面所有满足selector2的兄弟元素 ???????????3 筛选选择器 ???????????????也叫过滤选择器,需要结合其他选择器使用 ???????????????1 :first ???????????????????匹配一组元素中的第一个 ???????????????????et: ???????p:first ???????????????2 :last ???????????????????匹配一组元素中的最后一个 ???????????????????selector:last ???????????????3 :not ???????????????????否定筛选,将selecctor匹配的元素过滤在外，匹配其他元素 ???????????????????:not(selector) ???????????????4 :odd ???????????????????匹配偶数行对应的元素 ???????????????5 :even ???????????????????匹配奇数行对应的元素 ???????????????6 ：eq(index) ???????????????????匹配下标等于index的元素 ???????????????????et: ????$(‘p:eq(3)‘).css(‘color‘,‘red‘); ???????????????7 :lt(index) ???????????????????匹配下标小于index的元素 ???????????????8 :gt(index) ???????????????????匹配下标大于index的元素 ???????????4 属性选择器 ???????????????{引用代码 ????????????????????????<h1 id="d1">一级标题</h1> ???????????????????????<p class=‘c1‘>什么鬼1</p> ???????????????????????<h2 id=‘ad2‘ class=‘d1‘>二级标题</h2> ???????????????} ???????????????1 根据属性名筛选元素 ???????????????????[arrtibute] ???????????????????et: ???????$(‘[id]‘).css(‘color‘,‘red‘); ???????????????2 根据属性名称和属性值筛选元素 ???????????????????[arrtibute="value"] ???????????????????et: ???????$(‘[id=d1]‘).css(‘border‘,‘1px solid‘) ???????????????3 匹配属性名以指定字符开头的元素 ???????????????????[arrtibute^=value] ???????????????????^ 表示以...开头 ???????????????????et: ???????$(‘[id^=d]‘).css(‘font-size‘,‘16px‘) ???????????????4 匹配属性值以指定字符结尾的元素 ???????????????????[arrtibute$=value] ???????????????????$表示以...结尾 ???????????????????et: ???????$(‘[class$=1]‘).css(‘font-size‘,‘32px‘) ???????????????5 匹配属性值中包含指定字符的元素 ???????????????????[arrtibute*=value] ???????????????????et: ???????$(‘[id*=d]‘).css(‘background‘,‘orange‘) ???????????????6 匹配属性名不等于指定属性值的元素 ???????????????????[arrtibute!=value] ???????????5 子元素过滤选择器 ???????????????1 :first-child ???????????????????匹配属于父元素中的第一个子元素 ???????????????2 :last-child ???????????????????匹配父元素中最后一个子元素 ???????????????3 :nth-child() ???????????????????匹配第n个子元素 ???????????????????et : ???????$(‘li:nth-child(even)‘).css(‘color‘,‘red‘) ???????????????????将关键字或是表达式做参数传递给：nth-child() ???????????????????关键字 或表达的值会被作为下标匹配元素 ???????????????????even 取值： 1 3 5 7 ... ???????????????????odd ??取值：0 2 4 6 ... ???4 jQuery 操作DOM ???????1 内容操作 ???????????1 html() ???????????????设置或读取jquery中的HTML内容,类似于原生JS innerHTML ???????????2 text() ???????????????设置或读取jquery对象中的文本内容，类似原生JS innerText ???????????3 val() ???????????????设置或读取表单对象的value值 ???????2 属性操作 ???????????1 attr() ???????????????读取或设置jquery对象的属性 ???????????????et: ???????????????????$(‘div‘).attr(‘class‘,‘c1‘) ???????????2 removeattr() ???????????????移除指定属性 ???????????????et: ???????????????????$(‘div‘).removeAttr(‘id‘) ???????3 样式操作 ???????????1 attr() ???????????????为元素添加id或class属性，对应选择器样式 ???????????2 addClass(‘类名‘) ???????????????为元素的class属性赋值，匹配选择器样式 ???????????????注意： ???????????????????????可以重复调用 ，为class添加属性值 ???????????????????1 $(‘p‘).addClass(‘类名1 类名2‘) ???????????????????2 ??$(‘p‘).addClass(‘类名1‘) ???????????????????????$(‘p‘).addClass(‘类名2‘) ???????????????????3 $(‘p‘).addClass(‘类名1‘).addClass(‘类名2‘) ???????????3 removeClass(‘‘) ???????????????移除指定的class属性值 ???????????????参数可以省略，省略之后表示清空类选择器 ???????????4 toggleClass() ???????????????切换样式，给出class属性值，如果元素存在指定的类名，则移除，不存在则添加 ???????????5 css() ???????????????设置或读取元素的css属性 ???????????????1 ?css(‘width‘) ???????????????????读取元素的宽度 ???????????????2 ??css(‘width‘,‘300px‘); ???????????????????设置元素的样式 ???????????????3 ?css(JSon对象) ???????????????????为元素设置一组css样式 ???????????????????css({‘color‘:‘red‘,‘width‘:‘300px‘}) ???????4 节点查询 ???????????1 children() / children(‘selector‘) ???????????????获取jquery对象的所有子元素或者获取指定选择器匹配的所有子元素 ???????????????注意：只包含直接子元素，不考虑后代子元素 ???????????2 find(‘selector‘) ???????????????获取满足selector的所有后代元素 ???????????3 prev() / prev(‘selector‘) ???????????????获取满足前一个兄弟元素或者获取前一个兄弟元素，必须满足slector ???????????4 next() / next(‘selector‘) ???????????????获取后一个兄弟元素 或者 获取后一个兄弟元素，必须满足selector ???????????5 siblings() / siblings(‘selector‘) ???????????????获取前后所有的兄弟元素 或者 满足selector的所有兄弟元素 ???????????6 parent() ???????????????获取jquery对象的父元素 ???????5 节点操作 ???????????1 创建节点 ???????????????var $h1 = $(‘<h1>一级标题</h1>‘); ???????????????var $h1_1 = $(‘<h1></h1>‘); ???????????????h1.attr() ???????????????h1.html() ???????????????h1.css(); ???????????2 添加节点 ???????????????1 以子元素的形式插入到页面中 ???????????????????1 $parent.append($h1); ???????????????????????将新创建的对象作为最后一个子元素插入 ???????????????????2 $parent.prepend($h1_1); ???????????????????????将新创建的对象作为第一个子元素添加 ???????????????2 以兄弟元素的形式插入到页面中 ???????????????????1 $obj.after($h1); ???????????????????????将新创建的对象作为$obj的下一个兄弟元素插入 ???????????????????2 $obj.before($h2); ???????????????????????将新创建的对象作为$obj的前一个兄弟元素插入 ???????????????????????????????????????3 删除节点 ???????????????????$obj.remove() ???????????????????移除 $obj ???????6 事件操作 ???????????1 页面加载完毕之后再执行 ???????????????原生JS： ???????????????????window.onload = function(){}; ???????????????jquery的三种写法 ???????????????????1 $(document).ready(function(){}); ???????????????????2 $().read(function(){}); ???????????????????3 $(function(){}) ???????????????原生 onload事件与jquery的ready()方法区别： ???????????????????1 原生的onload事件多次使用时，前面的会被覆盖不执行，需要做特殊判断和处理，而ready方法没有此问题， ???????????????????????可以重复调用多次，按顺序依次执行 ???????????????????2 原生的onload事件会等待文档中DOM树及所有资源都加载完毕之后才执行，而ready方法会等文档DOM树加载完毕后就执行 ???????????2 jquery事件绑定 ????????????????1 使用bind() ???????????????????$obj.bind(‘事件函数名‘,function(){}); ???????????????????注意：省略on 前缀 ???????????????????????et: ???????????????????????????$(‘div‘).bind(‘click‘,function(){}) ???????????????2 使用事件函数 ????????????????????$obj.事件名称(function(){}); ????????????????????注意：省略on前缀 ????????????????????et: ???????????????????????$(‘div‘).click(function(){}); ???????????3 事件对象及属性 ???????????????1 获取事件对象与原生方法一致 ???????????????????都是以参数形式自动传入 ???????????????????$(‘div‘).click(function(evt){console.log(evt)}) ???????????????2 事件对象的属性保持一致 ???????????????????target ???????????????????offsetX ???????????????????... ???????????4 this 对象 ???????????????当前函数或方法的调用对象 ???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????