一:简介
jQuery是免费、开源的。jQuery已经成为最流行的javascript库。 jQuery能够使用户的html页面保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需要定义id即可。
二:基本语法
<script type="text/javascript"> //js 执行时,有加载顺序 /* jQuery获得数据 * * 语法:$("选择器") == jQuery("选择器") * */ var username = $("#username"); // * val()函数 用于获得 value属性的值 alert(username.val()); </script>
三:JQuery与DOM对象的转换
<script type="text/javascript"> //1 使用javascript获得value值 var username = document.getElementById("username"); //alert(username.value); //2 将 dom对象转换 jQuery对象 // * 语法:$(dom对象) // * 建议:jQuery对象变量名,建议为$开头 var $username = $(username); // alert($username.val()); //3 将 jQuery对象转换 dom对象 //3.1 jQuery对象内部使用【数组】存放所有的数据,可以数组的下标获取(索引) var username2 =$username[0]; alert(username2.value); //3.2 jQuery提供函数 get() 转换成dom对象 var username3 =$username.get(0); alert(username3.value); </script>
三:选择器
3.1 基本选择器
<script type="text/javascript"> $(document).ready(function(){ }); // 这这个就是加载页面 类似于window.onlad // <input type="button" value="选择 id为 one 的元素." id="btn1"/> $(document).ready(function() { $("#btn1").click(function() { $("#one").css("background-color","#ff0"); }); // <input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/> $("#btn2").click(function(){ $(".mini").css("background-color","#ff0"); }); // <input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/> $("#btn3").click(function(){ $("div").css("background-color","#ff0"); }); //// <input type="button" value="选择 所有的元素." id="btn4"/> $("#btn4").click(function(){ $("*").css("background-color","#ff0"); }); // <input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/> $("#btn5").click(function(){ $("span,#two").css("background-color","#ff0"); }); }); </script>
3.2层级
<script type="text/javascript"> $(document).ready(function(){ //<input type="button" value="选择 body内的所有div元素." id="btn1"/> $("#btn1").click(function(){ $("body div").css("background-color","red"); // div元素里的也算 }); // <input type="button" value="在body内,选择子元素是div的。" id="btn2"/> $("#btn2").click(function(){ $("body>div").css("background-color","red"); // 只算div元素 }); // <input type="button" value="选择 id为one 的下一个div元素." id="btn3"/> $("#btn3").click(function(){ $("#one+div").css("background-color","red"); }); // <input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/> $("#btn4").click(function(){ $("#two~div").css("background-color","red"); }); // <input type="button" value="选择 id为two的元素的所有div兄弟元素." id="btn5"/> // 要用到筛选 $("#btn5").click(function(){ $("#two").siblings("div").css("background-color","red"); }); }); </script>
3.3基本过滤
<script type="text/javascript"> $(document).ready(function(){ //<input type="button" value="选择第一个div元素." id="btn1"/> $("#btn1").click(function(){ $("div:first").css("background-color","red"); }); //<input type="button" value="选择最后一个div元素." id="btn2"/> $("#btn2").click(function(){ $("div:last").css("background-color","red"); }); //<input type="button" value="选择class不为one的 所有div元素." id="btn3"/> $("#btn3").click(function(){ $("div:not('.one')").css("background-color","red"); }); //<input type="button" value="选择索引值为偶数 的div元素." id="btn4"/> $("#btn4").click(function(){ $("div:even()").css("background-color","red"); }); //<input type="button" value="选择索引值为奇数 的div元素." id="btn5"/> $("#btn5").click(function(){ $("div:odd()").css("background-color","red"); }); //<input type="button" value="选择索引值等于3的元素." id="btn6"/> $("#btn6").click(function(){ $("div:eq(3)").css("background-color","red"); }); //<input type="button" value="选择索引值大于3的元素." id="btn7"/> $("#btn7").click(function(){ $("div:gt(3)").css("background-color","red"); }); //<input type="button" value="选择索引值小于3的元素." id="btn8"/> $("#btn8").click(function(){ $("div:lt(3)").css("background-color","red"); }); //<input type="button" value="选择所有的标题元素." id="btn9"/> $("#btn9").click(function(){ $(":header").css("background-color","red"); }); //<input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/> $("#btn10").click(function(){ $(":animated").css("background-color","red"); }); //<input type="text" value="请输入账号" defaultValue="请输入账号" /> //<input type="text" value="请输入密码" defaultValue="请输入密码"/> // 实现功能 $("input[type='text']").on("blur focus",function(){ // 获得帐号密码的文本框 // 现获取默认值 var mr = $(this).attr("defaultValue"); // 判断是否是获取到焦点, if($(this).is(":focus")) { // 如果为空则进行默认值 if($(this).val() ==mr) { $(this).val(""); $(this).css("color","#000"); } } else // 若不是 { // 如果不为空,则不进行清空 if($(this).val() == "") { $(this).val(mr); $(this).css("color","#999"); } } // 在html5中 , 一句话就搞定 // 在119行 placeholder }); }); </script>
3.4内容过滤
<script type="text/javascript"> $(document).ready(function(){ // <input type="button" value="选取含有文本“di”的div元素." id="btn1"/> $("#btn1").click(function(){ $("div:contains('di')").css("background-color","red"); }); // <input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn2"/> $("#btn2").click(function(){ $("div:empty").css("background-color","red"); }); // <input type="button" value="选取含有class为mini元素 的div元素." id="btn3"/> $("#btn3").click(function(){ $("div:has('.mini')").css("background-color","red"); }); //<input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn4"/> // 意思就是自己是父元素,里面包含别的 $("#btn4").click(function(){ $("div:parent").css("background-color","red"); }); }); </script>
3.5可见性过滤(★)
<script type="text/javascript"> $(document).ready(function(){ // <input type="button" value=" 选取所有可见的div元素" id="b1"/> $("#b1").click(function(){ $("div:visible").css("background-color","red"); }); // <input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来" id="b2"/> $("#b2").click(function(){ $("div:hidden").css("background-color","red").show(1000); });// 显示出来 // <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b3"/> $("#b3").click(function(){ $("input:hidden").each(function(){ alert($(this).val() ); }); }); // <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b4"/> $("#b4").click(function(){ $("input:hidden").each(function(){ alert($(this).val() ); }); }); }); </script>
3.6属性选择器
<script type="text/javascript"> $(document).ready(function(){ // <input type="button" value="选取含有 属性title 的div元素." id="btn1"/> $("#btn1").click(function(){ $("div[title]").css("background","red"); }); // <input type="button" value="选取 属性title值等于“test”的div元素." id="btn2"/> $("#btn2").click(function(){ $("div[title='test']").css("background","red"); }); // <input type="button" value="选取 属性title值不等于“test”的div元素(没有属性title的也将被选中)." id="btn3"/> $("#btn3").click(function(){ $("div[title!='test']").css("background","red"); }); // <input type="button" value="选取 属性title值 以“te”开始 的div元素." id="btn4"/> $("#btn4").click(function(){ $("div[title^='te']").css("background","red"); }); // <input type="button" value="选取 属性title值 以“est”结束 的div元素." id="btn5"/> $("#btn5").click(function(){ $("div[title$='est']").css("background","red"); }); // <input type="button" value="选取 属性title值 含有“es”的div元素." id="btn6"/> $("#btn6").click(function(){ $("div[title*='es']").css("background","red"); }); // <input type="button" value="组合属性选择器,首先选取有属性id的div元素,然后在结果中 选取属性title值 含有“es”的元素." id="btn7"/> $("#btn7").click(function(){ $("div[id][title*='es']").css("background","red"); }); }); </script>
3.7子元素过滤
<script type="text/javascript"> $(document).ready(function(){ // <input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/> $("#btn1").click(function(){ // 在div加元素后,一定加空格 否则不可以实现 // 不加空格就是本身div的样式; $("div[class='one'] :nth-child(2)").css("background-color","red"); }); // <input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/> $("#btn2").click(function(){ $("div[class='one'] :first-child").css("background-color","red"); }); // <input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/> $("#btn3").click(function(){ $("div[class='one'] :last-child").css("background-color","red"); }); // <input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素,那么选中这个子元素." id="btn4"/> $("#btn4").click(function(){ $("div[class='one'] :only-child").css("background-color","red"); }); }); </script>
3.8 表单对象属性过滤
<script type="text/javascript">
$(document).ready(function(){
// <button id="btn1">对表单内 可用input 赋值操作.</button>
$("#btn1").click(function(){
$("input:enabled").val("aaa");
});
// <button id="btn2">对表单内 不可用input 赋值操作.</button>
$("#btn2").click(function(){
$("input:disabled").val("assss");
});
// <button id="btn3">获取多选框选中的个数.</button>
$("#btn3").click(function(){
var s11 = $("[name='newsletter']").length; // 获得总共的单选框个数
var s1 = $("[name='newsletter']:checked").length; // 标识选中的个数;
alert(s1);
});
// <button id="btn4">获取下拉框选中的内容.</button>
$("#btn4").click(function(){
$(":selected").each(function(){
$(this).val();
// 添加到selectDivId div中
// 若没有val值,则会取出text值;
// html标签是获得内容
$("#selectDivId").append($(this).html());
});
});
});
</script>