jQuery基础及选择器

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

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

DOM对象与jQuery对象相互转换：
1、var one=document.getElementById(‘one’);
var one4=$(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$=’.jpg’]" )选取href属性值以.jpg结尾的元素
3、[attribute*=value] 选取给定属性是以包含某些值的元素
$(" [href* =‘txt’]" )选取href属性值中含有txt的元素

示例：
1、$("a[id]").css("color","red");//所有设置id的超链接2、$(“a[id=‘one’]”).css(“font-size”,“30px”);//所有id=one的超链接
3、$("a[id!{=}^{\prime }on{e}^{\prime }]").css("font-size","20px");//所有id不等于one的元素4、$(“a[id^=‘t’]”).css(“font-weight”,“bold”);//所有id以t开头的元素
5、$("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的

• 元素
  2、:gt(index) 选取索引大于index的元素（index从0开始）
  $(" li:gt(1)" )选取索引大于1的
• 元素（注：大于1，不包括1）
  3、:lt(index) 选取索引小于index的元素（index从0开始）
  $(“li:lt(1)” )选取索引小于1的
• 元素（注：小于1，不包括1）
  4、:header 选取所有标题元素，如h1~h6
  $(":header" )选取网页中所有标题元素
  5、:focus 选取当前获取焦点的元素
  $(":focus" )选取当前获取焦点的元素
  :animated 选择所有动画 $(":animated" )选取当前所有动画元素
  可见性过滤选择器
  1、:visible 选取所有可见的元素
  $(":visible" )选取所有可见的元素
  2、:hidden 选取所有隐藏的元素
  $(":hidden" ) 选取所有隐藏的元素
  筛选选择器
  1、children(selector) $(“ul”).children(“li”)
  相当于子类选择器
  2、 find(selector) $(“ul”).find(“li”)
  相当于后代选择器
  3、siblings(selector) $("#first").siblings(“li”)
  查找兄弟节点，不包括自身
  4、parent() $("#first").parent()
  查找父亲
  5、eq(index) $(“li”).eq(2)
  和过滤选择器一样，所有，并不需要同代
  6、next() $(“li”).next()
  找下一个兄弟
  7、prev() $(“li”). prev()
  找上一个兄弟