目录
jQuery
- 技术:
定时器
jQuery
- jquery和html的整合
jquery是单独的js文件
通过script标签的src属性导入即可
- 获取一个jquery对象
$("选择器") 或者 jQuery("选择器")
<script src="../js/jquery-1.11.0.min.js"></script> <body> <input type="text" id="username" value="jack"/> </body> <script> //通过原生js //alert(document.getElementById("username").value) //通过jquery 获取jquery对象 var $username=$("#username"); //var $username=jQuery("#username"); alert($username.val()); </script>
- dom对象和jquery对象之间的转换
dom对象===>jquery对象
$(dom对象)<script> //dom >>>>jquery $(dom对象) //1.获取dom对象 var obj=document.getElementById("username"); //2.转化 var $user=$(obj); alert($user.val()); //alert($user.value);错误的 </script>
jquery对象===>dom对象
方式1:
jquery对象[index]<script> //jquery>>>>dom //1.获取jquery独享 var $u=$("#username"); //2.转换 //方式1 var obj = $u[0]; alert(obj.value); </script>
方式2:
jquery对象.get(index)<script> //jquery>>>>dom //1.获取jquery独享 var $u=$("#username"); //2.转换 //方式2 var obj=$u.get(0); alert(obj.value); </script>
- 页面加载:
js:
window.οnlοad=function(){}//在一个页面中只能使用一次
jquery 在一个页面中可以使用多次
方式1:
$(function(){...})
方式2:
$(document).ready(function(){...});<script src="../js/jquery-1.11.0.min.js"></script> <script type="text/javascript"> onload=function(){ alert(12); } /*onload=function(){ alert(34); }*/ $(function(){ alert("abc"); }) $(function(){ alert("ab1c"); }) $(function(){ alert("ab3c"); }) </script>
- 派发事件:
$("选择器").click(function(){...});//去掉 on οnclick=>click
等价于 原生js中
dom对象.οnclick=function(){....}<script type="text/javascript"> $(function(){ //派发事件 $("#bId").click(function(){ alert(123) }); }); </script>
- 掌握事件:
focus
blur
submit
change
click<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常见事件</title> <style type="text/css"> #e02{ border: 1px solid #000000; height: 200px; width: 200px; } </style> <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> </head> <body> <input id="e01" type="text" /><span id="textMsg"></span> <br/> <hr/> <div id="e02" ></div><span id="divMsg"></span> <br/> <hr/> <input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span> <br/> </body> </html>
jquery中效果
- 隐藏或展示
show(毫秒数)
hide(毫秒数)
toggle(毫秒数) //切换
- 滑入或滑出
slideDown(毫秒数):向下滑入
slideUp(毫秒数):向上滑出
- 淡入或淡出
fadeIn(int):淡入
fadeOut(int):淡出
<script src="../js/jquery-1.11.0.min.js"></script> <script type="text/javascript"> $(function(){ //藏b1div $("#b1").click(function(){ //$("#b1Div").hide(1000); //$("#b1Div").hide(); //切换 $("#b1Div").toggle(1000); }); //滑出/滑入b2Div $("#b2").click(function(){ //$("#b2Div").slideUp(2000); $("#b2Div").slideToggle(1000); }); //出/淡入b3Div $("#b3").click(function(){ $("#b3Div").fadeOut(1000); }); }) </script> <body> <input type="button" id="b1" value="显示/隐藏 b1Div" /> <div id="b1Div"></div> <br/> <input type="button" id="b2" value="滑出/滑入b2Div"/> <div id="b2Div"></div> <br/> <input type="button" id="b3" value="淡出/淡入b3Div" /> <div id="b3Div"></div> </body>
案例1-弹出广告
- 步骤分析：
1.页面加载成功之后$(function(){...}) 开始一个定时器 setTimeout();
2.编写展示广告方法
获取div,然后调用效果方法
设置另一个定时器 隐藏3.编写隐藏广告的方法
获取div,然后调用效果方法
<script src="../js/jquery-1.11.0.min.js"></script> <script> $(function(){ //开启一个定时器 2秒之后展示div setTimeout(showAd,2000); }); //编写展示的方法 function showAd(){ //获取div,调用效果 //$("#ad").show(1000); //$("#ad").slideDown(1000); $("#ad").fadeIn(1000); //开启另一个隐藏的定时器 setTimeout("hideAd()",3000); } //编写隐藏方法 function hideAd(){ //$("#ad").hide(1000); //$("#ad").slideUp(1000); $("#ad").fadeOut(1000); } </script> <div id="ad" style="width:100%;display: none;"> <img src="../img/ad_.jpg" width="100%" /> </div>
选择器总结
- 基本选择器★
$("#id值") $(".class值") $("标签名")
了解:$("*") 所有
理解:获取多个选择器 用逗号隔开
$("#id值,.class值")
<script type="text/javascript"> $(function(){ //<input type="button" value="选择 id为 one 的元素." id="btn1"/> $("#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>
- 层次选择器 ★
a b:a的所有b后代
a>b:a的所有b孩子
a+b:a的下一个兄弟(大弟弟)
a~b:a的所有弟弟<script type="text/javascript"> $(function(){ // <input type="button" value="选择 body内的所有div元素." id="btn1"/> $("#btn1").click(function(){ $("body div").css("background-color","#f0f"); }); // <input type="button" value="在body内,选择子元素是div的。" id="btn2"/> $("#btn2").click(function(){ $("body>div").css("background-color","#f0f"); }); // <input type="button" value="选择 id为one 的下一个div元素." id="btn3"/> $("#btn3").click(function(){ $("#one+div").css("background-color","#f0f"); }); // <input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/> $("#btn4").click(function(){ $("#two~div").css("background-color","#f0f"); }); }) </script>
- 基本过滤选择器:★
:frist 第一个——div:first
:last 最后一个
:odd 索引奇数
:even 索引偶数
:eq(index) 指定索引
:gt(index) >
:lt(index) <<script type="text/javascript"> $(function(){ // <input type="button" value="选择第一个div元素." id="btn1"/> $("#btn1").click(function(){ $("div:first").css("background-color","#0f0"); }); // <input type="button" value="选择最后一个div元素." id="btn2"/> $("#btn2").click(function(){ $("div:last").css("background-color","#0f0"); }); // <input type="button" value="选择索引值为偶数 的div元素." id="btn3"/> $("#btn3").click(function(){ $("div:even").css("background-color","#0f0"); }); // <input type="button" value="选择索引值为奇数 的div元素." id="btn4"/> $("#btn4").click(function(){ $("div:odd").css("background-color","#0f0"); }); // <input type="button" value="选择索引值等于3的div元素." id="btn5"/> $("#btn5").click(function(){ $("div:eq(3)").css("background-color","#0f0"); }); // <input type="button" value="选择索引值大于3的div元素." id="btn6"/> $("#btn6").click(function(){ $("div:gt(3)").css("background-color","#0f0"); }); }); </script>
- 内容过滤:
:has("选择器"):包含指定选择器的元素
<script type="text/javascript"> // <input type="button" value="选取含有class为mini元素 的div元素." id="btn1"/> $(function(){ $("#btn1").click(function(){ $("div:has('.mini')").css("background-color","#0ff"); }); }); </script>
- 可见过滤:
:hidden 在页面不展示元素 一般指 input type="hidden" 和 样式中display:none
:visible<script type="text/javascript"> $(function(){ // <input type="button" value=" 选取所有可见的div元素" id="b1"/> $("#b1").click(function(){ $("div:visible").css("background-color","#f0f"); }); // <input type="button" value=" 选取所有不可见的div元素, 利用 jQuery 中的 show() 方法将它们显示出来" id="b2"/> $("#b2").click(function(){ $("div:hidden").css("background-color","#f0f").show(1000); }); }); </script>
- 属性过滤器:★
[属性名]
[属性名="值"] （!= ^= *= $=）<script type="text/javascript"> $(function(){ // <input type="button" value="选取含有 属性title 的div元素." id="btn1"/> $("#btn1").click(function(){ $("div[title]").css("background-color","#ff0"); }); // <input type="button" value="选取 属性title值等于“test”的div元素." id="btn2"/> $("#btn2").click(function(){ $("div[title='test']").css("background-color","#ff0"); }); }); </script>
- 表单过滤:
:input 所有的表单子标签 input select textarea button
input 只要input 标签<script type="text/javascript"> $(function(){ //<input type="button" value="选取所有的表单子元素" id="btn1"/> $("#btn1").click(function(){ //alert($("#form1 :input").size()); 16 //alert($("#form1 :input").length); alert($("#form1 input").size());//去掉不是input 的 个数 }); }); </script>
案例2-隔行换色
- 技术分析:
1.页面加载成功
2.获取所有的（大于0行的）奇数行 添加一个css
3.获取所有的（大于0行的）偶数行 添加一个css<script> $(function(){ /*$("tr:odd").css("background-color","#BCD68D"); $("tr:even").css("background-color","#FFFFCC");*/ /*$("tr:gt(0):odd").css("background-color","#BCD68D"); $("tr:gt(0):even").css("background-color","#FFFFCC");*/ $("tr:gt(0):odd").addClass("odd"); $("tr:gt(0):even").addClass("even"); }) </script>
属性和css操作总结
对属性的操作
- attr():设置或者获取元素的属性
方式1:获取
attr("属性名称")
方式2:设置一个属性
attr("属性名称","值");
方式3:设置多个属性 json
attr({
"属性1":"值1",
"属性2":"值2"
})removeAttr("属性名称"):移除指定属性
- 添加class属性的时候
1、attr("class","值");
2、addClass("指定的样式值"); 相当于 attr("class","指定的样式值");
removeClass("指定的样式值");
对css操作
- 操作元素的style属性
css():获取或者设置css样式
方式1:获取
css("属性名")
方式2:设置一个属性
css("属性名","值")
方式3:设置多个
css({
"属性1":"值1",
"属性2":"值2"
});
- 获取元素的位置和尺寸
offset()
width()
height()
<script type="text/javascript"> $(document).ready(function(){ //1.1给username添加title属性 var $username=$("[name='username']"); $username.attr("title","姓名"); //1.2获取username的title属性 alert($username.attr("title")); //1.3给username添加value和class属性 $username.attr({ "value":"许多多", "class":"textClass" }); //1.4删除username的class属性 $username.removeAttr("class"); //2.1给username添加一个名为textClass的样式 $username.addClass("textClass"); //2.2删除username的名为textClass的样式 $username.removeClass("textClass"); //4.1 给div添加边框样式 var $div=$("div"); $div.css("border","1px solid red"); //4.2 获取div的表框样式 //alert($div.css("border")); //4.3 给div添加多种样式 $div.css({ "width":"100px", "height":"100px", "background-color":"#ff0" }); //5 获取div的位置 alert($div.offset().left) //6 获取div的高和宽 alert($div.width()); }); </script>
案例3-全选或者全不选
- 需求:
就是将内容中复选框的选中状态和最上面的复选框状态保持一致
- 步骤分析:
1.确定事件 复选框的单击事件
2.函数中
a.获取当前复选框的选中状态 attr(获取不了checked属性)|prop
b.获取所有的复选框修改他们的状态
- 注意:
若jquery版本>1.6 统一使用 prop操作元素的属性
<script type="text/javascript">
$(function(){
$("#selectAll").click(function(){
//1.获取当前元素的选中状态 this在funcation中代表的是当前dom对象
//alert(this.checked);
//jQuery对象，获取属性
//alert($(this).attr("checked"));//获取undefined
//alert($(this).prop("checked"));
//2.获取所有的复选框 让其状态和 当前元素的选中状态保持一致
$(".itemSelect").prop("checked",$(this).prop("checked"));
});
});
</script>
jQuery数据遍历、val设置、标签设置、元素创建
- 遍历数组
数组.each(function(){});——用 this 或者 参数 对属性进行操作
<script type="text/javascript"> $(function(){ $("#b1").click(function(){ //1.获取文本隐藏 //alert($("input:hidden").size()) $("input:hidden").each(function(index,dom){ //function不带参数时，用this //alert(this.value) //alert($(this).val()); //function带有参数时，第一个为索引，第二个为dom对象 alert(index)//索引 alert(dom.value) }); }); </script>
$.each(数组对象,function(){});<script> $("#b2").click(function(){ $.each($("input:hidden"), function() { alert($(this).val()); }); }); }); </script>
注意:
each的function中可以加两个参数 index和dom
index是当前遍历的索引值
dom指代的是当前遍历的dom对象(开发中一般使用this即可)
- 设置或者获取value属性
jquery对象.val():获取
jquery对象.val("...."):设置
<script type="text/javascript"> $(document).ready(function(){ var $username=$("[name='username']"); $username.prop("value","许木木"); //3.1 获取 username的value属性的值 //alert($username.val()); //3.2 设置 username的默认值为"许多多" $username.val("许多多") </script>
- 设置获取获取标签体的内容
html()
text()
xxxxx():获取标签体的内容
xxxxx("....."):设置标签体的内容<script type="text/javascript"> //3.3通过html获取div标签体的内容 var $div=$("div"); alert($div.html()); //3.4通过html设置div标签体的内容 $div.html("已满18,请带墨镜"); //3.5通过text获取div标签体的内容 alert($div.text()); //3.6通过text设置div标签体的内容 $div.text("已满18,请带墨镜"); </script>设置的区别:
html:会把字符串解析
text:只做为普通的字符串获取的区别:
html:获取的html源码
text:获取只是页面展示的内容 <script type="text/javascript"> //3.7 两者设置值的区别 $div.html("<a href='#'>我是一个连接</a>");//就是一个超链接 $div.text("<a href='#'>我是一个连接</a>");//表括号里面的内容作为普通的字符串 //3.8 两者获取值的区别 alert($("#sp").html());//获取源码 外span<a href='#'>内超链</a></span> alert($("#sp").text());//获取只是展示的内容 外span内超链 </script>
- 创建一个元素: $("<标签></标签>")
<script type="text/javascript"> //创建一个元素: $("<标签></标签>") $div.html($("<a href='#'>").html("我")); }); </script>
- 追加元素——文档操作
内部插入
a.append(c):将c插入到a的内部(标签体)后面——尾
a.prepend(c):将c插入到a的内部的前面——头<script type="text/javascript"> $(document).ready(function(){ //0.获取两个元素 var $city=$("#city"); var $fk=$("#fk"); //1.在city的后面内部追加 反恐——添加到末尾 //$city.append($fk); //2.在city的前面内部插入 反恐——添加到头部 $city.prepend($fk) }); </script>
appendTo
prependTo外部插入
a.after(c):将c放到a的后面
a.before(c):将c放到a的前面<script type="text/javascript"> $(document).ready(function(){ //获取两个元素 var $city=$("#city"); var $p2=$("#p2"); //1.在 p2 的后面插入 city $p2.after($city); //2.在 p2 的前面插入 city $p2.before($city); }); </script>
a.insertAfter(c)
a.insertBefore(c)删除
empty() 清空元素——原码中还有
remove() 删除元素<script type="text/javascript"> $(document).ready(function(){ //1.清空ul //$("#city").empty(); //2.移除天津 remove $("#tj").remove(); }); </script>
案例4-省市联动
- 步骤分析:
1.确定事件 省份的下拉选变化的时候 change
2.编写函数
a.获取当前省份的value值
b.通过数组获取该省下的所有市 返回值:数组
c.遍历数组,拼装成option元素 追加到市下拉选即可 append
注意:每次改变的时候初始化市的值.
<script type="text/javascript"> $(function(){ $("[name='pro']").change(function(){ //1、获取市下拉选 var $city=$("[name='city']"); //2、先初始化 市选项 $city.html($("<option>").html("-请选择-")); //3、省所在的数字下标 var pro=$(this).val(); //4、获取所有的市数组，转为jQuery对象 var cities=$(arr[pro]); //alert(cities); //遍历数组,拼装成option 追加到市下拉选中 cities.each(function(){ $city.append("<option>"+this+"</option>"); //$city.html("<option>"+this+"</option>"); //每次只写一个 }); }); }); </script>
选择器——表单对象属性过滤选择器
:enabled 可用的
:disabled 不可用
:checked 选中的(针对于单选框和复选框的)
:selected 选中的(针对于下拉选)
案例5-左右移动
- 步骤分析:
1.确定事件 单击事件
2.编写函数:
移动一个:
右边的下拉选追加一个 左边的选中的第一个
移动多个:
左边选中的 追加到右边的下拉选中
移动全部:
将左边的所有option追加到右边的下拉选中<script type="text/javascript"> $(function(){ //移动一个 $("#toRight1").click(function(){ //儿子选择器 ">" $("#left>option:selected:first").appendTo($("#right")); }); //移动多个 $("#toRight2").click(function(){ //后代选择器 " " $("#right").append($("#left option:selected")); }); //移动全部 $("#toRight3").click(function(){ $("#right").append($("#left option")); }); }) </script>
总结
js类库:
对常见的方法和对象进行了封装,方便开发.
jquery和html的整合
script标签的src属性导入即可
获取jquery对象
$("选择器") jQuery("选择器")
dom对象和jquery对象之间的转换
dom>>>jquery
$(dom对象)
jquery>>>dom
方式1:
jquery对象[index]
方式2:
jquery对象.get(index)
jquery中的选择器:
基本选择器★
$("#id值") $(".class值") $("标签名") $("#one,#two,.mini")
层次选择器★
a b:后代
a>b:孩子
a+b:大弟弟
a~b:弟弟们
基本过滤选择器
:frist :last
:odd :even
:eq(index) :gt|lt..
内容过滤
:has(选择器)
可见性过滤
:visible
:hidden 指代是 input type=hidden 和 display:none
表单的过滤
:input
属性选择器:
[属性]
[属性=值]
表单对象属性过滤选择器
:enabled 可用的
:disabled 不可用
:checked 选中的(针对于单选框和复选框的)
★:selected 选中的(针对于下拉选)
派发事件:
jquery对象.事件(function(){.....});
例如:
$("#btn1").click(function(){.....});
页面加载成功
$(function(){
......
})
$(document).ready(function(){
});
属性和css
attr():设置或者获取属性(1.6版本之前)
attr("属性名"):获取
attr("属性名","值"):设置一个
attr({
"属性名":"值",
"属性名":"值"
})
prop():和attr用法一致(1.6版本之后)
(了解)addClass("存在的样式")
removeAttr()
(了解)removeClass()
css():设置获取获取元素的样式
css("属性"):获取
css("属性","值"):设置
css({
"":"",
"":"",
"":""
}):设置多个
width()
heigh文档处理:
内部插入(2组方法 任意掌握一组)
外部插入(2组方法 任意掌握一组)
删除(empty remove)val、html、text
val :设置或者获取values属性
html:获取或者设置标签体内容
遍历数组
方式1:
jquery对象.each(function(){});
方式1:
$.each(jquery对象,function(){});
在jquery中创建元素
$("<标签名>").prop(属性).html(内容)
附件：相关代码、文档、学习视频https://download.csdn.net/download/qq_38247809/12569224
160
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
