标签：默认 jquer 如何使用 read res lang rop ini tom
window.onload事件有事件覆盖的问题, 因此只能写一个事件
代码容错性差
浏览器兼容性问题
书写很繁琐, 代码量多
代码量乱, 各个页面到处都是
动画效果难以实现
jQuery是js的一个库, 封装了我们开发过程中的一些功能, 方便调用,提高开发效率.
官网API文档：http://api.jquery.com/
汉化API文档：http://www.css88.com/jqapi-1.9/
初期，主要学习如何使用jQuery操作DOM，其实就是学习jQuery封装好的那些功API。
<script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ // 获取dom元素 var oBtn = $(‘button‘); //根据标签名获取元素 var oDiv = $(‘div‘); //根据标签名获取元素 oBtn.click(function(){ oDiv.show(1000);//显示盒子 oDiv.html(‘赵云‘); // 设置内容 });//事件是通过方法绑定的 }) </script>
链式编程, 比如$("?").show.().html() jQuery对象执行方法必有返回值, 最常见的就是本会对象本身
隐式迭代：隐式 对应的是 显式。隐式迭代的意思是：在方法的内部进行循环遍历，而不用我们自己再进行循环，简化我们的操作，方便我们调用。
引包
.入口函数
功能实现代码(事件处理)
//1.文档加载完毕，图片不加载的时候，就可以执行这个函数。 $(document).ready(function () { alert(1); }) //2.文档加载完毕，图片不加载的时候，就可以执行这个函数。 $(function () { alert(1); }); ? ? //3.文档加载完毕，图片也加载完毕的时候，在执行这个函数。 $(window).ready(function () { alert(1); })
1、 DOM 对象 转为 jQuery对象： $(js对象); ? 2、jQuery对象 转为 DOM 对象： jquery对象[index]; //方式1（推荐） jquery对象.get(index); //方式2
show() hide() ,显示隐藏
toggle() 开关式显示隐藏动画 ,
slideDown() slideUp() 卷帘门效果
slideToggle() 滑入滑出
fadeIn() fadeOut() 淡入淡出
aninmate() 自定义动画 (注意背景颜色需要另外导包)
停止动画 stop() 为了避免频繁执行, 先停后开动画, 避免上一次的影响, 保留最后一次的效果
mouseenter
attr() 设置属性值或者返回属性值
removeAttr() 删除属性
prop( ) 设置或者返回被选元素的 属性和值
attr 和prop的区别
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> 男<input type="radio" id=‘test‘ name="sex" checked/> 女<input type="radio" id=‘test2‘ name="sex" /> <button>提交</button> ? <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ //获取第一个input var el = $(‘input‘).first(); //undefined 因为attr是获取的这个对象属性节点的值，很显然此时没有这个属性节点，自然输出undefined console.log(el.attr(‘style‘)); // 输出CSSStyleDeclaration对象，对于一个DOM对象，是具有原生的style对象属性的，所以输出了style对象 console.log(el.prop(‘style‘)); console.log(document.getElementById(‘test‘).style); ? $(‘button‘).click(function(){ alert(el.prop("checked") ? "男":"女"); }) ? ? }) </script> </body> </html>
6.removeProp() 移除属性
addClass 添加多个类名
removeClass 删除类名, 一个或者多个
toggleClass 存在则删除, 不存在则添加
html() 获取对象内的所有内容
text( ) 获取对象的文本
val () 获取表单控件的值 vlaue
append (‘‘子节点") 追加
appendTo("父节点")
prepend (‘‘子节点") 插入到最前面
prependTo("父节点")
after(插入的元素)
before()
insertbefore()
insertafter()
clone() 克隆
replaceWith() 替换元素 括号内放需要替换的结果元素
replaceAll () 替换所有 括号内放选择对象
remove 删除节点, 连事件也一块删除
detach() 删除节点, 保留事件
empty() 清空元素的内容 , html("") text("") val("")
.width() 获取元素的宽度 返回值不带单位,正常盒子的width
width(value) 设置宽度
.height() 获取高度, 不带单位
height(value) 设置高度
innerHeight() innerWidth() 元素内第一个元素的高/ 宽, 包含padding , 不包含border
outWidth() outHeight() 内容外宽高
offset 偏移
position() 元素坐标
scrollLeft() 水平方向滚动距离
scrollTop() 垂直方向滚动距离
事件捕获阶段
处于目标阶段
事件冒泡阶段
e.stopPropagation() 不再派发事件, 阻止冒泡
e.preventDefault() 阻止默认动作
e.taget 返回触发此事件的元素
4.
| altKey | 返回当事件被触发时，”ALT” 是否被按下。 |
|---|---|
| button | 返回当事件被触发时，哪个鼠标按钮被点击。 |
| clientX | 返回当事件被触发时，鼠标指针的水平坐标。 |
| clientY | 返回当事件被触发时，鼠标指针的垂直坐标。 |
| ctrlKey | 返回当事件被触发时，”CTRL” 键是否被按下。 |
| metaKey | 返回当事件被触发时，”meta” 键是否被按下。 |
| relatedTarget | 返回与事件的目标节点相关的节点。 |
| screenX | 返回当某个事件被触发时，鼠标指针的水平坐标。 |
| screenY | 返回当某个事件被触发时，鼠标指针的垂直坐标。 |
| shiftKey | 返回当事件被触发时，”SHIFT” 键是否被按下 |
cancelBubble | 如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。 |
|---|---|
| fromElement | 对于 mouseover 和 mouseout 事件，fromElement 引用移出鼠标的元素。 |
| keyCode | 对于 keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup |
| offsetX,offsetY | 发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。 |
returnValue |
如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为 |
srcElement |
对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。 |
| toElement | 对于 mouseover 和 mouseout 事件，该属性引用移入鼠标的元素。 |
| x,y | 事件发生的位置的 x 坐标和 y 坐标，它们相对于用CSS动态定位的最内层包容元素。 |
| 属性和方法 | 描述 |
|---|---|
| bubbles | 返回布尔值，指示事件是否是起泡事件类型。 |
cancelable |
返回布尔值，指示事件是否可拥可取消的默认动作。 |
currentTarget |
返回其事件监听器触发该事件的元素。 |
| eventPhase | 返回事件传播的当前阶段。 |
target |
返回触发此事件的元素（事件的目标节点）。 |
| timeStamp | 返回事件生成的日期和时间。 |
type |
返回当前 Event 对象表示的事件的名称。 |
| initEvent() | 初始化新创建的 Event 对象的属性。 |
preventDefault() |
通知浏览器不要执行与事件关联的默认动作。 |
stopPropagation() |
不再派发事件。 |
bind 绑定事件 bind (type(string), data(Objext 可选) , function)
通过返回false来取消默认的行为并阻止事件起泡。 ? $("form").bind("submit", function() { return false; }) 通过使用 preventDefault() 方法只取消默认的行为。 ? $("form").bind("submit", function(event){ event.preventDefault(); });
unbind() 解绑事件
one() 一次性事件
通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。 举个列子：有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。
原理：
利用冒泡的原理，把事件加到父级上，触发执行效果。
作用：
1.性能要好 2.针对新创建的元素，直接可以拥有事件
事件源 :
跟this作用一样(他不用看指向问题，谁操作的就是谁),event对象下的
使用情景：
?为DOM中的很多元素绑定相同事件； ?为DOM中尚不存在的元素绑定事件；
语法：
on(type,selector,data,fn);
描述：在选定的元素上绑定一个或多个事件处理函数
参数解释
events( String) : 一个或多个空格分隔的事件类型
selector( String) : 一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素
data: 当一个事件被触发时，要传递给事件处理函数的event.data。
fn:回调函数.
$.load("url" , fn(可选)) 从服务器加载数据,并返回数据放入被选元素中
getJSON(url, [data], [callback] )Query的AJAX中使用getJSON()方法异步加载JSON格式数据。获取服务器中的数据，并对数据进行解析，显示到页面中
$.get(url, callback ) 请求数据
$.post(url, data, callback) 提交数据
标签：默认 jquer 如何使用 read res lang rop ini tom
原文地址：https://www.cnblogs.com/tcpblog/p/9975610.html
