jQuery笔记

入口函数

 $(function(){
 函数体
 })；
 $(document).ready(function(){
 函数体
 })；

jQuery对象与DOM对象

$是jQuery的顶级对象，相当于原生js中的Window，元素利用其包装成jQuery对象，就可以调用jQuery的方法

• DOM对象转换为jQuery对象：$(DOM对象)
• jQuery对象转换为DOM对象：$(DOM对象)[index]或 $(DOM对象)get(index)

jQuery选择器

//1.id选择器
$("#box").html();
//2.类选择器
$(".box").html();
//3.标签选择器
$("div").html();   //直接给标签名
//4.多元素选择器
$("#box,.box,div").html();  // 几种选择器组合
//5.后代选择器
$("#box p").html()  // 用空格隔开
//6.子元素选择器
$("#box > p").html() ; // 用>隔开
//7.伪类选择器
$("p:nth-child(2)").css("background-color"))
//8.属性选择器
$("input[value=men]") ; //找 value=men的input元素
$("input[value*=men]") ; //找 value里面包含men的input元素
$("input[value^=men]") ; //找 value里面以men开头的input元素
$("input[value$=men]") ; //找 value里面以men结尾的input元素

jQuery过滤器

  //selector:first  获取所有已选择到的元素中的第一个元素
  $("li:first")
  //selector:last   获取所有已选择到的元素中的最后一个元素
  $("li:last")
  //selector:even    获取所有已选择到的元素中的索引为偶数的元素
  $("li:even")
  //selector:odd     获取所有已选择到的元素中的索引为奇数的元素
  $("li:odd")
  //selector:eq(index) 获取所有已选择到的元素中的索引为index的元素 
  $("li:eq(index)") 

jQuery筛选方法

//查找最近一级父级
$("ul").parent()
//查找最近一级儿子,相当于子代选择器
$("ul").children("li")
//后代选择器，查找所有子孙后代
$("ul").find("li")
//查找除自身外的兄弟节点
$("ul").siblings("li")
//用于选择第n个元素:eq(n)
$("ul li:eq(2)").css("color","blue");
$("ul li").eq(2).css("color","blue");

jQuery内容文本值

//主要针对元素的内容还有表但的值操作
//普通元素内容
$(selector).html();//获取元素内容
$(selector).html("内容");//设置元素内容
//普通元素文本内容：text()
//获取/设置表单的值：val()

jQuery样式操作

//操作css方法
$(selector).css("属性名");//返回属性值
$(selector).css("属性名","属性值");
//设置多组样式
$(selector).css({"属性1":"属性值","属性2":"属性值"});
$(selector).css({
	属性1:"属性值",
	属性2:"属性值",
	});
//设置类样式方法
//添加类
$(selector).addClass('class值');
//移出类
$(selector).removeClass('class值');
//切换类
$(selector).toggleClass('class值')；

jQuery属性操作

//获取元素固有属性值
$(selector).prop('属性名');
//设置元素固有属性值
$(selector).prop('属性名','属性值');
//获取元素自定义属性值
$(selector).attr('属性名');
//设置元素自定义属性值
$(selector).attr('属性名','属性值');
//数据缓存，用于在指定元素上存取数据，并不会修改DOM元素结构，页面刷新，所存放的数据将被移除
$(selector).data('数据名');
$(selector).data('数据名','数据值');

jQuery元素操作

//遍历元素，为每个匹配元素规定运行的函数
$(selector).each(function(index,element){函数体});//index为选择器的位置element为当前的元素
$.each($(selector),function(index,element){函数体});
//创造元素
$("<li></li>")
//添加元素
//内部添加
$(selector).append($("<li></li>"));//把元素放在匹配元素内部最后面
$(selector).prepend($("<li></li>"));//把元素放在匹配元素内部最前面
//外部添加
$(selector).before($("<li></li>"));//把元素放在匹配元素之前
$(selector).after($("<li></li>"));//把元素放在匹配元素之后
//删除元素
$(selector).remove();//删除自身
$(selector).empty();//删除子节点

jQuery事件处理

//绑定事件，绑定一个或多个事件
//$(selector).on(events,[selector2],function) selector2为子选择器
$("div").on({
	mouseover:function(){},
	click:function(){},
});
//$(selector).事件(function)
$("div").click(function(){})
//解绑事件
$(selector).off();//解绑所有事件
$(selector).off(events);//解绑指定事件
$(selector).off(events,[selector2]);//解绑委托事件