jquery

Posted 2022-08-29 javascript9527

关于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( )

jquery中新增的 特有选择器

　　　　

01 基本过滤/位置过滤： :first :last :eq(i) :gt(i) :lt(i) :even :odd jq中特有的

02 内容过滤: button：contain(文本) 用元素内容中的文本作为筛选条件

：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($父元素)

 

总结$的4种用途 （背）

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 函数有何不同？（背）

01 window.onload=function() html css js 图片等都加载完才能触发执行

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是内容
)

 

 

 

16正则　　

正则校验

\d 表示数字

*表示出现**0次** 或 **多次**

+表示出现**一次**或**多次**

？表示出现0次或一次

要求 //必须是非0开头的数字
/^[1-9]\d*$/.test() 返回boolean 值
//‘尺码必须为XX-XX格式‘
/^\d2-\d2$/

 

17返回上一页面

history.back();
history.go(-1)

 

20 splice 的用法

<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前段技术中有哪些异步请求的方案？

原生 xhr： 1234

jquery 封装: $.ajax( ) 基于回调函数=》回调地狱

aixos 底层还是xhr 基于promise 可以避免回调地狱

23 先回流 和 后重绘

01什么时候发生回流（重排）reflow：

页面中的元素 发生影响布局的变化(改变宽高尺寸，修改显示隐藏状态)

页面需要重新布局，就会触发回流；（改大小）

02什么时候触重绘(repaint)：

页面中的元素 发生不影响布局的样式变化（背景颜色，背景图片，字体颜色）

页面需要重新渲染，就会触发重绘（该样式）

要点：

01 每个页面至少进行一次 回流 和 重绘

02 回流 必将引起 重绘

js执行主线程 和 ui渲染进程 是 互斥的(同时只能执行一个)原因？

因为js有可能改变页面css的样式，所以会等js程序执行完，再进行渲染

也有肯能 css样式还没有渲染完，js就去获取样式，这样获取到的样式不完整， 所以 js执行主线程 和 ui渲染进程只能同时执行一个