jQuery核心用法
-
$("css选择器")选出的元素是jQuery对象，而不是普通的dom对象
-
$("HTML元素")可以直接将字符串描述的html元素创建出来，构成一个jQuery对象。
-
$(document).ready(function(){…….});可以设定在页面加载完成之后执行的函数，也可以简写成$(function(){…..})；
1. 文档就绪事件
所谓的文档就绪事件, 就是在整个html文档加载完之后立即触发, 执行一些操作，格式如下：
$(document).ready(function(){
//xxxx
});
简写格式：
$(function(){
//xxxx
});
2.dom对象转jQuery对象
var dom = document.getElementById("username");
var $jQuery= $(dom ); // js对象转成jQuery对象
3.jQuery对象转dom对象
//方式一:
var dom1 = $jQuery[0]; // jQuery对象转成js对象
//方式二:
var dom2 = $jQuery.get(0); // jQuery对象转成js对象
4.基本选择器
$(document).ready(function() {
/* ---------基本选择器练习--------- */
//改变元素名为 <div> 的所有元素的背景色为 #FF69B4" id="b1"
//使用jQuery的ID选择器选中id为b1的元素，为其绑定单击事件，在单击事件中执行修改内容
$("#b1").click(function(){
$("div").css("background","#FF69B4");
});
//改变 id 为 one 的元素的背景色为 #9ACD32" id="b2"
$("#b2").click(function(){
$("#one").css("background","#9ACD32");
});
//改变 class 为 mini 的所有元素的背景色为 #FF0033" id="b3"
$("#b3").click(function(){
//$(".mini").css({background:"#FF0033",display:"none"});
});
//改变所有元素的背景色为 #FDF5E6" id="b4"
$("#b4").click(function(){
$("*").css("background","#FDF5E6");
});
//改变所有的<span>元素和 id 为 two 的元素的背景色为 #FF1493" id="b5"
$("#b5").click(function(){
$("span,#two").css("background","#FF1493");
});
//改变所有的<span>元素和 id 为 two 的,id为one的，class为 mini的所有的元素的背景色为 #006400" id="b6"
$("#b6").click(function(){
$("span,#two,#one,.mini").css("background","#006400");
});
});
5.层级选择器
$().ready(function() {
/* ---------层级选择器练习--------- */
//改变 <body> 内所有 <div> 的背景色为 #F08080" id="b1"
$("#b1").click(function(){
$("body div").css("background","#F08080");
});
//改变 <body> 内子 <div> 的背景色为 #FF0033" id="b2"
$("#b2").click(function(){
$("body>div").css("background","#FF0033");
});
//改变 id 为 one 的下一个 <div> 的背景色为 #0000FF" id="b3"
$("#b3").click(function(){
$("#one + div").css("background","#0000FF");
});
//改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 #9ACD32" id="b4"
$("#b4").click(function(){
$("#two ~ div").css("background","#9ACD32");
});
//改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #FF6347" id="b5"
$("#b5").click(function(){
$("#two").siblings("div").css("background","#FF6347");
});
})
6.基本过滤选择器
$(function() {
/* ---------基本过滤选择器练习--------- */
//改变第一个 div 元素的背景色为 #FF6347" id="b1"
$("#b1").click(function(){
$("div:first").css("background","#FF6347");
});
//改变最后一个 div 元素的背景色为 #9ACD32" id="b2"
$("#b2").click(function(){
$("div:last").css("background","#9ACD32");
});
//改变class不为 one 的所有 div 元素的背景色为 #FF0033" id="b3"
$("#b3").click(function(){
$("div:not(.one)").css("background","#FF0033");
});
//改变索引值为等于 3 的 div 元素的背景色为 #006400" id="b4"
$("#b4").click(function(){
$("div:eq(3)").css("background","#006400");
});
//改变索引值为小于 3 的 div 元素的背景色为 #FF69B4" id="b5"/>
$("#b5").click(function(){
$("div:lt(3)").css("background","#FF69B4");
});
//改变索引值为大于 3 的 div 元素的背景色为 #F08080" id="b6"
$("#b6").click(function(){
$("div:gt(3)").css("background","#F08080");
});
//改变索引值为偶数的 div 元素的背景色为 #FF6347" id="b7"
$("#b7").click(function(){
$("div:even").css("background","#FF6347");
});
//改变索引值为奇数的 div 元素的背景色为 #FF1493" id="b8"
$("#b8").click(function(){
$("div:odd").css("background","#FF1493");
});
});
7.内容选择器、可见 选择器
$(function() {
/* ---------内容选择器--------- */
//改变含有文本 ‘id’ 的 div 元素的背景色为 #FF6347" id="b1" <div>xxidxx</div>
$("#b1").click(function(){
$("div:contains('id')").css("background","#FF6347");
});
//改变空元素div(既不包含文本也不包含子元素)的背景色为 #9ACD32" id="b2"
$("#b2").click(function(){
$("div:empty").css("background","#9ACD32");
});
//改变包含div子元素的div元素的背景色为 #FF0033" id="b3"
$("#b3").click(function(){
$("div:has(div)").css("background","#FF0033");
});
//改变非空div元素的背景色为 #006400" id="b4"
$("#b4").click(function(){
$("div:parent").css("background","#006400");
});
//====================================================
/* ---------可见选择器练习--------- */
//改变所有可见 div 元素背景色为 #F08080" id="b5"
$("#b5").click(function(){
$("div:visible").css("background","#F08080");
});
//让所有隐藏的div元素显示, 并改变背景色为 #FF69B4" id="b6"
$("#b6").click(function(){
$("div:hidden").css("display","block").css("background","#FF69B4");
});
})
8.属性选择器、子元素选择器
$(function() {
/* ---------属性选择器练习--------- */
//改变包含id属性的 div 元素的背景色为 #FF6347" id="b1"
$("#b1").click(function(){
$("div[id]").css("background","#FF6347");
});
//改变包含属性title='aa' 的div 元素的背景色为 #9ACD32" id="b2"
$("#b2").click(function(){
$("div[title='aa']").css("background","#9ACD32");
});
//改变type属性不等于button的input 元素的背景色为 #FF0033" id="b3"
$("#b3").click(function(){
$("input[type!='button']").css("background","#FF0033");
});
//=================================================
/* ---------子元素选择器练习--------- */
//改变div 第二个子元素的背景色为 #006400" id="b4"
$("#b4").click(function(){
$("div:nth-child(2)").css("background","#006400");
});
//改变div 第一个子元素的背景色为 #FF69B4" id="b5"
$("#b5").click(function(){
$("div:first-child").css("background","#FF69B4");
});
})
9.表单选择器
$(function() {
/* ---------表单选择器练习--------- */
//改变所有:input 元素的背景色为 #F08080" id="b1"
$("#b1").click(function(){
$(":input").css("background","#F08080");
});
//改变:password 元素的背景色为 #9ACD32" id="b2"
$("#b2").click(function(){
$(":password").css("background","#9ACD32");
});
//弹出 :radio 元素的个数" id="b3"
$("#b3").click(function(){
//length获取当前元素的长度
alert($(":radio").length);
});
//弹出所有 :checked 元素的value值" id="b4"
$("#b4").click(function(){
//each()将当前对象当中所有的元素，逐个取出进行操作。
$(":checked").each(function(){
//val()是jQuery的value取值方式
alert($(this).val());
})
});
//弹出所有 :selected 元素的value值" id="b5"
$("#b5").click(function(){
$(":selected").each(function(){
alert($(this).val());
});
});
})
1319
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
