<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>
jQuery基础知识
最新推荐文章于 2023-05-31 08:33:36 发布