jQuery
为什么要用jQuery
js书写代码时,会遇到一些问题
-
window.onload事件有事件覆盖的问题, 因此只能写一个事件
-
代码容错性差
-
浏览器兼容性问题
-
书写很繁琐, 代码量多
-
代码量乱, 各个页面到处都是
-
动画效果难以实现
jQuery是什么
jQuery是js的一个库, 封装了我们开发过程中的一些功能, 方便调用,提高开发效率.
-
官网API文档：http://api.jquery.com/
-
汉化API文档：http://www.css88.com/jqapi-1.9/
学习jQuery:
初期，主要学习如何使用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); })
js jQ互换
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
-
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:回调函数.
Ajax: 异步的javascript 和Xml
-
$.load("url" , fn(可选)) 从服务器加载数据,并返回数据放入被选元素中
-
getJSON(url, [data], [callback] )Query的AJAX中使用getJSON()方法异步加载JSON格式数据。获取服务器中的数据，并对数据进行解析，显示到页面中
-
$.get(url, callback ) 请求数据
-
$.post(url, data, callback) 提交数据
-