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 对象 当前函数或方法的调用对象
使用each()迭代数组
1 $.each();
语法
$.each(arr,function(index,obj){} )
// index :遍历出来的元素的下标
// obj: 表示遍历出来的元素
2 $obj.each();
语法：
$obj.each(function(index.obj){
//index:遍历出来的元素的下标
//obj:表示遍历出来的元素
})
#
$.ajax({ url:"/server20/", type:"get", dataType:"json", success:function (data) { $.each(data,function (i,obj) { console.log(obj.fields.name) }) } })
不是所有的成功都是坐享其成，联系作者v(13147256756)
