jQueryHTML与插件

jQurey支持链式调用的原理：每个jQuery函数的返回值都是jQuery对象

1、jQuery 事件机制

（1）注册事件

bind() 、on() 方法向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数。

 $("#header1").bind({

    mouseover() {

      $(this).css("background-color", "blue");

    },

    mouseout() {

      $(this).css("background-color", "black");

    }

  })

 $("p").on("click",function(){ alert("段落被点击了。"); });

（2）委托事件

delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数

$("div").delegate("p","click",function(){
    $("p").css("background-color","pink");
});

（3）事件对象event

$("button").click(function(event){ 

          console.log(evet);

  });

（4）each()方法

each() 方法为每个匹配元素规定要运行的函数。

$("button").click(function(){ 

$("li").each(function(){ 

alert($(this).text())   //相当于JS中的innerText

alert($(this).html())   //相当于JS中的innerHTML

});  

});

（5）jQuery.each() 函数用于遍历指定的对象和数组。

 var arr = [10, 20, 30, 40];

  $.each(arr, function (index, value) {   //注意index(索引),value前后顺序

    console.log(`我是第${index + 1}元素,值是${value}`);

  })

  let obj = {

    name: "小",

    age: 15,

    eat() {

      return 1;

    }

  }

  $.each(obj, (key, value) => {

    console.log(`${key}:${value}`);

  })

2.jQuery 对HTML的设置与捕获

（1）html() 不传参是获取，传参数是设置

html() - 设置或返回所选元素的内容（包括 HTML 标记）。

$("#btn2").click(function(){

 alert("HTML: " + $("#test").html());

});

$("#btn2").click(function(){ 

$("#test2").html("<b>Hello world!</b>");

});

（2）text() 不传参是获取，传参数是设置

text() - 设置或返回所选元素的文本内容

$("#btn1").click(function(){ 

alert("Text: " + $("#test").text());

});

$("#btn1").click(function(){ 

$("#test1").text("Hello world!");

});

（3）val() 不传参是获取，传参数是设置

val() - 设置或返回表单字段的值

$("#btn1").click(function(){ 

alert("值为: " + $("#test").val());

});

$("#btn3").click(function(){ 

$("#test3").val("RUNOOB");

});

（4）text()、html() 以及 val() 的回调函数

上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

$("#btn1").click(function(){ 

$("#test1").text(function(i,origText){ 

return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";

});

});

（5）attr()、prop()（传一个参数是获取属性值，传两个参数是设置属性值）

attr() 、prop()方法用于获取和返回属性值。

$("button").click(function(){ alert($("#runoob").attr("href")); });

$("button").click(function(){ $("#runoob").attr("href","http://www.runoob.com/jquery"); });

具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()；.attr不仅可以返回（设置）元素的原生属性，还可以返回（设置）自定义属性。（只有attr可以获取自定义属性）

3.jQuery 对HTML的页面尺寸操作

 

（1）width() 和 height() 方法（无单位）

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

$("button").click(function(){

"div 的宽度是: " + $("#div1").width() + "</br>";

    "div 的高度是: " + $("#div1").height(20);

});

（2）innerWidth() 和 innerHeight() 方法（无单位）

innerWidth() 方法返回元素的宽度（包括内边距）。

innerHeight() 方法返回元素的高度（包括内边距）。

$("button").click(function(){

"div 宽度，包含内边距: " + $("#div1").innerWidth();

"div 高度，包含内边距: " + $("#div1").innerHeight();

});

（3）outerWidth() 和 outerHeight() 方法（无单位）

outerWidth() 方法返回元素的宽度（包括内边距和边框）。

outerHeight() 方法返回元素的高度（包括内边距和边框）。

$("button").click(function(){ 

txt+="div 宽度，包含内边距和边框: " + $("#div1").outerWidth() 

  txt+="div 高度，包含内边距和边框: " + $("#div1").outerHeight();

  });

（4）scrollTop() 和 scrollLeft() 方法

scrollTop() 方法设置或者返回滚动条被卷去的元素的高度

scrollLeft() 方法设置或者返回滚动条被卷去的元素的宽度

$("button").click(function(){ alert($("div").scrollTop()); });

4.jQuery添加元素和删除元素

（1）append()方法  （子元素）

 append() 方法在被选元素的结尾插入内容（仍然在该元素的内部）   

$("ol").append("<li>追加列表项</li>");

（2）prepend() 方法

 prepend() 方法在被选元素的开头插入内容。

$("ol").prepend("<li>追加列表项</li>");

（3）after() 和 before() 方法  （兄弟元素）

jQuery after() 方法在被选元素之后插入内容。

jQuery before() 方法在被选元素之前插入内容。

$("img").before("<b>之前</b>");

$("img").after("<i>之后</i>");

（4）删除元素/内容

remove() - 删除被选元素（及其子元素）

empty() - 从被选元素中删除子元素

empty()把子元素删除掉了。本身没有删除掉。所以本身占位置

remove()把自己和子元素都删除掉了。本身已删除掉。所以不占位置