一、jQuery是什么？
jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
二 、什么是jQuery对象？
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。
jQuery 对象是 jQuery 独有的.
对比一下：
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲test").html() 这…(selector).action() 翻译：$(选择器).操作()
三、 寻找元素(选择器和筛选器)
3.1 选择器
3.1.1 基本选择器
$("*") $("#id") $(".class") $(“element”) $(".class,p,div") 3.1.2 层级选择器
$(".outer div") 后代
$(".outer>div") 子代
$(".outer+div") 挨着的兄弟（向下找）
$(".outer~div") 不挨着的兄弟（向下找）
3.1.3 基本筛选器
$(“li:first”)
$(“li:eq(2)”) 第三个
$(“li:even/odd”) 偶奇数
$(“li:gt(1)”) 从2以后
$(“li:lt(1)”) 从2以前
3.1.4 属性选择器
$(’[id=“div1”]’) 3.1.5 表单选择器
$("[type=‘text’]")----->下面是简写
$(":text") 注意只适用于input标签 3.2 筛选器
3.2.1 过滤筛选器（比基本筛选器灵活）
$(“li”).eq(2)
$(“li”).first()
$(“ul li”).hasclass(“test”)3.2.2 查找筛选器（上下内外旁）
内(子代) $(‘div’)children(".test") $(“div”).find(".test")
下 $(".test").next() $(".test").nextAll() $(".test").nextUntil()
上 $(“div”).prev() $(“div”).prevAll() $(“div”).prevUntil()
外(父母) $(".test").parent() $(".test").parents() $(".test").parentUntil()
旁 (兄弟) $(“div”).siblings()
四 、操作元素(属性，css，文档处理)
4.1 属性操作（更改属性）
--------------------------属性------------------------------
$("").attr(); 一取二换（适用自定义的属性） attr(‘a’,‘b’)
$("").removeAttr();
$("").prop(); 和attr的区别在于适用于固有属性
$("").removeProp();
--------------------------CSS类-----------------------------
$("").addClass(class|fn) 加类选择器
$("").removeClass([class|fn]) 删 --------------------------HTML代码/文本/值----------------
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr]) 用于固有属性（input等表单标签）获取值（获取value）$("").css(“color”,“red”)4.2 文档处理
//创建一个标签对象
$("< p>")//内部插入（子插父）
向下插
$("").append(content|fn)
-----> $(“p”).append(“Hello”); p里面插入b
$("").appendTo(content)
-----> $(“p”).appendTo(“div”); 把p插到div里去
向上插
$("").prepend(content|fn)
-----> $(“p”).prepend(“Hello”);
$("").prependTo(content)
-----> $(“p”).prependTo("#foo");//外部插入
$("").after(content|fn) ----->$("p").after("<b>Hello</b>"); b插在p后
$("").before(content|fn) ----->$("p").before("<b>Hello</b>"); b插在p前
$("").insertAfter(content) ----->$("p").insertAfter("#foo"); p插在#foo后
$("").insertBefore(content) ----->$("p").insertBefore("#foo"); p插在#foo前//替换
$("").replaceWith(content|fn) -----> $ (“p”).replaceWith("Paragraph. ");
b替换p
//删除$("").empty() 清空还剩自己
$("").remove() 包括自己一起死//复制
$("").clone([Even[,deepEven]])4.3 css操作
css
$("").css()位置
$("").offset([coordinates]) 相对于视口
$("").position() 相对于已经定位的标签
这两个都是返回一个对象，都有top和left属性
$("p").offset().top
$("").scrollTop([val]) 滚动条的位置，需要绑定监听事件（window.function(){}）
$("").scrollLeft([val])
尺寸(无参获取，有参改变)
内容的尺寸
$("").height([val|fn])
$("").width([val|fn])
包括padding
$("").innerHeight()
$("").innerWidth()
包括padding和border
$("").outerHeight([options])
$("").outerWidth([options])
包括p和b和m
$("").outerHeight(true)
$("").outerWidth(true)五 、事件
事件准备
$(document).ready(function(){}) -----------> $(function(){})我等标签和css加载完成在加载jquery
事件绑定
$(‘ul li’).bind(‘click’, function(){console.log(‘click’);}) 简写： $(‘ul li’).click(function(){console.log(‘click’);})
unbind(click)解除绑定
事件委托
$("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。
$(‘ul’).on(‘click’, ‘li’, function(){console.log(‘click’);})就是筛选出ul下的li给其绑定click事件； 好处在于.on方法为动态添加的元素也能绑上指定事件；
// $(‘ul li’).on(‘click’, function(){console.log(‘click’);})的绑定方式和
// $(‘ul li’).bind(‘click’, function(){console.log(‘click’);})一样；我通过js给ul添加了一个
//li： $(‘ul’).append(’< li>js new li< /li>’)；这个新加的li是不会被绑上click事件的
//但是用 $(‘ul’).on(‘click’, ‘li’, function(){console.log(‘click’);}方式绑定，然后动态添加//li: $(‘ul’).append(’< li>js new li< /li>’);这个新生成的li被绑上了click事件
六 、动画效果
显示隐藏
$(“p”).hide(1000)；显（参数表示时间）
$(“p”).show(1000)；隐
$(“p”).toggle(); 切换滑动出入
slideDown(1000)
$("#content").slideUp(1000);
$("#content").slideToggle(1000);淡入淡出
$("#id1").fadeOut(1000);
$("#id1").fadeToggle(1000);
$("#id1").fadeTo(1000,0.4);第二个参是调到哪里停（0~1）
$("#id1").fadeIn(1000);以上这些函数都可以加一个回调函数（完成某事再调用该函数），意思就是动画执行完再执行的函数
KaTeX parse error: Expected '}', got 'EOF' at end of input: … alert((this).html())
}七、 扩展方法 (插件机制)
也就是自定义方法
$.extend(object) //为JQuery 添加一个静态方法。
$.fn.extend(object) //为JQuery实例添加一个方法。 区别就是 $.extend(object) 直接调用
$.fn.extend(object) 先选出标签再调用
$.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
console.log($.min(3,4));$.fn.extend({
"print":function(){
for (var i=0;i<this.length;i++){
console.log($(this)[i].innerHTML)
}
}});
$(“p”).print();
