08 技术扩展-JQuery知识点

JQuery

一、顶级对象

JQueryd的顶级对象是jQuery，简写符号为**$**。它能够方便的调用出封装好的方法

二、页面加载事件

2.1 $(window).load( )

当页面中的所有内容加载完毕后才会触发该页面加载事件

$(window).load(function (){
  console.log("页面加载事件一");
})

2.2 $(document).ready( )

当页面的基础标签加载完毕后立马触发该页面加载事件

$(document).ready(function (){
  console.log("页面加载事件二");
})

2.3 jQuery(function( ){ })

当页面的基础标签加载完毕后立马触发该页面加载事件

jQuery(function (){
  console.log("页面加载事件三");
})

2.4 $( function( ){ })

当页面的基础标签加载完毕后立马触发该页面加载事件

$(function (){
  console.log("页面加载事件四");
})

三、jQuery和DOM对象互转

两种对象的互转的意图，在于当jQuery对象封装的方法无法解决的问题通过转成DOM对象，使用传统方式解决。

3.1 DOM对象转jQuery对象

• $( DOM对象 )

window.onload = function (){
  let dom = document.getElementById("test"); // DOM对象
  // 转jQuery对象
  $(dom).click(function (){
    console.log("DOM --> jQuery");
  })
}

3.2 jQuery对象转DOM对象

1. $( 选择器 ).get(0)

$(function () {
    // 转DOM对象
    $("#test").get(0).onclick = function(){
    console.log("jQuery --> DOM");
  };
})

1. $( 选择器 ).[0]

$(function () {
    // 转DOM对象
    $("#test").[0].onclick = function(){
    console.log("jQuery --> DOM");
  };
})

三、选择器

3.1 常规选择器

1. id选择器：$("#id")
2. 类选择器：$(".class")
3. 标签选择器：$(“tagName”)
4. 获取所有元素选择器：$("*")
5. 标签+类选择器：$(“tagName.class”)
6. 多条件选择器：$(“tagName,tagName,…”)
7. 奇数选择器：$(“tagName:odd”)
8. 偶数选择器：$(“tagName:even”)

3.2 层级选择器

1. 后代选择器：$(“子元素 孙子元素 …”)
2. 子代选择器：$(“parent element > child element”)
3. 获取当前元素相邻元素：$(“tagName + tagName”)
4. 获取当前元素后所有元素：$(tagName ~ tagName)

3.3 索引选择器

1. 获取索引元素：$(“tagName:eq(num)”)
2. 获取索引大于指定数字所有元素：$(“tagName:gt(num)”)
3. 获取索引小于指定数字所有元素：$(tagName:lt(num))

四、方法

4.1 常规方法

1. html( )：设置标签之间显示的HTML内容，类似innerHTML
2. text( )：设置标签之间显示的文本内容，类似innerText
3. val( )：设置标签属性的value值，类似value
4. css( )：设置元素的样式，类似style

4.2 操作样式方法

1. addClass(“类样式名 类样式名”)：元素添加样式
2. removeClass(“类样式名”)：删除元素样式，不写参数可删除所有样式
3. hasClass(“类样式名”)：检测当前元素是否应用该样式
4. toggleClass(“类样式名”)：切换元素的类样式

4.3 操作元素方法

1. next( )：当前元素之后的紧邻的第一个兄弟元素
2. nextAll( )：当前元素之后的所有兄弟元素
3. prev( )：当前元素之前的紧邻的第一个兄弟元素
4. prevAll( )：当前元素之前的所有兄弟元素
5. siblings( )：当前元素的所有兄弟元素

五、链式编程

为了减少编程代码量，在返回值为同一个对象的方法之间可直接通过**"."**之间接在方法后面继续调用新的方法，若返回不是同一对象的方法时间进行链式调用会出现断链错误。

对象.方法( ).方法( ).方法 () …

$(function (){
  $("#test").click(function (){
    $("#dv").html("<p>链式调用</p>").clss("fontSize","28px")
  })
})

修复断链的方法为 end( )，恢复到断链之前的效果。

六、动画

6.1 显隐动画

1. hide( )：隐藏元素动画
2. show( )：显示元素动画

6.2 切换动画

6.2.1 滑入滑出

1. slideUp( )：滑入动画
2. slideDown( )：滑出动画
3. slideToggle( )：切换滑入滑出

6.2.2 淡入淡出

1. fadeIn( )：淡入动画
2. fadeOut( )：淡出动画
3. fadeToggle( )：切换淡入淡出
4. fadeTo(IntNum,floatNum)：透明度淡化

以上方法都可以进行传参，设置动画效果

1. Number类型 ，根据数值设置动画运行时长（单位：毫秒）
2. String类型，根据描述设置运行时长（“slow” ,“normal”, “fast”）

6.3 元素动画

1. animate({样式},动画时间,回调函数)：控制元素的样式变动的动画效果
2. stop( )：停止动画效果

七、DOM操作

7.1 动态创建元素

7.1.1 $(“标签代码”)

