jQuery基础知识

   <span style="font-size:18px;">							jQuery

一、	代码风格

$(function(){})				//执行一个匿名函数
$("#box")     			//进行执行的ID元素选择
$("#box").css(“color”,”red”)  //执行功能函数
合起来
$(function(){
$("#box").css(“color”,”red”)
})；

返回jQuery对象

$()                  
$("#box")  
$("#box").css("","")
$("#box").css("","").css("","")....

二、加载模式

jQuery：$(document).redy(function(){})（只需等待DOM加载完） 
优点： 效率高   不覆盖   
简写：$(function(){})  ;
JavaScript：window.onload()  全部加载完后（包括大图片等）

三、对象互换

jQuery对象和DOM对象可以互换
$("#box").get(0)  可以返回原生对象  相当于document.getElementById("box")的功能


四、多个库之间的冲突

jQuery库在base库之前引用，$所有权属于base
使用的jQuery方法：
1、把$写成jQuery.
2、var $$ = jQuery，以后用$$代替$.

jQuery库在base库之后引用，$所有权属于jQuery
jQuery.noConfict()   //自行了断，把自己的$所有权删除，让给其他库

五、常规选择器

1》、简单选择器

1、css的写法：  #box{color:red}   //添加一个样式
2、jQuery的写法：  $（function（）{
    $（“#box”）.css("color","red") ；   //添加一个行为，这个行为叫做样式
}）

id只有一个，多个，jQuery值辨别第一个，css三个都可以 （但严格意义上来说不可以定义多个相同的id值）


容错功能：
if($（“#box”）.size()>0){  ……}
if($（“#box”）.get()){  ……}
if($（“#box”）[0]) {  ……}

2》、进阶选择器

 群组选择器
   1、css的写法：   #div,.p,strong{}
   2、jQuery的写法：  $(function(){    $("#div,.p,strong").css(…)}

 后代选择器
   1、css的写法：ul li a{clolr:red;}
   2、jQuery的写法：$(function(){    $("ul li a").css(…)}

 通配选择器
   1、css的写法：*{color：red}
   2、jQuery的写法：$(function(){    $("*").css(..)}
在全局下使用*，会浪费资源，效率低
   $(function(){    $("ul li *").css()}   在局部时使用

<div class = "box pox"></div>
 1、.box.pox{}       			 多class选择器 
注意区别：   .box,.pox{}     群组选择器
 2、$(function(){    $(".box.pox").css()}


三、高级选择器


后代选择器:子节点、孙节点、、、（后代）
   jQuery的写法：
1、$(function(){    $("ul li a").css()}
  2、$(function(){    $("ul li").find(p).css()}


子选择器   所有子节点
css的写法：   #box >p{   }

jQuery的写法：
1、$(function(){    $("#box >p").css()}
2、$(function(){    $("#box").children("p").css()}

next选择器  :同级的下一个节点（若无指定节点，则无反应）
    css的写法：  #box +p{   }

 	jQuery的写法：
 	1、$(function(){    $("#box +p").css()}
    2、$(function(){    $("#box").next("p").css()}


nextAll选择器：同级的所有节点
    css的写法：    #box ~p{   }

  	jQuery的写法：
    1、$(function(){    $("#box ~p").css()}
    2、$(function(){    $("#box").nextAll("p").css()}


若在方法find（）、children()、next()、nextAll()中没有传参，则默认是通配符*


prev：同级的上一个节点
$(function(){    $("#box").prev("p").css()}
prevAll：同级的suoyou节点
$(function(){    $("#box").prevAll("p").css()}

siblings：上下同级的所有节点
$(function(){    $("#box").siblings("p").css()}
siblings 的功能作用相等于：
$(function(){    $("#box").next("p").css()}   
$(function(){    $("#box").prev("p").css()}
这两句话
注意：这时不能见血为：$(function(){    $("#box").prev("p").next("p").css()}  //错误形式

nextUntil：同级下非指定元素选定，遇到则停止
$(function(){    $("#box").nextUntil("p").css()}
prevUntil：同级上非指定元素选定，遇到则停止
$(function(){    $("#box").prevUntil("p").css()}



   

$(function(){    $("#box p").css()}==   $(function(){    $("p","#dox").css()}


$(function(){    $("ul li").find(p).css()}    速度最快
$(function(){    $("p","#dox").css()}
$(function(){    $("#box").children("p").css()}
$(function(){    $("#box p").css()}




属性选择器

$(function(){    $("a[title]").css()}   只要有属性title就行了

$(function(){    $("a[title= num1]").css()}   只要有属性title，且title = num1就行了

$(function(){    $("a[title^= num]").css()}   只要有属性title且title的值以num开头就行了

$(function(){    $("a[title$= num]").css()}   只要有属性title且title的值以num结尾就行了

$(function(){    $("a[title|= num]").css()}   只要有属性title且title = num或“num-”开头的就行了

$(function(){    $("a[title！= num1]").css()}   只要有属性title且title ！= num1就行了

$(function(){    $("a[title~= num1]").css()}   只要有属性title 且title值等于以空格分割的列表的其中一个值就行了

$(function(){    $("a[title*= num1]").css()}   只要有属性title 且title的值中包含指定值num1就行了

$(function(){    $("a[class][title]").css()}   只要有属性title 且含有其他指定属性如class就行了

</span>