jQuery基础02

html部分

<div id="div1"></div>
<div id="div2"></div>
<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>
<input type="text" id="i1" /><br />
<img />
<img/>
<a href="http://www.baidu.com" index="0"></a>
<input type="checkbox" checked/>

css部分

<style type="text/css">
	div {
	    /*height: 50px;*/
		/*border: 1px solid red;*/
	}
			
	li {
		/*height: 50px;*/
		border: 1px solid red;
		/*list-style: none;*/
	}
</style>

DOM操作

1. 获取DOM节点

     1.1 JS写法 document.getElementxxx document.querxxx

     1.2 JQ写法 $("选择器");

2. 操作元素内容

      2.1 JS写法 innerHTML innerText textContent

      2.2 JQ写法 html(), text(), val()

3. 操作元素样式

     3.1 JS写法  点语法操作style属性, 读写性; getComputedStyle()只读

     3.2 JQ写法  css() 读写的

4. 操作元素属性

      4.1 JS写法  .语法(读写性);   setAttribute()/getAttribute()

     4.2 JQ写法  attr(), prop()

5. 创建, 插入, 删除元素

      5.1 JS写法  var div = createElement("div") 父元素.appendChild(子元素) 父元素.removeChild(子元素)

      5.2 JQ写法

            5.2.1. 创建节点    var div1 = $("<div></div>");

            5.2.2. 设置样式和属性

div1.css({
    width:"200px",
    height:"200px",
    backgroundColor:"red",
    textAlign: "center",
    lineHeight: "200px"
}).prop("id", "div1").html("这是div标签");

1.jq添加元素的方法

      1. jq对象.append(创建的jq对象/DOM元素/HTML字符串); 在最后添加

    $("body").append($("<button/>").html("按钮1"));
    $("body").append();
    var btn = document.createElement("button");
    btn.innerHTML = "DOM按钮";
    $("body").append(btn);
    $("body").append("<button>字符串按钮</button>");
    var i1 = document.createElement("input");
    var i2 = document.createElement("input");
    var eleArr = [i1, i2];
    $("body").prepend(eleArr);

2. jq对象.prepend(创建的jq对象/DOM元素/HTML字符串/元素数组) 在最前添加

    $("body").prepend($("<button/>").html("按钮二"));
	var bnt2 = document.createElement("button");
	bnt2.innerHTML = "DOM按钮2";
	$("body").prepend(bnt2);
	$("body").prepend("<button>字符串按钮2</button>");
	var i1 = document.createElement("input");
	var i2 = document.createElement("input");
	var eleArr = [i1, i2];
	$("body").prepend(eleArr);

3. (创建的jq对象).appendTo(jq对象/选择器/DOM节点); 添加到父级的里面的最后面

    $("<input type='radio'/>").appendTo($("li"));
	$("<input type='radio'/>").appendTo("body");
	$("<input type='radio'/>").appendTo(document.querySelectorAll("li"));

4. 创建的jq对象.prependTo(jq对象);  添加到父级的里面的最前面

    $("<input type='radio'/>").prependTo($("li"));
	$("<input type='radio'/>").prependTo("body");
	$("<input type='radio'/>").prependTo(document.querySelectorAll("li"));

5.jq对象.after(创建的jq对象/DOM元素/HTML字符串)在已经存在的jq对象的后面插入新元素

    $("ul").after($("<img/>")).prop("src", "../Day08/img/1.png");
	$("ul").after(document.createElement("hr"));
	$("ul").after("<h2>标题2标签</h2>");

6.已存在的jq对象.before(创建的jq对象/DOM元素/html字符串)在已存在的jq对象前面插入新的元素

    $("img:first").before($("<button/>")).html("按钮111");
    $("img:first").before(document.createElement("hr"));
    $("img:first").before("<textarea></textarea>");

7.jq删除节点      要删除的jq对象.remove();    要删除的jq对象.detach()

以上两个方法会删除jq对象里表示的所有元素      以上两个方法都有返回值，返回值是删除的对象

remove()在移除元素的同时会解绑其绑定的事件      detach()之移除元素，不会解绑其绑定的事件

setTimeout(function(){
	console.log($("img").remove());
	console.log($("button").detach());
},2000)
$("li").click(function(){
	alert("这是li元素")
});
$("button").click(function(){
	alert("这是button元素");
});
$("body").append($("li").remove());
$("body").append($("li").detach());

8.克隆元素 clone(布尔值)
            布尔值：是否连事件一并克隆，默认时false,不克隆事件   返回值：克隆好的jq对象

$("body").prepend($("ul").clone(true));

9.遍历jq对象

var btnObj=$("button");
for (var i=0;i<btnObj.length;i++) {
	console.log(btnObj.eq(i));
}
btnObj.forEach(function(v,i){
		
})

 each()jq自带的遍历jq对象的方法，回调的参数，第一个为下标，第二个为dom元素

var btnObj = $("button");
btnObj.each(function(i, v) {
	console.log(i, v);
});