$(function (){
  $("#btn").click(function (){
    // 创建元素
    let aEle = $("<a href="http://www.mi.com">小米</a>");
                 
    // 在当前元素中，往后插入元素
    $("#test").append(aEle);
      
    // 在当前元素中，主动往后插入元素
    //aEle.appendTo($("#test"));
      
    // 在当前元素中，往前插入元素
    //$("#test").prepend(aEle);
      
    // 在当前元素后，往后插入元素（往后创建兄弟元素）
    //$("#test").after(aEle);
      
    // 在当前元素前，往后插入元素（往后创建兄弟元素）
    //$("#test").before();
  })
})

7.1.2 Obj.html(“标签代码”)

$(function (){
  $("#btn").click(functiom (){
  	$("#test").html("<p>Hello jQuery</p>")
  })
})

7.2 克隆元素

$(function (){
  let cloneEle = $("#test").children().clone();
  cloneEle.css("color","red");
  $("#clo").append(cloneEle);
})

7.3 清除元素及内容

1. $(选择器).html("")：清除该元素中的内容
2. $(选择器).empty( )：清除该元素中的内容
3. $(选择器).remove( )：清除该元素

7.4 操作表单值

1. $(选择器).val("")：获取表单值
2. $(选择器).val(“new value”)：设置表单值

7.5 自定义属性

1. Obj.attr(“属性”,“属性值”): 设置创建元素的属性

$(function (){
  $("#btn").click(function (){
   let aEle = $("<a></a>");
   aEle.attr("title,"小米");
   aEle.attr("href","http://www.mi.com");
   $("#test").append(aEle);
  })
})

2. Obj.attr(“属性”): 获取元素的属性值

7.6 操作元素宽高

1. $(“选择器”).width(): 获取元素的宽度值
2. $(“选择器”).width(值): 设置元素的宽度值
3. $(“选择器”).height( ): 获取元素的宽度值
4. $(“选择器”).height(值): 设置元素的宽度值

7.7 操作元素偏移

1. $(“选择器”).offset(“left”:值,“right”:值): 设置元素的偏移值
2. $(“选择器”).offset( ).left: 获取元素的水平偏移值
3. $(“选择器”).offset( ).top: 获取元素的垂直偏移值

1. 该方法返回值是一个对象，对象中包含数字类型的left与top。
2. 设置的值无"px"单位，设置的元素若没有脱离文档流，设置时会自动进行脱离文档流，默认为relative。

7.8 操作滚动条偏移

1. $(“选择器”).scrollLeft(值): 设置匹配元素的滚动条水平位置
2. $(“选择器”).scrollTop(值): 设置匹配元素的滚动条垂直位置

八、事件

8.1 元素绑定事件

1. $(选择器).bind(“事件”:function( ){ })：元素绑定单个事件

$(function (){
  $("#btn").bind("click":function() {
    console.log("点击事件");
  })
})

2. $(选择器).bind({“事件”:function( ){ },…})：元素绑定多个事件

$(function (){
  $("#btn").bind({"click":function(){
    console.log("点击事件");
  },"mouseover":function() {
    console.log("鼠标滑入事件");
  },"mouseout":function() {
    console.log("鼠标滑出事件");
  }})
})

3. $(选择器).delegate(“元素”,“事件”:function( ){ })：为子元素绑定事件

$(function (){
  $("#btn").delegate("p","click":function() {
    console.log("子元素点击事件");
  })
})

4. $(选择器).on(“事件”:function( ){ })：元素绑定事件
5. $(选择器).on(“元素”,“事件”,":function( ){ })：为子元素绑定事件

8.2 元素解绑事件

1. $(选择器).off(“事件”)：元素解绑事件
2. $(选择器).unbind(“事件”)：元素绑定事件
3. $(选择器).undelegate(“事件”)：元素绑定事件

8.3 触发事件

1. $(选择器).事件名( )：触发事件
2. $(选择器).trigget(“事件”)：触发事件
3. $(选择器).triggerHandler(“事件”)：触发事件

$(function (){
  
  $("#btn1").click(function (){
    console.log("触发事件");
  })
    
  $("#btn2").click(function (){
    // 方式一
    $("#btn1").click();
    
    // 方式二
    $("#btn1").trigger("click");
      
    // 方式三
    $("#btn1").triggerHandler("click");
  })
})

• trigger( )事件会触发指定事件，还有触发浏览器默认事件
• triggerHandler( )事件触发指定事件，不会触发浏览器默认事件

8.4 取消事件冒泡

元素中包含一个元素，并且这些元素都有相同的事件，若里面元素事件被触发，包围在外层元素的事件也会自动触发。在里层的事件添加返回值 return false即可取消事件冒泡

$(function (){
  $("#div1").click(function (){
    console.log("外层DIV触发");
  })
  $("#div2").click(function (){
    console.log("二层DIV触发");
  })
  $("#div3").click(function (){
    console.log("最里层DIV触发");
    return false;
  })
})

8.5 顶级对象放权

• noConflict( )：将$对象进行控制权的释放

let new$ = $.noConflict();
let $ = "我是普通变量";
new$(function (){
  new$("#btn").click(function (){
    console.log($);
  })
})