关于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内容加载后自动触发
10 JavaScript window.onload 事件和 jQuery ready 函数有何不同?(背)
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树加载完就提前触发
11$(this) 和 this 关键字在 jQuery 中有何不同?
$(this)是个转换,将this表示的dom对象转为jquery对象,这样就可以使用jquery提供的方法操作。
12鼠标事件
mouseover 和 mouseout 默认是冒泡的,也就是说进出子元素,同样会触发父元素上的事件;
而且不能使用 e.stopPropagation( )解决,因为事件绑定在最外层父元素上,不可能给每个子元素都绑定事件阻止冒泡
jquery中 都是用 mouseenter 和 mouseleave 来代替鼠标移入移除事件的,可以防止冒泡,在父元素上绑定事件,鼠标进入子元素不再触发。
jquery中只绑定一个 : .hover() 等效于同事绑定了mouseenter 和 mouseleave ,但是.hover()中需要两个函数,一个是给 mouseenter的 一个是给mouseleave的
13模拟触发
模拟触发:既没有点击按钮也可以执行按钮上的事件处理函数
如何? $(处理函数所在的元素).trigger('事件名') $btn.trigger('click')
可简写为 .事件名()
做变输入边查找时用 $tex.on("input",function(){//在输入是触发事件
$btn.click()
})
14jqeuery动画
1 简单动画:固定的三种动画效果: 01 显示隐藏: .show( ) .hide( ) .toggle( )
02 上滑下滑: .slideUp() .slideDdown( ) .slideToggle( )
03 淡入淡出 .faddIn( ) .fadeOut( ) .fadeToggle( )
15类数组对象操作
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() 向数组的末尾添加一个或更多元素,并返回新的长度
21上啦加载,下拉刷新
//配置下拉刷新和上拉加载注意:
//下拉刷新是对原有数据的覆盖,执行的是html方法
//上啦加载是在原有结构的基础上,进行追加,追加在末尾
22前段技术中有哪些异步请求的方案?
jquery 封装: $.ajax( ) 基于回调函数=》回调地狱
aixos 底层还是xhr 基于promise 可以避免回调地狱
23 先回流 和 后重绘
01什么时候发生回流(重排)reflow:
页面中的元素 发生影响布局的变化(改变宽高尺寸,修改显示隐藏状态)
页面需要重新布局,就会触发回流;(改大小)
02什么时候触重绘(repaint):
页面中的元素 发生不影响布局的样式变化(背景颜色,背景图片,字体颜色)
页面需要重新渲染,就会触发重绘(该样式)
要点:
01 每个页面至少进行一次 回流 和 重绘
02 回流 必将引起 重绘
js执行主线程 和 ui渲染进程 是 互斥的(同时只能执行一个)原因?
因为js有可能改变页面css的样式,所以会等js程序执行完,再进行渲染
也有肯能 css样式还没有渲染完,js就去获取样式,这样获取到的样式不完整, 所以 js执行主线程 和 ui渲染进程只能同时执行一个