jquery学习第一天
1.js模仿jquery的入口函数：
$(document).ready(function(){
function que(dom){
var obj={
ready:function(func){
if(typeof dom.onload == "function"){
var old=dom.onload;
dom.onload=function(){
func();
old();
}
}
else{
dom.onload=func;
}
}
}
return obj;
}
que(window).ready(function(){
alert("这是旧的调动");
});
que(window).ready(function(){
alert("这是新的调动");
})
})
2.各类选择器的表示方法与js一致，但新增一个功能，可以通过jquery获取其css属性
如：var bg=$("#id").css("background")
设置css属性:var bg=$("#id").css("background","red");
设置多个样式：
var bg=$("#id").css({
"background":"red",""font-size":"12px","color": "white"
})
自定义设置css属性：
$(document).ready(function(){
$("li").css("font-size",function(i,v){
console.log(i);
console.log(v);
return (i+1)*parseInt(v)+"px";
})
})
3.各类选择器汇总
符号
说明
用法
空格
后代选择器
选择所有的后代元素$(“div span”). css(“background”,”red”);
>
子代选择器
选择所有的子代元素$(“div > span”). css(“background”,”red”)
+
紧邻选择器
选择紧挨着的下一个元素$(“div + p”). css(“background”,”red”)
~
兄弟选择器
选择后面的所有的兄弟元素$(“div ~ p”). css(“background”,”red”)
基本过滤选择器
符号
说明
用法
:eq(index)
index是从0开始的一个数字，选择序号为index的元素。选择第一个匹配的元素。
$(“li:eq(1)”). css(“background”,”red”)
:gt(index)
Index是从0开始的一个数字，选择序号大于index的元素
$(“li:gt(2)”). css(“background”,”red”)
:lt(index)
Index是从0开始的一个数字，选择小于index的元素
$(“li:lt(2)”). css(“background”,”red”)
:odd
选择所有序号为奇数行的元素
$(“li:odd”). css(“background”,”red”)
:even
选择所有序号为偶数的元素
$(“li:even”). css(“background”,”red”)
:first
选择匹配第一个元素
$(“li:first”). css(“background”,”red”)
:last
选择匹配的最后一个元素
$(“li:last”). css(“background”,”red”)
属性选择器
符号
说明
用法
$(“a[href]”)
选择所有包含href属性的元素
$(“a[href]”). css(“background”,”red”)
$(“a[href=’itcast’]”)
选择href属性值为itcast的所有a标签
$(“a[href=’itcast’]”). css(“background”,”red”)
$(“a[href!=’baidu’]”)
选择所有href属性不等baidu的所有元素，包括没有href的元素
$(“a[href!=’baidu’]”). css(“background”,”red”)
$(“a[href^=’web’]”)
选择所有以web开头的元素
$(“a[href^=’web’]”). css(“background”,”red”)
$(“a[href$=’cn’]”)
选择所有以cn结尾的元素
$(“a[href$=’cn’]”). css(“background”,”red”)
$(“a[href*=’i’]”)
选择所有包含i这个字符的元素，可以是中英文
$(“a[href*=’i’]”). css(“background”,”red”)
$(“a[href][title=’我’]”)
选择所有符合指定属性规则的元素，都符合才会被选中。
$(“a[href][title=’我’]”). css(“background”,”red”)
4.DOM对象与jquery对象互换：
$(document).ready(function() {
// DOM对象转换成jQuery对象
/*var btn = document.getElementById("btn");
$(btn).click(function () {
$("div").hide();
});*/
// jQuery对象转换成DOM对象
/*$("button")[1].onclick = function (){
alert("jQuery对象转换成dom对象");
};*/
// 另外一个方式
$("button").get(0).onclick=function() {
alert("jQuery对象转换成dom对象");
}
// js里面的click() 方法：触发click事件
// js里面的onclick 是绑定点击事件
/*var btn = document.getElementById("btn");
btn.onclick = function () {
alert("我是btn的onclick");
};
btn.click();*/
});
