jQuery学习笔记（一）

JQuery作为javascript的库，可以大大简化原生js的操作，通过jQuery方式获得的对象本质是以伪数组存储的DOM对象
自带隐式迭代
jQuery的入口函数：

$(function(){})

1.jQuery与DOM对象的互转：

//DOM转化为jQuery对象：$(DOM对象)
$('div')  //获取所有div
//jQuery转为DOM对象
$('div')[index]
$('div').get(index)

2.jQuery获取元素操作：
1.通过层级选择器，基础选择器

$('div>ul') //获取div的下一级ul节点

2.筛选选择器：

$('ul li:first') //选出ul下的第一个li
$('ul li:last') //选出ul下的最后一个li
$('ul li:eq(2)')//选出ul下下标为2的li，下标从0开始
$('ul li:even')//选出ul下下标为奇数的li
$('ul li:odd')//选出ul下下标为偶数的li
$(':checked')//选出所有被选中的复选框，单选框....

3.筛选方法

$('ul li').parent() //选出li的父节点ul
$('ul').children('li')  //选出ul下名为li的子节点
$('ul').find('li')  //选出ul下名为li的子孙节点
$('ul li:first').sublings('li')//选出ul下除了第一个li外的所有兄弟节点
$('ul li').eq(2)//选出ul下名为li的下标为2的节点

2.jQuery修改样式
1.通过css方法直接添加样式

$("div").css("属性名","属性值")	//修改单个样式
$("div").css({"属性名1","属性值1",
				"属性名2","属性值2"})//修改多个样式

2.设置类样式

$('div').addClass("back")//将div添加类，无需.
$("div").removeClass("back")//删除back类
$("div").toggleClass("back")//对于添加和移除back类进行切换

3.jQuery添加出现隐藏
1.自带动画

$('div').show([speed][easing][fun])//让div出现
$('div').hide([speed][easing][fun])//让div隐藏
$("div").toggle([speed][easing][fun])//切换div出现隐藏状态

$('div').slideUp([speed][easing][fun])//让div滑动出现
$('div').slideDown([speed][easing][fun])//让div滑动隐藏
$("div").slideToggle([speed][easing][fun])//切换div出现隐藏状态

$('div').fadeIn([speed][easing][fun])//让div淡入
$('div').fadeOut([speed][easing][fun])//让div淡出
$("div").fadeToggle([speed][easing][fun])//切换div出现隐藏状态

.stop()停止上一次动画

2.自定义动画

 $(".blue").animate({"height": "300px"},[speed][easing][fun]))

4.jQuery的事件切换

$('div').hover(function(){},function(){})//当鼠标经过div时进行函数切换

5.jQuery属性操作
1.关于元素固有属性如img标签的src属性

$("textarea").prop("value")//获取textarea里的内容
$("textarea").prop("value"，"hehe")//将textarea里的内容改为hehe

2.设置获取元素的自定义属性

$('div').attr("属性")		//获取
$('div').attr("属性","属性值") //设置

3.获取元素的内容

$('p').html(["这是一串字符串"]) //当参数为空时仅获取p标签内容，不为空时将该内容设置为字符串内容
$("input").val() //获取表单元素值