一、什么是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].innerHTML JQ对象与JS(DOM)对象转换：
//js-->jQuery var oBox = document.getElementById("box"); oBox.innerHTML = "888"; $(oBox).html("888") //jq-->js var $p = $("#box p"); $p.html("11111"); $p[0].innerHTML("111"); $p.get(2).innerHTML = "111"; //jq--->特定的jq var $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")) False console.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() value var $box = $("#box"); alert($box.attr("class")) $box.attr("class","小婆") $box.attr("py","xp"); $box.removeAttr() 关于attr深入：
是否可见是否可见
文档节点，即html标签等操作
//创建一个标签对象 $("")//内部插入 $("").append(content|fn) ----->$("p").append("Hello"); $("").appendTo(content) ----->$("p").appendTo("div"); $("").prepend(content|fn) ----->$("p").prepend("Hello"); $("").prependTo(content) ----->$("p").prependTo("#foo");//外部插入 $("").after(content|fn) ----->$("p").after("Hello"); $("").before(content|fn) ----->$("p").before("Hello"); $("").insertAfter(content) ----->$("p").insertAfter("#foo"); $("").insertBefore(content) ----->$("p").insertBefore("#foo");//替换 $("").replaceWith(content|fn) ----->$("p").replaceWith("Paragraph. ");//删除 $("").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())