标签：doc input bootstra selected 框架 www sele appendto 定义
正课:
1. 什么是jQuery:
2. 如何使用jQuery:
3. 查找:
1. 什么是jQuery:
jQuery是 第三方开发的 —— 先下载才能使用
执行DOM操作的 —— 学jQuery依然在学DOM
极简化的 —— 对DOM API的终极简化
函数库 —— jQuery中一切用函数来实现
为什么: 2个原因:
1. jQuery是DOM操作的终极简化:
简化了: 增删改查
事件绑定
动画
ajax
2. 解决了大部分浏览器兼容性问题:
凡是jQuery让用的都没有兼容性问题:
何时: 几乎所有项目或框架的底层DOM操作，都是由jQuery实现的
2. 如何使用jQuery:
下载: jquery.com
版本: 1.x 兼容IE8
2.x 不再兼容IE8
3.x 不再兼容IE8，增加了新特性
1. 运行在严格模式下
2. 用for of代替了.each()方法
3. 支持Promise
如何使用:
1.先引入jQuery到页面中，再编写自定义js:
<script src="js/jquery-1.11.3.js">
2. 只要想使用jQuery简化版API，都要先创建jQuery对象并封装DOM元素对象
2种:
1. 用选择器先查找再创建:
var $btn1=$("#btn1");
2. 如果已经获得DOM元素，可直接封装:
var $btn1=$(this);
什么是jQuery对象: 封装DOM元素对象，并提供操作DOM的简化版API 的类数组对象.
对jQuery对象整体调用API，等效于对内部封装的DOM元素都调用API
jQuery API 三大特性:
1. 自带遍历效果: 对整个jQuery对象调用一次API，等效于自动对内部所有DOM元素都调用API
2. 一个函数两用: 即可获取值，又可修改值
如果调用时，没有给新值，则默认获取
如果调用时，给了新值，则改为修改
3. ?
3. 查询:
1. 按选择器查找: var $elem=$("选择器")
回顾选择器:
基本选择器: 5个 同CSS
#id element .class * selector1,selector2,...
正课:
1. 查找
2. 修改
3. 按节点间关系查找
4. 添加/删除/替换/克隆
1. 查找:
回顾:
层级选择器: 同CSS
父 后代 父>子 兄+弟 兄~弟
子元素过滤选择器: 同CSS
按元素在其父元素中的相对位置选择元素
下标i从1开始
:first-child :last-child :nth-child(n)
偶数行: tr:nth-child(2n) //even
基本过滤选择器: jQuery新增的
打破父元素的界限，按绝对位置选择元素
下标i从0开始
:first/last :even/odd :eq/gt/lt(i)
属性过滤选择器: 同CSS
[属性名] [属性名=值] [属性名^=开头]
[属性名$=结尾] [属性名*=内容] [属性名!=值]
可见性过滤: jQuery新增
:hidden 匹配隐藏的元素
display:none
visibility: hidden
opacity:0
<input type="hidden">
:visible 匹配显示的元素
内容过滤: jQuery新增
:contains(文本) 匹配元素的内容中包含指定“文本”的元素
:has(选择器) 匹配包含满足选择器要求的子元素的父元素
:parent 选择内容非空的元素
:empty 选择内容为空的元素
状态过滤: 同CSS
:enabled :disabled :selected :checked
表单元素过滤: jQuery新增:
:input 匹配所有表单元素: input select textarea button
:[type] 匹配type为指定类型的input元素:
:text <input type="text">
:password <input type="password">
:...
2. 修改:
内容: 3种:
1. 原始HTML片段: .innerHTML
$elem.html(["html片段"]) 一个函数两用
2. 纯文本内容: .textContent
$elem.text(["文本内容"]) 一个函数两用
3. 表单元素的值: .value
$elem.val(["值"]) 一个函数两用
属性:
核心DOM API: $elem.attr("属性名"[,"属性值"]) 一个函数两用
HTML DOM API: $elem.prop("属性名"[,"属性值"]) 一个函数两用
1. HTML标准属性:
2种:
1. 核心DOM: getAttribute() setAttribute()
2. HTML DOM: .属性名 .属性名=值
2. 状态属性
1. HTML DOM: .状态属性
3. 自定义扩展属性:
1. 核心DOM: getAttribute() setAttribute()
问题: 一次只能修改一个属性，如果同时修改多个属性时，代码会很繁琐:
解决: 同时修改多个属性:
$elem.attr/prop({
属性:值,
... : ...
})
样式:
jQuery API 三大特性:
1. 自带遍历效果
2. 一个函数两用
3. 多数函数都返回正在操作的jQuery对象本身
正课：
1. 修改
2. 按节点间关系查找
3. 添加/删除/替换/克隆
4. 事件绑定
5. 动画API
1. 修改:
样式:
$elem.css("css属性"[,值]) //单个数值的属性值不用加单位
修改样式: elem.style.css属性=值
获取样式: getComputedStyle()
.css() 一次只能修改一个css属性。
如果同时修改多个css属性:
.css({
css属性名:值,
... : ...
})
css属性名必须去横线变驼峰
问题: 如果同时修改多个css属性，用.css()代码繁琐
解决: 用操作class来批量修改样式
<button class="btn btn-danger active"
$elem.addClass("class1 class2 ...")
$elem.removeClass("class1")
$elem.hasClass("class1")
.is(".class1")
比如: if($btn.hasClass("down"))//如果有down
$btn.removeClass("down");//就移除down
else//否则
$btn.addClass("down");//就添加down
只有在有和没有一个class之间来回切换时，采用.toggleClass("class")
2. 按节点间关系查找:
2大类:
1. 父子:
.parent() .parentNode
.children(["选择器"]) 可获得直接子元素中符合要求的元素
比如: $main.children("div") 选择id为main下的直接子元素中的div。如果有ul,p，则不选择。
.find("选择器") 可在所有后代中查找符合条件的元素
比如: $ul.find("li.active") 查找ul下所有后代li中class为active的li
.children(":first-child") .firstElementChild
.children(":last-child") .lastElementChild
2. 兄弟:
.prev() .previousElementSibling
.prevAll(["选择器"]) 选择当前元素之前所有兄弟元素
.next() .nextElementSiblinlg
.nextAll(["选择器"]) 选择当前元素之后所有兄弟元素
.siblings(["选择器"]) 选择除自己之外所有兄弟
比如: //将当前li添加class active
$a.parent().addClass("active")
//return $当前li
//将当前li之外的其余li去掉class active
.siblings().removeClass("active")
3. 添加/删除/替换/克隆
添加: 2步:
1. 用html片段创建新元素:
var $a=$(`<a href="http://tmooc.cn">go to tmooc</a>`);
2. 将新元素添加到DOM树上
1.追加:
$父元素.append($a) 末尾追加
$a.appendTo(父元素).对a做其它操作 末尾追加
$父元素.prepend($a) 在开头插入
$a.prependTo(父元素) .对a做其它操作 在开头插入
2. 中间插入:
$child.before($a) 将a插入到child之前
$a.insertBefore(child) 将a插入到child之前
$child.after($a) 将a插入到child之后
$a.insertAfter(child) 将a插入到child之后
3. 替换:
$child.replaceWith($a) 用a代替child
$a.replaceAll(child) .对a做其它操作 用a代替child
删除: $elem.remove();
克隆: var $elem2=$elem.clone();
4. 事件绑定:
绑定事件处理函数:
.on("事件名",处理函数); //代替addEventListener()
对于常用的21种事件，可进一步简写为:
.事件名(处理函数)
利用冒泡:
$父元素.on("事件名","选择器",处理函数)
2个难题:
1. this 又可以用了 => e.target
2. if($xx.is("条件选择器")) 不用再写
仅把选择器提前到第二个参数上。
强调: "选择器"必须现对于$父元素内编写
解绑: .off("事件名",处理函数);
页面加载后自动执行:
问题: 直接放在js文件中，不属于任何事件的代码，只要页面引入就立刻执行。如果在head中引入，极可能找不到页面元素，导致错误。
解决: 所有代码都要放在“页面加载完成”事件中。等待事件发生时，才执行。
2个“加载完成事件”
1. 仅DOM内容加载完成：DOMContentLoaded 提前
仅等待HTML和JS加载完就提前触发
何时: 和css，图片无关的代码，都要放在DOMContentLoaded中
如何: $(document).ready(function(){
//会在document(DOM)准备好之后自动触发
})
$().ready(function(){})
$(function(){})
2. 整个网页加载完成: Load 延迟
需要等整个网页(HTML,JS,CSS,图片)都完成才触发
何时: 依赖css和图片的代码，只能放在load中
如何: $(window).load(function(){
//.addEventListener("load",...)
//所有页面内容都加载完才能触发
})
鼠标事件:
.mouseover() .mouseout()
问题: 即使进出子元素，也会频繁触发父元素上的处理函数
解决: .mouseenter() .mouseleave()
如果同时不绑定mouseenter和mouseleave
其实，只需要绑定一个hover:
$elem.hover(//等效于同时绑定了mouseenter和leave
function(){ ... }, //给mouseenter
function(){ ... } //给mouseleave
)
更简化: 如果两个处理函数可用toggleXXX简写为一个
其实只要给一个处理函数即可。
$elem.hover(function(){ xxxx.toggleXXX() })
模拟触发: 没有点击按钮，也想执行按钮的处理函数
如何: $("按钮").trigger("事件名")
比如: $("#btnSearch").trigger("click")
触发
可以更简化: $("按钮").事件名()
正课:
1. 动画API
2. 类数组对象操作
3. 自定义组件
4. ajax
5. 跨域
1. 动画API：
1. 简单动画: 写死的三种动画效果
1. 显示隐藏: $elem.show() $elem.hide() $.elem.toggle()
默认没有动画效果，瞬间显示隐藏
原理: .show()和.hide()默认使用display:block/none实现显示隐藏，所以不支持过渡
如何添加动画效果: 添加"动画持续时间"参数，毫秒数
原理: 用js定时器反复修改宽、高、透明度属性模拟过渡效果
2. 上滑下滑: slideUp() slideDown() slideToggle()
3. 淡入淡出: fadeIn() fadeOut() fadeToggle()
缺点: 1. 用js程序写死的动画效果，不可维护。
2. 用js程序模拟的动画效果，效率不如css的transition
总结: 简单动画API很少使用
2. 万能动画: 对任意css属性的变化应用动画效果
$elem.animate({
css属性: 目标值
//强调: 1. 只能设置单个数值的属性
// 2. 不支持颜色过渡和CSS3变换的过渡
// 3. 也是用js定时器模拟的过渡效果
},持续时间)
排队和并发:
1. 排队: 多个css属性先后依次变化
如何: 先后调用多个动画API，多个动画API是排队执行的
原理: 每个元素其实都有一个动画队列
调用动画API不是立刻执行动画的意思，而仅是将动画加入队列中等待执行。
2. 并发: 多个css属性同时变化
如何: 在一个animate中同时定义多个css属性
停止动画: $elem.stop()
问题: 默认仅停止当前正在播放的第一个动画，队列中后续动画依然执行
解决: .stop(true) 停止动画，并清空队列！
动画结束后自动执行:
如何: 为动画API添加第三个参数: 回调函数
回调函数就会在动画接收后自动执行！
:animated 专门匹配正在播放动画的元素
2. 类数组对象操作:
1. 遍历类数组对象:
$elems.each(function(i, elem){
//elem->当前正在遍历的DOM元素对象
$(elem)
})
2. 查找一个元素在jQuery对象中的位置:
var i=$elems.index(要查找DOM/jq对象)
3. 自定义组件:
1. 添加自定义函数:
定义自定义函数:
//fn=prototype
jQuery.fn.自定义函数=function(){
this->将来调用当前函数的.前的jQuery对象$elems，所以不用$(this)
}
调用自定义函数:
$elems.自定义函数()
2. 封装自定义插件:
插件/组件: 网页中拥有独立的HTML，CSS和js的页面区域
为什么: 重用！
何时: 今后在页面中只要反复使用的独立页面区域都要封装为插件。
官方插件: jQuery UI
1. 按照插件要求编写html内容，不用添加class
2. 引出插件的css文件
3. 先引入jQuery.js，再引入jQuery ui.js
4. 添加自定义脚本，找到插件的父元素，调用插件API
问题: vs bootstrap
1. 兼容多种设备:
jQuery UI仅用于PC端网站
bootstrap同时支持PC端和移动端网页
2. 可维护性:
jQuery UI采用侵入方式自动添加class，导致可维护性差
bootstrap强迫手动添加class，但可维护性好。
用jQuery Ui方式封装自定义插件:
前提: 已经用传统的HTML,css和js实现了插件的效果
封装插件的过程，其实是一个提取的过程
1. 提取插件的css到独立的css文件中:
2. 定义独立的js文件:
向jQuery的原型对象fn中添加插件函数
*侵入: 对插件中的元素自动添加所需的class
绑定事件处理函数: 提取原页面中的事件绑定代码到插件函数中
使用jQueryUI风格的插件:
1. 引入插件.css
2. 按插件要求编写HTML(不加class)
3. 引入jquery.js和插件.js
4. 查找插件父元素调用插件API
4. ajax:
$.ajax({
url:"服务端接口地址url",
type:"get/post",
data:"uname=dingding&upwd=123456"
{uname:"dingding", upwd:"123456"}
dataType:"json"
//jQuery1.x和2.x
success:function(服务器返回结果){ //当请求成功时自动执行
... ...
}
})
//jQuery3.x才支持
.then(function(服务器返回结果){
})
5. *****跨域:
什么是: 一个域名向的网页，向另一个域名下的服务器发送请求
包括:
1. 域名不同:
http://www.a.com/index.html -> http://www.b.com/service
2. 二级域名不同:
http://mail.tedu.cn/index.html -> http://hr.tedu.cn/server
3. 端口不同:
http://localhost:5500/index.html->http://localhost:3000/index
4. 协议不同:
http://localhost/index.html -> https://localhost/index
:80 :443
5. 相同机器上: 域名->IP
http://localhost/index.html->http://127.0.0.1/index
问题: ajax不允许发送跨域请求:
错误: No "Access-Control-Allow-Origin" headers
解决:
方式一:服务区端设置允许跨域:
//也称CORS:方式： Cross Origin Resource Share
res.writeHead(200,{
"Access-Control-Allow-Origin":"*"
})
res.send(服务端返回结果)
res.write(JSON.stringify(服务端返回结果))
res.end();
标签：doc input bootstra selected 框架 www sele appendto 定义
原文地址：https://www.cnblogs.com/liuqingqing-bloom/p/13053110.html
