9.10 jQuery属性和功能的基础应用 有部分和js做了比较

// 网页中所有DOM结构绘制完成后执行，可能DOM元素关联的东西还没有加载
/*$(document).ready(function() {
    alert("111");
})*/
// 等网页中所有内容都加载完才执行
/*window.onload = function() {

}*/

//==========================================查找节点================================
/*var a = document.getElementById("container");
var b = $("#container");
console.log("js====================");
console.log(a);
// js对象转jQuery对象
console.log($(a));
console.log("jquery====================");
console.log(b);
// jQuery对象转js对象
console.log(b[0]);
console.log(b.get(0));*/

/*$("选择器");
$("#id");//寻找id
$(".class");//寻找class
$("element");//寻找节点
$("*");//全局定义
$("a b");
$("a>b");//选择子类节点
$(".class:first");//第一个class
$(".class:last");//最后一个class
$(".class:first-child"); //选择父元素的第一个子元素
$(".class:last-child"); //选择父元素的最后一个子元素
$(".class:even");//偶数
$(".class:odd");*/基数

/*var x = $("a").eq(0);*/
//==========================================创建节点================================

/*var div = document.createElement("div");
div.innerText("1");//js中创建节点

var span = $("<span class='a'>1</span>");*/jq中创建节点
//==========================================插入节点================================
/*父元素.appendChild(子元素)
父元素.insertBefore(要插入的元素，位置)
var li = $("<li>4</li>");*/
/*$("#ul").append(li);  //添加元素
$("#ul").prepend(li);*/  插入的元素置前

/*li.insertAfter($("li").eq(1));    //  在某个索引后添加元素
insertBefore()*/      //    在某个索引前添加元素

//==========================================删除节点================================
/*$("li").eq(1).remove();
$("li").eq(1).detach(); //从DOM中去掉所有匹配元素，但不会把匹配元素从jQuey对象中删除，因而可以在将来再使用这些匹配的元素
$("li").eq(1).empty();*/    将所选元素置空

//==========================================替换/复制节点================================
/*$("#ul").append($("#li1").clone());    //复制即克隆
$("#li1").replaceWith($("<li>5</li>"));*/    //替换


//==========================================属性操作================================
/*$("#a").attr("target"); //取值       //取属性
$("#a").attr("target","_blank"); //赋值      赋予属性

$("#a").removeAttr("href");*/      去除某个属性

//==========================================样式操作================================
/*$("#container").attr("class","red");*/     覆盖样式
/*$("#container").addClass("red");         //添加样式
$("#container").removeClass("red");*/        //移除样式
/*$("#container").toggleClass("red");       //貌似是隐藏样式  
$("#container").hasClass("red");*/       //显示拥有此样式

/*$("#container").css("height","400px");*/

//==========================================获取设置HTML、文本、值====================
/*$("#container").html("<a>1</a>");      //与js中的innerHTML相同
$("#container").text("<a>1</a>");
$("input").val("xx");*/

//==========================================遍历节点====================
js中
/*子节点.parentNode()
父节点.children()                              //所有的子节点
节点.previousElementSibling();         //所选节点的前一个
节点.nextElementSibling();*/                //所选节点的后一个
jq中
/*子节点.parent()
父节点.children()
节点.prev()
节点.next()*/

//获取所有同辈元素
// console.log($("#li1").siblings());
//用于取得最近的匹配元素，首先检查当前元素是否匹配，匹配直接返回元素本身，否则逐级向上找
// $("#li1").closet("ul");

// 链式编程
 // $("#id").eq(1).append().().().();
 //==========================================事件绑定====================
/*$("#container")[0].onclick = function() {
    alert("11");
}*/
/*$("#container").on/bind("click",function() {              //一般用on
    alert("111");
})

$("#id").on('事件类型'，function() {

})*/