本文采用案例驱动的方式讲解jquery基础入门知识
（1）jquery实现首页变换效果
1.1 简介
jquery是一个优秀的JavaScript库，它对于js进行了封装，简化了操作，简化了JS的代码编写，将页面与JS分离
1.2 与html的整合
jquery是一个单独的js文件，推荐使用1.11版本，通过script标签的src属性导入 <script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
1.3 获取jquery对象
$("选择器") 或者jQuery（“选择器”）
//获取id为username的值 <script src="../js/jquery-1.11.0.min.js"></script> <script> $("#username").val() </script> <body> <input type="text" id="username" value="jack"/> </body>
1.4 dom对象和jquery对象的转换
dom->jquery===============>$(dom对象) jquery->dom===============>jquery对象[index]
var $user=$(document.getElementById("username"));
1.5 页面加载
js: windows.onload=function() //在一个页面中只能使用一次
jquery在一个页面中可以使用多次 方式1：$(function(){ ... }) 方式2:$(document).ready(function(){ ... })
//页面加载 <script type="text/javascript"> $(function(){ jquery代码 }) </script>
1.6 jquery中的效果
隐藏或展示：show(毫秒数)：显示 hide(毫秒数)：隐藏
滑入或滑出：slideDown(毫秒数)：向下滑入 slideUp(毫秒数)：向上滑出
淡入或淡出：fadeIn(int): 淡入 fadeOut(int):淡出
//常见事件演示 <script src="../js/jquery-1.11.0.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#e01").blur(function(){ $("#textMsg").html("文本框失去焦点：blur"); }).focus(function(){ $("#textMsg").html("文本框获得焦点：focus"); }).keydown(function(){ $("#textMsg").append("键盘按下：keydown"); }).keypress(function(event){ $("#textMsg").append("键盘按：keypress"); }).keyup(function(){ $("#textMsg").append("键盘弹起：keyup"); }); var i = 0; $("#e02").mouseover(function(){ $("#divMsg").html("鼠标移上：mouseover"); }).mousemove(function(){ //$("#divMsg").html("鼠标移动：mousemove , " + i++ ); }).mouseout(function(){ $("#divMsg").html("鼠标移出：mouseout"); }).mousedown(function(){ $("#divMsg").html("鼠标按下：mousedown"); }).mouseup(function(){ $("#divMsg").html("鼠标弹起：mouseup"); }); $("#e03").click(function(){ $("#buttonMsg").html("单击：click"); }).dblclick(function(){ $("#buttonMsg").html("双击：dblclick"); }); }); </script>
1.7 jquery派发事件
$("选择器").click(function(){ ... }) 等价于：dom对象.onclick=function(){ ... }
掌握事件 focus blur submit change click
//事件绑定 <body> <input type="button" id="bId" value="点击查看" /> </body> <script type="text/javascript"> $("#bId").click(function(){ alert("hello"); }); </script>
1.8 选择器总结
基本选择器
$("#id值") $(".class值") $("标签名")
基本选择器使用
//<input type="button" value="选择 id为 one 的元素." id="btn1"/> $("#btn1").click(function(){ $("#one").css("background-color","red"); });
//<input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/> $("#btn2").click(function(){ $(".mini").css("background-color","green"); });
//<input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/> $("#btn3").click(function(){ $("div").css("background-color","pink"); });
//<input type="button" value="选择 所有的元素." id="btn4"/> $("#btn4").click(function(){ $("*").css("background-color","red"); });
//<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/> $("#btn5").click(function(){ $("span,#two").css("background-color","red"); });
层次选择器
a b -----> a的所有b后代 a>b -----> a的所有b孩子 a+b -----> a的下一个b兄弟 a~b -----> a的所有b弟弟
层次选择器的使用
//<input type="button" value="选择 body内的所有div元素." id="btn1"/> $("#btn1").click(function(){ $("body div").css("background-color","red"); });
//<input type="button" value="在body内,选择子元素是div的。" id="btn2"/> $("#btn2").click(function(){ $("body>div").css("background-color","red"); });
//<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"); });
基本过滤选择器
：first 第一个 ：last 最后一个 ：odd 索引奇数 ：even 索引偶数 ：gt(index) 索引大于某个数 ：lt(index) 索引小于某个数 ：eq(index) 索引等于某个数
基本过滤器使用
//<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="选择索引值为偶数 的div元素." id="btn3"/> $("#btn3").click(function(){ $("div:even").css("background-color","red"); });
//<input type="button" value="选择索引值为奇数 的div元素." id="btn4"/> $("#btn4").click(function(){ $("div:odd").css("background-color","red"); });
//<input type="button" value="选择索引值等于3的div元素." id="btn5"/> $("#btn5").click(function(){ $("div:eq(3)").css("background-color","red"); });
//<input type="button" value="选择索引值大于3的div元素." id="btn6"/> $("#btn6").click(function(){ $("div:gt(3)").css("background-color","red"); });
内容过滤选择器
：has("选择器") ： 包含指定选择器的元素
内容过滤选择器使用
$(function(){ $("#btn1").click(function(){ $("div:has('.mini')").css("background-color","red"); }); });
可见过滤器
:hidden 在页面不展示元素 一般指 input type="hidden" 和 样式中display:none :visible
可见过滤器使用
//<input type="button" value=" 选取所有可见的div元素" id="b1"/> $("#b1").click(function(){ $("div:visible").css("background-color","red"); });
//<input type="button" value=" 选取所有不可见的div元素, 利用 jQuery 中的 show() 方法将它们显示出来" id="b2"/> $("#b2").click(function(){ $("div:hidden").show(1000); });
属性过滤器
[属性名] [属性名=“值”]
属性过滤器使用
//<input type="button" value="选取含有 属性title 的div元素." id="btn1"/> $("#btn1").click(function(){ $("div[title]").css("background-color","red"); });
//<input type="button" value="选取 属性title值等于“test”的div元素." id="btn2"/> $("#btn2").click(function(){ $("div[title='test']").css("background-color","red"); });
表单过滤器
:input 所有的表单子标签 input select textarea button
表单过滤器使用
$(function(){ $("#btn1").click(function(){ alert($("#form1 :input").size()); }); });
1.9 案例-广告显示
<script> $(function(){ setInterval(showAd,4000); }) function showAd(){ $("#ad").show(1000); setTimeout(hideAd,2000); } function hideAd(){ $("#ad").hide(1000); } </script>
（2）jQuery实现隔行换色
2.1 属性和CSS操作
对属性操作
attr()|prop():设置或获取元素的属性 方式1：获取 attr|prop("属性名") 方式2：设置一个属性attr|prop("属性名","属性值") 方式3 ：设置多个值json attr|prop({ "属性1"：“属性值2” “属性2”：“属性值2” }) removeAttr(“属性名称”):移除指定属性 区别：推荐使用prop（attr不具有selected、checked属性）
对CSS操作
css()：设置和获取css样式 css():获取或者设置css样式 方式1:获取 css("属性名") 方式2:设置一个属性 css("属性名","值") 方式3:设置多个 css({ "属性1":"值1", "属性2":"值2" });
2.2 案例展示
步骤分析
1.页面加载成功 2.获取所有的奇数行 添加一个css 3.获取所有的偶数行 添加一个css
代码
<script> $(function(){ $("tr:odd").css("background-color","red"); $("tr:even:gt(0)").css("background-color","green"); }) </script>
效果图
3 全选或全不选（prop和attr区别）
步骤分析
1.确定事件 复选框的单击事件 2.函数中 a.获取该复选框的选中状态 attr(获取不了checked属性)|prop b.获取所有的复选框修改他们的状态
代码
$(function(){ $("#selectAll").click(function(){ $(".itemSelect").prop("checked",$(this).prop("checked")); }); });
4 省市联动
4.1 对数组的循环遍历
使用：
数组.each(function(){}) $.each(遍历数组，function(){})
注意：
each的function中可以加两个参数index和dom index是指当前遍历的索引值 dom表示当前遍历的dom对象（一般开发使用this即可）
代码
//选取所有的文本隐藏域 $("#b1").click(function(){ $("input:hidden").each(function(){ alert($(this).val()); }); });
4.2 val text html
设置和获取value属性
jquery对象.val()： 读取 jquery对象.val("...")：设置
代码
//3.3通过html获取div标签体的内容 alert($("div").html()); //3.4通过html设置div标签体的内容 $("div").html("hellowrodl"); //3.5通过text获取div标签体的内容 $("div").text("world"); //3.6通过text设置div标签体的内容 alert($("div").text());
4.3 案例
//为选项改变添加事件 $("[name='pro']").change(function(){ //获取当前value var pro=$(this).val(); //获取到city的元素 var $city=$("[name='city']"); var citis=$(arr[pro]); //init $city.html($("<option>").html("-请选择-")); citis.each(function(){ $city.append("<option>"+this+"</option>") }); });
（5）左右选中
5.1 文档操作
内部插入 a.append(c):将c插入到a的内部(标签体)后面 a.prepend(c):将c插入到a的内部的前面 appendTo prependTo 外部插入 a.after(c):将c放到a的后面 a.before(c):将c放到a的前面 a.insertAfter(c) a.insertBefore(c) 删除 empty() 清空元素 remove() 删除元素
5.2 步骤分析
1.确定事件 单击事件 2.编写函数: 移动一个: 右边的下拉选追加一个 左边的选中的第一个 移动多个: 左边选中的 追加到右边的下拉选中 移动全部: 将左边的所有option追加到右边的下拉选中
5.3 案例
//单选右移 $("#toRight1").click(function(){ $("#right").append($("#left>option:selected:first")); }); //多选右移 $("#toRight2").click(function(){ $("#right").append($("#left>option:selected")); }); //全选右移 $("#toRight3").click(function(){ $("#right").append($("#left>option")); });
文章转载自code window，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。
