jquery笔记

( html和css不区分大小写, 但建议全部小写. javascript区分大小写 )

1.dom对象和jquery对象

​ 用dom方法获取的对象为dom对象：

var div = document.querySelector("div");

​ 用jquery方法获取的对象为jquery对象：$(“div”);

2.dom对象和jquery对象转换方法

​ dom对象转换为jquery对象：

var mydiv = document.querySelector("div"); 
$(mydiv); 

​ jquery对象转换为dom对象：$("div");
​ 方法一：$("div")[0];
​ 方法二：$("div").get(0);

3.隐式迭代

​ jquery给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们获取元素再进行循环，简化我们的操作。

4.jquery筛选选择器

​ $("div:first"), $("div:last"), $("div:even"), $("div:odd")等等

5.jquery筛选方法（遍历元素）

$("div").parent()              //       查找父级元素      
$("div").parents()             //  查找被选元素的所有祖先元素 ，()中可加筛选条件   
$("div").children()            //   查找子级元素(亲儿子)     
$("div").find()                //  查找所有后代元素,包括孙子代 
$("div").siblings()            //    查找出自己外的所有亲兄弟元素     
$("div").prev() 			  //	查找上一个兄弟元素
$("div").next()               //     查找下一个兄弟元素
$("div").eq()                  //       查找第n个元素，索引号从0开始 
$("div").filter(".aaa")        //        返回带有.aaa类的div 
$("div").hasClass()            //     检查当前元素是否含有某个类，如果有，返回true 

6.排他思想

​ 只留下自己，干掉所有人。

$(this).show().siblings().hide()

7.jquery样式操作

​ 添加单个属性

$("div").css("backgroundColor","pink");

​ 添加多个属性

$("div").css({
	height: 300,
	width: 300,
	backgroundColor: "pink"
})

​ 获取样式的值

$("div").css("color");

​ 样式类操作

$("div").addClass()
$("div").removeClass()
$("div").toggleClass()
/*   addClass() 和 className() 的区别：className("test")会覆盖原有的类  */

8.jQuery效果

/*  显示/隐藏/切换：*/
$("div").show([speed],[callback])  
$("div").hide()
$("div").toggle()

/* 下滑/上划/切换：  */
$("div").slideDown()
$("div").slideUp()
$("div").slideToggle()

/* 淡入/淡出/切换:  */
$("div").fadeIn()
$("div").fadeOut()
$("div").fadeToggle()
$('div').fadeTo()

// 事件切换 hover 鼠标经过和离开的复合写法,第一个参数为鼠标经过时触发，第二个参数为鼠标离开时触发，当只有一个函数时 鼠标经过和离开都执行这个函数
$('div').hover(function(){},function(){})

/* stop(): 停止动画，结束上一个动画	*/
/* 自定义动画: params 动画的行为, speed 动画的时间, callback 回调函数 */
animate(params,[speed],[callback]):  

9.jQuery属性操作

​ text(): 设置或返回所选元素的文本内容
​ html(): 设置或返回所选元素的内容(包括html标记)
​ val(): 设置或返回表单字段的值
​ prop(): 获取/设置元素固有属性
​ attr(): 获取/设置元素属性

10.jQuery元素操作

​ 创建元素：直接创建 $("<div></div>")
​ 添加元素：
​ 在元素内部添加：append(), prepend() 在当前元素内部的最后或最前添加元素

// 创建一个A元素并用text()为其添加文本内容，并将A元素插入到B元素内部的最后
//方法一：
$("A").text("给创建的A元素添加的文本").appendTo("B");
//方法二：
$("B").append($("A").text("给创建的A元素添加的文本"));

​ 在元素外部添加：after(), before() 在当前元素的前面或后面添加元素
​ clone() : 克隆节点 返回新的元素
​ 删除元素：
​ remove(): 删除元素(包括其子元素)
​ empty(): 删除元素内的子元素
​ 遍历元素： each(function(index,arr){}) ， 主要用于遍历对象
​ $.each(ele,function(index,arr){}) ， 主要用于遍历数据。

11.jQuery尺寸

​ width(), innerWidth() 包含内边距, outerWidth() 包含内边距和边框
​ height(), innerHeight()包含内边距, outerHeight() 包含内边距和边框
​ 返回值没有单位

遍历方法

//each()方法：遍历对象，为同一类元素做不同的操作
$("div").each(function(index,element){
	// index为数组索引值   element为当前元素(dom对象)
})
// 遍历数据（数组,对象）
$.each(objct,function(){})

常用事件

scroll() 滚动监听事件, 适用于所有可滚动的元素和 window 对象（浏览器窗口）

// 当浏览器滚动的距离超过800像素时  淡入div  否则淡出div
$(window).scroll(function(){
    if($(window).scrollTop() >= 800) {
        $("div").fideIn();
    }else {
        $("div").fideOut();
    }
})

focus(): 获取焦点事件 blur(): 失去焦点事件 val()方法获取表单元素的value值

// focus(): 获取焦点事件  val()方法获取表单元素的value值
$("input").focus(function(){
    if($(this).val() == "默认文本") {
        $(this).val() = '';
    }	
});
// blur(): 失去焦点事件
$("input").blur(function(){
    if($(this).val() == "") {
        $(this).val() = '默认文本';
    }
})