jQuery基础及选择器

jQuery基础
jQuery能做什么及优势
作用：
访问和操作DOM元素
控制页面样式
对页面事件进行处理
扩展新的jQuery插件
与Ajax技术完美结合

优势：
体积小，压缩后只有100KB左右
强大的选择器
出色的DOM封装
可靠的事件处理机制
出色的浏览器兼容性
使用隐式迭代简化编程
丰富的插件支持
基本语法结构
基本语法：
1、$(document).ready(function(){}）； 2、$(document).ready(function()）；2、(function(){}）；

DOM对象与jQuery对象相互转换：
1、var one=document.getElementById(‘one’);
var one4=$(one);//DOM转jq对象 2、var one1=$(one);//DOM转jq对象2、varone1=("#one");
var one2=one1[0];//jq对象转DOM对象
var one3=one1.get(0);//jq对象转DOM对象
基本方法
addClass( )方法：
语法：jQuery 对象.addClass([样式名]);
和js中的classname类似

css( )方法：
语法：
1、css(“属性”,“属性值”) ;
2、css({“属性1”:“属性值1”,“属性2”:“属性值2”…}) ;
3、css(“属性”,“属性值”) .css(“属性”,“属性值”) ;（链式）
示例：
$(this).css({“background”:"#f00"});
$("#one").css(“font-size”,“20px”).css(“font-style”,“italic”);
$("#one").css({“font-family”:“楷体”});
$("#one").css({“color”:"#00f",“font-weight”:“bold”});
设置元素的隐藏和显示：
$(selector).show( );
$(selector).hide( );
jQuery选择器
基本选择器
1、标签选择器 element 根据给定的标签名匹配元素 $(“h2” )选取所有h2元素
2、类选择器 .class 根据给定的class匹配元素 $(" .title")选取所有class为title的元素
3、ID选择器 #id 根据给定的id匹配元素 $(" #title")选取id为title的元素
4、并集选择器 selector1,selector2,…,selectorN 将每一个选择器匹配的元素合并后一起返回 $(“div,p,.title” )选取所有div、p和拥有class为title的元素
5、全局选择器 * 匹配所有元素 $("*" )选取所有元素
层次选择器
1、后代选择器 ancestor descendant 选取ancestor元素里的所有descendant（后代）元素 $("#menu span" )选取#menu下的元素
2、子选择器 parent>child 选取parent元素下的child（子）元素 $(" #menu>span" )选取#menu的子元素
3、相邻元素选择器 prev+next 选取紧邻prev元素之后的next元素 $(" h2+dl " )选取紧邻<h2元素之后的同辈元素<dl
4、同辈元素选择器 prev~sibings 选取prev元素之后的所有siblings元素 $(" h2~dl " )选取<h2元素之后所有的同辈元素<dl

示例：
// $("#one p").css(“font-size”,“30px”);//后代
// $("#one>p").css(“font-size”,“30px”);//子代
// $("#two+p").css(“font-size”,“30px”);//相邻兄弟
// $("#two~p").css(“font-size”,“50px”);//同辈
属性选择器
1、[attribute^=value] 选取给定属性是以某些特定值开始的元素
KaTeX parse error: Double superscript at position 11: (" [href^='̲en']" )选取href属性…=value] 选取给定属性是以某些特定值结尾的元素
$(" [href$("[href=’.jpg’]" )选取href属性值以.jpg结尾的元素
3、[attribute*=value] 选取给定属性是以包含某些值的元素
$(" [href* =‘txt’]" )选取href属性值中含有txt的元素

示例：
1、$("a[id]").css("color","red");//所有设置id的超链接 2、$("a[id]").css("color","red");//所有设置id的超链接2、(“a[id=‘one’]”).css(“font-size”,“30px”);//所有id=one的超链接
3、$("a[id!='one']").css("font-size","20px");//所有id不等于one的元素 4、$("a[id!=′one′]").css("font−size","20px");//所有id不等于one的元素4、(“a[id^=‘t’]”).css(“font-weight”,“bold”);//所有id以t开头的元素
5、$("a[id$("a[id=‘e’]").css(“font-size”,“40px”);//所有id以e结尾的元素
6、$(“a[id*=‘o’]”).css(“font-size”,“50px”);//所有id中还有o的元素
过滤选择器
基本过滤选择器
1、:eq(index) 选取索引等于index的元素（index从0开始）
$(“li:eq(1)” )选取索引等于1的