jQuery学习笔记

jQuery 是一个对原生JavaScript 代码封装、增强的JavaScript 库。

1.引入方式

在线引入

<script type="text/javascript" src="https://xxxx/jquery.js"></script>

离线引入

<script type="text/javascript" src="js/jquery.js"></script>

2.创建对象

$("div");  // 返回由jQuery包装的所有div元素
$(".wrap"); // 返回由jQuery包装的所有带class="wrap"的元素
$("#banner");  // 返回由jQuery包装的所有带id="banner"的元素

3.页面加载完成事件

$(document).ready(function(){
    // 文档就绪
});

//简写
$(function(){
  // 文档就绪
});

4.迭代jQuery对象

jQueryObj.each(callback);

$("img").each(function(i){
   this.src = "test" + i + ".jpg";  // 注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。
 });

5.在元素上存放或读取数据

jQueryObj.data(key, [value]);

var div = $( "div" )[ 0 ];
	jQuery.data( div, "test", {
		first: 16,
		last: "pizza!"
	});

6.jQuery CSS操作

jQueryObj.css(prop);  // 读取对应的css属性值
jQueryObj.css(prop, val);  // 设置对应的css属性值
jQueryObj.css({prop1: val1, prop2: val2...});  // 设置多个css属性值
//例
$("p").css("background-color","yellow");
$("p").css({"background-color":"yellow","font-size":"200%"});

7.通过 text()、html() 以及 val() 方法来设置内容：

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});

8.jQuery文档操作

内部插入

• append(content)

• appentTo(content)

• prepend(content)

• prependTo(content)

外部插入

复制

• after(content) 在每个匹配的元素之后插入内容。

• before(content) 在每个匹配的元素之前插入内容。

• 删除

• empty() 清除指定元素内部的所有内容（包括子元素）

• remove() 将指定元素从DOM树中删除(包括文本内容和所有子元素)

• clone[even, [deepEven]] 克隆匹配的DOM元素并且选中这些克隆的副本。

• 1. 一个布尔值（true 或者 false）指示事件处理函数是否会被复制。

• 2. 一个布尔值，指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。