jQuery基础参考文档

jQuery:

Query  查询；

框架库：
JavaScript框架库:就是一个普通的js文件,封装了很多的函数,封装了很多兼容的代码；
jQuery是JavaScript框架库中的一种；
jQuery的好处:写的少,做的多,链式编程,隐式迭代等…；
jQuery可以解决js兼容的问题；

顶级对象：
jQuery，$; 点出来的是jQuery中方法；

DOM对象和jQuery对象（伪数组）可以互转：
* DOM对象转---->jQuery对象:
* $(DOM的对象)----->jQuery对象
* jQuery对象---->DOM对象:
* 1.
* KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲btn")[0]---->DO…("#btn").get(0)—DOM对象

注意：jQuery中的this 要写成$（this）；

//.val()方法—>获取按钮的value属性的值
//.val(“内容”);是设置按钮的value属性的值

$的四种用途：
1：入口函数；
2：把js原生对象转换为jQuery对象；
3：传入一个选择器字符串，获取页面的jQuery对象；
4：传入一个html的字符串，获取jQuery对象；

$(function () {} 是在HTML标签元素加载完后，就立即执行的，不等css的加载；（jQuery的入口函数）；

选择器：
jQuery获取元素的方式:通过各种选择器来获取元素
* 1.根据id来获取—>id选择器 ---->$("#id的值");一个

    * 2.根据标签的名字来获取---标签选择器--->$("标签的名字");多个

    * 3.根据类样式的名字获取--->类选择器--->$(" . 类样式的名字");多个

    * 4.标签加类选择器 $（"标签.类样式的名字 "）;点前后不能加空格；

    * 5.多条件选择器 $（“标签的名字,标签的名字,标签的名字,.......”）；

    * 6.层次选择器  
//获取的是div中所有的p标签元素
            //$("#dv p").
            //获取的是div中直接的子元素
            //$("#dv>p").
            //获取的是div后面的第一个p标签元素
            //$("#dv+p").
            //获取的是div后面所有直接的兄弟元素p标签元素
            //$("#dv~p").

常见的方法：

.text()方法,设置标签中间显示的文本内容,类似于innerText：
	如果小括号中写内容,就是设置文字内容；
	小括号什么也不写,表示的是获取这个元素中的文字内容；

.html()方法，设置标签中间显示其他标签及内容,类似于innerHTML：
	小括号中可以直接写标签的字符串内容,就是设置div中的元素内容
           		小括号中什么也没有,表示的时候获取div中的元素内容

.val()方法.设置input标签中value的值,类似于value：
	小括号中写内容就是设置元素的value属性；
           		小括号中什么也不写,获取元素的value属性的值；

.css()方法,.设置元素的样式,类似于style：
	1：该方法如果只是设置一个样式的属性和值,那么这个方法写两个参数,第一个参数是属性,第二个参数是值；中间用逗号隔开；css("backgroundColor","skyblue");
	2：可以直接写键值对的方式：
     	$("#dv").css({"width":"300px","height":"200px","backgroundColor":"yellow"});
	3：css("backgroundColor");一个参数的时候是获取属性的值;

筛选选择器：
：even 索引偶数 ；从0开始，用户看到的是奇数行；
：odd 索引奇数 ；从0开始，用户看到的是偶数行；
：selected; 选中的；

索引选择器：
获取ul中的索引为4的li标签元素：
$("#uu>li:eq(4)"). （“+index+”）；
获取ul中的索引大于4的所有的li标签元素：
$("#uu>li:gt(4)").
获取ul中的索引小于4的所有的li标签元素：
$("#uu>li:lt(4)").
.children（）；获取直接子元素；

.show()：展示；里面可以放数字，运动毫秒值；

.hide()；隐藏；里面可以放数字，运动毫秒值；

.index（）；获取当前元素的索引；（“+index+”）；变量转换

.siblings（）；获取其他兄弟元素；

opacity：透明度；

.find（）；针对当前的元素找里面一些其他的元素（直接找到）；

操作类样式：
添加：
.addClass(“cls”);在addClass方法中类样式的名字前面没有点；
多个类样式的名字中间用空格隔开；

移除：
.removeClass（“cls”），移除一个元素的类样式；
.removeClass（），为空移除所有添加的样式；

检测元素是否应用了类样式：
	.hasClass（）；有返回值：true，false；

切换类样式：.toggleClass()；
	$(function () {
		$("#btn").click(function () {
           			$("body").toggleClass("cls");//切换类样式
        			});
	}

链式编程（返回值必须是当前的对象）：
对象.方法().方法().方法()…;

获取兄弟元素的方法：
.next();获取的是当前元素的下一个兄弟元素；

.nextAll();获取的是当前元素的后面的所有的兄弟元素；

.prev();获取的是当前元素的前一个兄弟元素；

.prevAll();获取的是当前元素的前面的所有的兄弟元素；

.siblings();获取的是当前元素的所有的兄弟元素(自己除外)；

断链:对象调用方法,返回的不是当前的对象,再调用方法,调用不了;
解决断链—>恢复到断链之前的一个效果–修复断链;
.end（）：恢复到断链之前的效果；

.last（）：获取最后一个标签；也可以这样用$(“div>img:last”)；
.first（）：获取第一个标签；
.remove();移除当前调用这个方法的元素—自杀；

动画：
.hide（）方法中可以写参数:参数类型:1.数字类型,2字符串类型：
1：数字类型:1000表示的是毫秒 —1秒；
2：字符串类型: “slow” “normal” “fast”；
3：可以写回调函数；.hide（1000，function（）{}）；这个函数方法是在所有动画完成之后执行的；

.show（）方法中可以写参数:参数类型:1.数字类型,2字符串类型：
            	1：数字类型:1000表示的是毫秒  ---1秒；
            	2：字符串类型: "slow"  "normal"  "fast"；
	3：可以写回调函数；.show（1000，function（）{}）；这个函数方法是在所有动画完成之后执行的；

递归：arguments.callee相当于递归；

.slideUp（）滑入
.slideDown（）滑出
.slideToggle（）切换
	方法中都可以写参数：
        			参数:可以写数字类型  1000毫秒---1秒；
        			参数:字符串:  slow   normal  fast；

.fadeIn（）淡入
.fadeOut（）淡出
.fadeToggle（）切换
.fadeTo（）透明度变化；里面两个参数，第一个是毫秒值，第二个是透明度；

animate方法：（目标css样式，时间，回调函数）；
	参数:
            	* 1.是键值对---对象
            	* 2.时间---1000毫秒---1秒
            	* 3.匿名函数---回调函数

stop（）：停止当前的动画；

动态的创建元素：
1. $(“标签的代码”)；
$(“百度”);
2. 对象.html(“标签的代码”); 直接书写就添加；
$("#dv").html(“

这是一个p标签

”);

添加元素：
把元素添加到div中，追加到最后（剪切效果）：
$("#dv").append(Obj);
把元素添加到最前面：
$("#dv").prepend(Obj);
在当前元素的后面添加一个兄弟元素：
$("#dv").after(Obj);
在当前元素的前面添加一个兄弟元素：
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲dv").before(Obj…("#dv"));

清除元素：
//清空元素中的内容：KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲dv").html(""); …("#dv").empty();
//移除元素自身—自杀：$("#dv").remove();

克隆元素：$("#").clone();复制了一个元素；

设置和和获取表单元素value：
获取表单的值 $().val();空为获取；
设置表单元素： $().val(“内容”);
下拉列表：
获取：
$().val( );返回的value的值，如果标签里没有value值，则返回的是option包含的文本；
设置：
$().val( );根据optionn的value属性的值，选中某个option；如果没有value值，括号里直接放option包含的文本；

自定义属性：
attr可以获取并设置标签的属性和值；用来操作标签属性和值的；
attr();可以写两个参数: 属性, 属性值；Obj.attr(“href”,“http://www.itcast.cn”);
attr();只写了一个参数,获取该元素的这个属性的值；

移除自定义属性：removeAttr（“”）；
原生属性：
prop不能获取并设置标签的属性和值；
复选框：prop()可以真正的获取元素是否选中的状态；选中返回true，未选中返回false；
.prop(“checked”,false);让复选框不选，.prop(“checked”,true);让复选框选中；
.prop(“checked”);获取当前复选框的选中状态；

:checkbox :得到所有的复选框；
:checked：得到所有选中状态；

设置和获取元素的宽和高：
通过元素的css()方法可以获取元素的宽和高,但是都是字符串类型；
通过jQuery方法设置是数值类型：
$("#dv").width()；获取宽的属性值；
$("#dv").height()；获取高的属性值；
设置：参数可以是数字也可以是字符串；
$("#dv").width(width);
$("#dv").height(height);

位置操作：
获取left和top的值—>都是数字类型
//console.log(KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲dv").offset().l…("#dv").offset().top);
设置：$("#dv").offset({“left”:200,“top”:200});

滚动距离：
	获取：.scrollTop()；.scrollLeft()；
	设置：.scrollTop(xx)	；.scrollLeft(xx)；	

注册事件：
bind()方法可以为元素同时绑定多个事件；
.bind({“mouseout”:function(){}，“click”:functopn(){}?;

delegate：可以父级元素里的子元素绑定事件（为当前不存在的子元素添加事件）；
	* 参数:3个
            	* 1.要绑定事件的元素---p;
            	* 2.要绑定的事件的名字---click;
            	* 3.绑定事件的处理函数---匿名函数;
	 $("#dv").delegate("p","click",function () {})；

on：两个参数:1事件的名字,2事件处理函数；
	 $("#btn").on("click",function () {}）；
       三个参数: 1,事件的名字, 2.要绑定事件的元素--p,3事件处理函数；
	on是父级元素调用,目的:为子级元素去绑定事件；
如果元素是动态添加的,那么非常推荐用on的方式为动态添加的元素绑定事件；
	$("#dv").on("click","p",function () {}）；

解绑事件：
off：
off()参数:要解绑的事件的名字；
$("#btn1").off(“click”);

unbind：
	$("#btn1").unbind("click");

undelegate：
       		$("#dv").undelegate("p","click");//解绑；

$("#dv").off("click","**");下面的代码是把子级元素的点击事件解绑了,父级元素的点击事件还存在；

$("#dv").off();  移除父级元素和子级元素的所有的事件；

如果说父级元素和子级元素都是通过正常的方式绑定事件,如果通过off解绑的时候,父级元素的事件解绑了,子级元素的事件没有解绑；
如果子级元素是通过父级元素调用delegate的方式绑定的事件,父级元素使用off方式解绑事件,这个时候父级元素和子级元素的相同的事件都会被解绑；

事件触发：
1：$("#btn1").click();

          	2： $("#btn1").trigger("click")；

            3：$("#btn1").triggerHandler("click"); 不触发内置属性；

事件对象属性：
event.delegateTarget 谁代替元素绑定的事件；
event.currentTarget 真正是谁绑定的事件；执行事件处理函数的那个对象；
event.target 触发的事件的对象；

e.keyCode;//键盘按下后的键对应的键值；

事件冒泡: 元素中有元素,这些元素都有相同的事件,一旦最里面的元素的事件触发了,外面的所有的元素的相同的事件都会被触发；

取消事件冒泡：return false；还可以取消超链接的默认的点击事件；

each方法：
不同的元素不同的设置方式；也可以遍历数组；

jQuery对象实际就是个伪数组，其中存的元素就是js对象；

释放控制权：.noConflict();