一、什么是JQuery
［1］ jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。
［2］ jQuery是一种新型的JavaScript库。jq是用js写的，能用jq实现，用js都能实现,JQuery的api只对自己开放，jq不能用js的API，js也不能用jq的API
［3］ 它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器
［4］ jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。
［5］ jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
二、JQuery对象
`jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
$("#test").html() 意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 这段代码等同于用JS实现代码： document.getElementById(" test ").innerHTML; 虽然jQuery对象是包装JS对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理JS对象也不能使用jQuery里的方法.乱使用会报错约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$. var $variable = jQuery 对象
var variable = DOM (JS)对象$variable[0]：jquery对象转为dom对象 $("#msg").html(); $("#msg")[0].innerHTMLJQ对象与JS(DOM)对象转换：
//js-->jQueryvar oBox = document.getElementById("box");oBox.innerHTML = "888";
$(oBox).html("888")//jq-->jsvar $p = $("#box p");$p.html("11111");$p[0].innerHTML("111");$p.get(2).innerHTML = "111";//jq--->特定的jqvar $p = $("#box p");$p.html("333");$p.eq(1).html("888");
三、JQ选择器和筛选器
基本选择器 $("*") $("#id") $(".class") $("element") $(".class,p,div")分别是：全部、id、class、标签、多选 层级选择器 $(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")分别是：后代、子代、相邻、兄弟 属性选择器 $('[id="div1"]') $('["alex="sb"][id]')分别是：对定义的属性进行选择 表单选择器 $("[type='text']")----->$(":text") 注意只适用于input标签 : $("input:checked")
表单选择器：
:enabled:disabled:checked:selected基本筛选器：
基本筛选器 a = $("li:first") //取第一个 console.log(a)b = $("li:eq(2)") //取索引为2的那一个 console.log(b)c = $("li:even") //先取第一个隔一个再取 console.log(c)d = $("li:gt(3)") //隔几个再取console.log(d)
筛选器方式二：
$("li").eq(2) $("li").first() $("ul li").hasclass("test")关系筛选器
// hasClass 检查当前元素是否含有某个特定的类，如果有返回True.否则返回False// children 找儿子，可以不传参数// find 默认不找，传参的话找对应参数的后代// parent 找父级，b不需要参数// parents(".show") 找到名字叫做show的祖先// sibings 不传参，找对应参数的兄弟// alert($("p").hasClass("box2")) Falseconsole.log($("#box").children("p"));console.log($("#box").children());console.log($("#box").find("p"))
例：
查找子标签： $("div").children(".test") $("div").find(".test") 向下查找兄弟标签： $(".test").next() $(".test").nextAll() $(".test").nextUntil() 向上查找兄弟标签： $("div").prev() $("div").prevAll() $("div").prevUntil() 查找所有兄弟标签： $("div").siblings() 查找父标签： $(".test").parent() $(".test").parents() $(".test").parentUntil() 属性操作
// attr 设置/获取 标签属性// removAttr() 移除标签属性// // addClass// removeClass()// 传入参数，class，则移除对应的class// 若不传人参数，则移除全部// toggleClass()// 有class就删除，没有就增加// // jQuery js// // html() innerHTML// text() innerText// val() valuevar $box = $("#box");alert($box.attr("class"))$box.attr("class","小婆")$box.attr("py","xp");$box.removeAttr()
关于attr深入：
<input id="chk1" type="checkbox" />是否可见 <input id="chk2" type="checkbox" checked="checked" />是否可见<script>//对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。 //对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。 //像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此 //需要使用prop方法去操作才能获得正确的结果。// $("#chk1").attr("checked") // undefined // $("#chk1").prop("checked") // false// ---------手动选中的时候attr()获得到没有意义的undefined----------- // $("#chk1").attr("checked") // undefined // $("#chk1").prop("checked") // true console.log($("#chk1").prop("checked"));//falseconsole.log($("#chk2").prop("checked"));//trueconsole.log($("#chk1").attr("checked"));//undefinedconsole.log($("#chk2").attr("checked"));//checked </script>
文档节点，即html标签等操作
//创建一个标签对象$("<p>")//内部插入 $("").append(content|fn) ----->$("p").append("<b>Hello</b>");$("").appendTo(content) ----->$("p").appendTo("div");$("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>");$("").prependTo(content) ----->$("p").prependTo("#foo");//外部插入 $("").after(content|fn) ----->$("p").after("<b>Hello</b>");$("").before(content|fn) ----->$("p").before("<b>Hello</b>");$("").insertAfter(content) ----->$("p").insertAfter("#foo");$("").insertBefore(content) ----->$("p").insertBefore("#foo");//替换$("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");//删除 $("").empty()$("").remove([expr])//复制 $("").clone([Even[,deepEven]])
JQ事件：
事件绑定：
var $box = $("box");$box.click(function () {alert(1)})
事件委派，是绑定事件的另一方式，可以绑定多个事件
语法：$("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。
eve：事件类型
fn:函数//on绑定单个事件$("li").on("click",function () {alert($(this).index()) //在jq里面index()是你对应的下标 }) //on绑定多个事件$("#box").on({"click":function () {alert(1);},"click2":function () {alert(1);},"click3":function () {alert(3)}
each遍历(循环)：
//方法一 //格式：$.each(obj,fn) $("#box p").each(function (i) {this.innerHTML = "我是第" + i +"个";$(this).html("我是第"+ i + "个");})//方法二 //格式：$("").each(fn) li=[10,20,30,40]; dic={name:"yuan",sex:"male"}; $.each(li,function(i,x){console.log(i,x) });
JQ的css操作：
// css设置样式// .css()// 以下是返回对应的的信息// .width()// .height()// // innerWidth() / innerHeight 会算上padding// outerWidth() / outerHeight 会算上 padding+border// // offset()// 该对象有top/left属性// 代表的是到浏览器的值// // position（）// 该对象有top/left属性// 代表的是到父级的值// var $box = $("#box");// $box.css("height","200px");// // oBox.style.height = "200px"; 当然要获取oBox// // $box.css({// // "width":"400px",// // "height":"300px",// // "background":"red"// // })给多个样式// alert($box.width())// alert($box.height())
