标签：重绘 事件绑定 tab lock 样式 col 背景 after 今后
关于jQuery的入口函数：
$(function () { } ) ( )
jquery只有两种查找方式
01 按选择器查找 $(‘任何css选择器都支持，不用担心兼容性‘)
02 按节点间关系查找
//按节点间关系查找
父子关系
.parentNode() -----> .parent()
.children() -----> .children("可以写选择器") 在直接子元素中查找
// jq特有 .find(‘选择器‘) 在所有后代中查找符合条件的元素
.firstElementChild() -----> .children(":first-child")
.lastElementChild() -----> .children(":last-child")
兄弟关系
.previosElementSibling() -----> .prev() 前一个
.nextElementSibling() -----> .next() 下一个
// .prevAll("选择器") 在当前元素之前的所有兄弟中查找，不写选择器表示查找元素之前的所有兄弟 （好评差评）
// .next("选择器") 在当前元素之后的所有兄弟中查找，不写选择器表示查找元素之后的所有兄弟
// siblings("选择器") 选择除了自己之外的所有兄弟，不分前后， 选择器不写表示 除了自己之外的所有
jquery对象的三个小脾气
01 自带遍历，对jq对象整体调用函数，等效于自动对内部保存的多个原生DOM对象，分别调用函数
02 一个函数两用： 调用时，如果没给新值，就获取原值 （没给值就是查找）
调用时，如果给了新值，就变为修改值 （给了值就是修改）
03 每个函数都返回正在使用的jquery对象，可继续使用（链式操作：上一步的返回结果，是下一步的主语）
显示 show() 隐藏hide( )
01 基本过滤/位置过滤： :first :last :eq(i) :gt(i) :lt(i) :even :odd jq中特有的
：has( ‘选择器‘ ) 用元素内部的子元素拥有的特征来鉴别父元素
03 可见性过滤： 根据元素时显示 还是隐藏 ，来选取元素
:visible 选择没有隐藏的元素
:hidden 选择隐藏的元素 只你能找到 display:none 和 type="hidden" 这俩种隐藏的元素
if （ $(ul.is(‘ :hidden‘)) ）-----如果ul是隐藏的 （）里返回的是boolean值
04 表单元素过滤器
：input 选择所有表单元素 （input textarea select button 。。。。。）
：text 选择普通文本框 <input type="text">
：password 选择密码框 <input type="password">
: radio 选择单选按钮 <input type="radio">
： checkox 选择多选按钮 <input type="checkbox">
：button 选择按钮 <input type="button">
05 状态过滤
:enabled 选择启用的元素
:disabled 选择被禁用的元素
:checked 选择被选中的checkbox或者radio元素
:selected 选择select中被选中的option
//1 修改内容
01 原始HTML片段：innerHTML ------- > .html(["新内容"])
02 纯文本内容 : textContent ------- > .text(["新内容"])
03 表单元素的值: .value ------- > .val(["新内容"])
//2 修改属性
01 HTML标准属性: 2种
HTML DOM ： a.href
核心DOM的函数： a.getAttribute()/setAttribute()
02 状态属性: .disabled .checked 只能用.修改
03 自定义扩展属性: a.getAttribute()/setAttribute()
网页上可直接看到的属性: HTML标准属性 和 自定义扩展属性
// 上边的 都可以使用 .getAttribute()/.setAttribute()
jquery， .attr(‘属性名‘，‘属性值‘) 一个函数两用， 写属性值是修改，不写属性值是查找 ----自定义用
*****************************************************************************************************
// 下边的都可以用 .访问
//内存中必须用console.log()才能看到的属性：
// 标准属性 和 状态属性
jquery 中用.访问的 都改为 prop
// .prop(‘属性名‘,‘属性值‘) 不写属性值是查找，写属性值是修改 ----标准属性用
//3 修改样式
01获取或修改一个css属性的值：
$元素.css(‘css属性名‘[,‘属性值‘]) //有属性值表示修改， 不写属性值表示 查找
02如果同时修改多个css属性:
$元素.css({
属性名:属性值
有-的要写成驼峰命名
})
//如果批量修改css属性，都首选class来操作:
添加class： $元素.addClass("class名")
$元素.removeClass("class名") 移除class
$元素.hasClass("class名") 判断是否含有class
=>$元素.is(‘.class名‘)
//在有或者没有一个class之间来回切换时：
$元素.toggleClass("class名")
1 在dom中添加一个新元素： 3步 创建空元素，设置关键的属性，将元素添加dom树
2 在jq中添加一个新元素: 2步
01 用html片段创建DOM元素
var $元素=$(html片段)
02 将新元素添加DOM树上
在dom树上 插入元素
01 末尾添加 : $父元素.append($新元素) .appendChild()
$新元素.appendTo( $父元素 )
02 在现有元素前插入: $现有元素.before($新元素) 在现有元素之前插入新元素 .insertBefore()
$新元素.insertBefore($现有元素)
02 在现有元素后插入: $现有元素.after($新元素) 在现有元素之后插入新元素
$新元素.insertAfter($现有元素)
03 替换元素: $现有元素.replaceWith($新元素) 现有元素与新元素替换 .replaceChild()
$新元素.replaceAll($现有元素)
04 开头插入: $父元素.prepend(‘$新元素‘) 在开头插入
$新元素 .prependTo($父元素)
01 $(‘ 选择器 ‘) 创建jquery对象，并查找元素，封装进jquery对象中------ 其实就是 查找
02 $(‘ DOM元素 ‘) 如：$(this) $(e.target) $(txt), 将dom元素封装为jquery对象，就可调用jquery家的简化版函数
因为dom元素不能直接调用jquery家的函数 ，所以$(this),将dom元素封装为jquery对象
03 $( `html片段` ) 创建jquery对象，同时创建dom元素 === document.createElement("li")
04 $(function(){ ... }) 绑定事件，在DOM内容加载后自动触发
02 $(document).ready(fuction(){ dom树加载完就会执行，不用等css 图片 等}) === $( function( ){ dom树加载后就提前执行 }) ，而且 代替了匿名函数自调，成为所有程序的外层容器代码
如果多个js文件中都包含 window.onload=function(){ },结果只有最后一个，最后一个会覆盖之前所有
如何让用户不等待css 和 图片，就可提前用上网页功能呢？
window.onload 除了等待dom加载完，还要等待图片 视频 音频等外部资源等全部加载后 才会执行
jquery的ready 只需对dom树的等待，无需对图形或外部资源加载而等待
使用 jQuery $(document).ready(fuction(){可以让用户不用等待css 和 图片 就可用上网页上的功能}) 可以多次使用
windowonload 只能出现一次
结论 ：今后绝大多数页面初始化或事件绑定操作，都应该放在DOM树加载完就提前触发
$(this)是个转换，将this表示的dom对象转为jquery对象，这样就可以使用jquery提供的方法操作。
12鼠标事件
mouseover 和 mouseout 默认是冒泡的，也就是说进出子元素，同样会触发父元素上的事件;
而且不能使用 e.stopPropagation( )解决，因为事件绑定在最外层父元素上，不可能给每个子元素都绑定事件阻止冒泡
jquery中 都是用 mouseenter 和 mouseleave 来代替鼠标移入移除事件的，可以防止冒泡，在父元素上绑定事件，鼠标进入子元素不再触发。
jquery中只绑定一个 ： .hover() 等效于同事绑定了mouseenter 和 mouseleave ，但是.hover()中需要两个函数，一个是给 mouseenter的 一个是给mouseleave的
模拟触发：既没有点击按钮也可以执行按钮上的事件处理函数
如何？ $(处理函数所在的元素).trigger(‘事件名‘) $btn.trigger(‘click‘)
可简写为 .事件名()
做变输入边查找时用 $tex.on("input",function(){//在输入是触发事件
$btn.click()
})
1 简单动画：固定的三种动画效果： 01 显示隐藏: .show( ) .hide( ) .toggle( )
02 上滑下滑: .slideUp() .slideDdown( ) .slideToggle( )
03 淡入淡出 .faddIn( ) .fadeOut( ) .fadeToggle( )
01 jquery返回的都是类数组对象，$( ‘ ‘)------>返回的都是 类数组对象
02 jquery模仿原生的js中的indexOf和forEach, 重新定义了两个属性自己的函数,专门给类数组对象用
index()
each()类似js中的forEach, 也是遍历；依次遍历jquery对象中封装的每个dom元素
$("ul>li").each(function(i,elem){//与foreach相似，依次遍历类数组中的dom对象
// i是下标
// elem是内容
})
正则校验
\d 表示数字
*表示出现**0次** 或 **多次**
+表示出现**一次**或**多次**
？表示出现0次或一次
要求 //必须是非0开头的数字
/^[1-9]\d*$/.test() 返回boolean 值
//‘尺码必须为XX-XX格式‘
/^\d{2}-\d{2}$/
history.back();
history.go(-1)
<script>
// 特征: 会改变原数组
// arr.splice( start, num, arg1, arg2, arg3, ...)
// arr.splice( 从哪开始, 删除几个, 添加的项1, 添加的项2, .... )
// 1. 添加 unshift push
// 需求: 在张飞和赵云中间加 大乔, 小乔
// var arr = ["张飞", "赵云", "马超", "关羽", "刘备"];
// arr.splice( 1, 0, "大乔", "小乔" );
// console.log( arr );
// 2. 删除
// 需求: 将刘备删除
// 使用splice删除, arr.splice(index, 1);
// var arr = ["张飞", "赵云", "马超", "关羽", "刘备"];
// arr.splice( 4, 1 );
// console.log( arr );
// 3. 替换
// 需求: 将赵云替换成马云
// var arr = ["张飞", "赵云", "马超", "关羽", "刘备"];
// arr.splice( 1, 1, "马云" );
// console.log( arr );
</script>
//删除数组第一项
arr.shift() 删除并返回数组的第一个元素
//删除数组最后一项
arr.pop(); 删除并返回数组的最后一个元素
//在数组开头添加一个元素 arr.unshift() 向数组的开头添加一个或更多元素，并返回新的长度。
//在数组最后一项添加 arr.push() 向数组的末尾添加一个或更多元素，并返回新的长度
//配置下拉刷新和上拉加载注意：
//下拉刷新是对原有数据的覆盖，执行的是html方法
//上啦加载是在原有结构的基础上，进行追加，追加在末尾
jquery 封装: $.ajax( ) 基于回调函数=》回调地狱
aixos 底层还是xhr 基于promise 可以避免回调地狱
01什么时候发生回流（重排）reflow：
页面中的元素 发生影响布局的变化(改变宽高尺寸，修改显示隐藏状态)
页面需要重新布局，就会触发回流；（改大小）
02什么时候触重绘(repaint)：
页面中的元素 发生不影响布局的样式变化（背景颜色，背景图片，字体颜色）
页面需要重新渲染，就会触发重绘（该样式）
要点：
01 每个页面至少进行一次 回流 和 重绘
02 回流 必将引起 重绘
js执行主线程 和 ui渲染进程 是 互斥的(同时只能执行一个)原因？
因为js有可能改变页面css的样式，所以会等js程序执行完，再进行渲染
也有肯能 css样式还没有渲染完，js就去获取样式，这样获取到的样式不完整， 所以 js执行主线程 和 ui渲染进程只能同时执行一个
标签：重绘 事件绑定 tab lock 样式 col 背景 after 今后
原文地址：https://www.cnblogs.com/javascript9527/p/11414669.html
