jquery

牧云@^-^@ 提交于 2019-11-28 16:09:21

关于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格式'
/^\d{2}-\d{2}$/

 

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渲染进程只能同时执行一个

 

 

 

 

 

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!