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 对象
当前函数或方法的调用对象
原文地址：https://www.cnblogs.com/Skyda/p/9846018.html
时间： 2024-11-01 12:30:36