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>