Web前端学习（6）_jQuery
这篇写关于jQuery的相关内容。
1. jQuery：就是一个是js类库,对常用的方法和对象进行了封装
1.1 我们之前DOM编程:var obj = Document.getElementById(id); 此处获取的obj是什么对象---dom对象
1.2 要使用Jquery中里面已经封装好的一些方法和属性的的话,首先获取变迁的jQuery对象,然后通过里面封装的一些方法和属性对jQuery对象进行操作
语法：$("选择器")===>获取元素 -- 获取的是标签元素对应的jQuery对象
注意：使用jquer的一些方法首先要导入jquer的类库，类似于如下语句：
这里导入src的后面不能再写语句了！<script src="../js/jquery-1.11.0.min.js"></script>
2. jQuery和html的整合
jquery是单独的js文件
通过script标签的src属性导入即可
2.1 获取一个jquery对象
$("选择器") 或者 jQuery("选择器")
<script> //1.使用原生js代码获取我们上面的input标签 var user = document.getElementById("username"); alert(user.value); //2.使用jQuery的方式获取我们上面的input标签对象,注意,此时我们获取的是jQuery对象 var $username = $("#username"); //调用jQuery对象的val()方法获取value属性值 //alert($username.val()); //3.使用另一种方式获取jQuery对象 var $name = jQuery("#username"); //alert($name.val()); </script>
2.2 dom对象和jquery对象之间的转换
dom对象===>jquery对象
$(dom对象)
jquery对象===>dom对象
方式1:jquery对象[index]方式2:jquery对象.get(index)
<script> //dom-->>jQuery对象 ,转换方式$(dom对象) var user = document.getElementById("username"); //var $username = $(user); alert($username.val()); //jQury对象--->>dom对象 //方式1: jQuery对象.get(index); var $username = $("#username"); //var user1 = $username.get(0); alert(user1.value); //jQury对象--->>dom对象 //方式2: jQuery对象[index] var user3 = $username[0]; alert(user3.value); </script>
2.3 页面加载js:window.οnlοad=function(){}//在一个页面中只能使用一次
jquery 在一个页面中可以使用多次
方式1: $(function(){...})
方式2: $(document).ready(function(){});
<script type="text/javascript"> window.onload = function(){ //这里面的代码所有都是在html页面加载成功之后才执行的 //alert("页面加载成功了"); //给一个标签施加事件的另一种方式(派发事件) //格式:dom对象.事件名称=fucntion(){....} var button = document.getElementById("bt"); button.onclick = function(){ //alert("点击了"); } } //使用jQuery中的代码,实现页面加载成功的事件 //方式1: //第二个页面家在成功之后要执行的事件 //注意:当我们使用jQuery中的方式执行页面加载成功之后的事件的时候,可以执行多个 $(function(){ //alert("页面加载成功了"); }) //使用jQuery方式执行页面加载成功之后的事件 //方式2: $(document).ready(function(){ alert("页面加载成功了"); }) </script>
2.4 派发事件$("选择器").click(function(){...});
等价于 原生js中dom对象.οnclick=function(){....}
掌握事件:（1）focus （2）blur （3）change （4）click
<script type="text/javascript"> $(function(){ //需求：给e01加上失去焦点和获取焦点事件，键盘按下和键盘弹起的事件 $("#e01").blur(function(){ $("#textMsg").html("失去焦点"); }).focus(function(){ $("#textMsg").html("获取焦点"); }).keydown(function(){ $("#textMsg").html("键盘按下"); }).keyup(function(){ $("#textMsg").html("键盘弹起"); }) //需求：给e02加上鼠标移入和鼠标移出的事件， $("#e02").mousemove(function(){ $("#divMsg").html("鼠标移入"); }).mouseout(function(){ $("#divMsg").html("鼠标移出"); }) //需求：给e03加上单击和双击的事件 $("#e03").click(function(){ $("#buttonMsg").html("单击事件"); }).dblclick(function(){ $("#buttonMsg").html("双击事件"); }) }) </script>
2.5 jquery中效果隐藏或展示：
show(毫秒数)
hide(毫秒数)滑入或滑出：
slideDown(毫秒数):向下滑入
slideUp(毫秒数):向上滑出
淡入或淡出：
fadeIn(int):淡入
fadeOut(int):淡出
<script type="text/javascript"> $(function(){ $("#b1").click(function(){ //show(毫秒数):通过多少时间显示 //hide(毫秒数):通过多少时间隐藏 //toggle(毫秒数):如果隐藏则显示,如果显示则隐藏 $("#b1Div").toggle(2000); }) $("#b2").click(function(){ //slideDown(毫秒数):通过多少时间从上到下划入 //slideUp(毫秒数):通过多少时间,从下往上划出 //slideToggle(毫秒数):如果划入则划出,如果划出则划入 $("#b2Div").slideToggle(2000); }) $("#b3").click(function(){ //fadeIn(毫秒数):通过多少时间单入 //fadeOut(毫秒数):通过多少时间淡出 //fadeToggle(毫秒数):如果淡入则淡出如果淡出则淡入 $("#b3Div").fadeToggle(2000); }) }) </script>
3. 选择器总结
3.1 基本选择器
$("#id值") $(".class值") $("标签名") $("*")
获取多个选择器 用逗号隔开：$("#id值,.class值")
<script> $(function(){ /*基本选择器 $("#id值") $(".class值") $("标签名") 理解:获取多个选择器 用逗号隔开 $("#id值,.class值")*/ //<input type="button" value="选择 id为 one 的元素." id="btn1"/> $("#btn1").click(function(){ $("#one").css("background-color","aqua"); }) //<input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/> $("#btn2").click(function(){ $(".mini").css("background-color","aqua"); }) //<input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/> $("#btn3").click(function(){ $("div").css("background-color","aqua"); }) //<input type="button" value="选择 所有的元素." id="btn4"/> $("#btn4").click(function(){ $("*").css("background-color","aqua"); }) //<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/> $("#btn5").click(function(){ $("span,#two").css("background-color","aqua"); }) }) </script>
3.2 层次选择器
a b:a的所有b后代
a>b:a的所有b孩子(不包括孙子)
a+b:a的下一个兄弟(大兄弟)
a~b:a的所有弟弟们
<script> $(function(){ /*层次选择器 a b:a的所有b后代 a>b:a的所有b孩子(不包括孙子) a+b:a的下一个兄弟(大兄弟) a~b:a的所有弟弟们*/ //<input type="button" value="选择 body内的所有div元素." id="btn1"/> $("#btn1").click(function(){ $("body div").css("background-color","blueviolet"); }) // <input type="button" value="在body内,选择子元素是div的。" id="btn2"/> $("#btn2").click(function(){ $("body>div").css("background-color","blueviolet"); }) //<input type="button" value="选择 id为one 的下一个div元素." id="btn3"/> $("#btn3").click(function(){ $("#one+div").css("background-color","blueviolet"); }) //<input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/> $("#btn4").click(function(){ $("#two~div").css("background-color","blueviolet"); }) }) </script>
3.3 基本过滤选择器
:frist 第一个
:last 最后一个
:odd 索引奇数
:even 索引偶数
:eq(index) 指定索引
:gt(index) >索引大于哪一个值
:lt(index) <索引小于哪一个值
<script type="text/javascript"> $(function(){ /*基本过滤选择器 :frist 第一个 :last 最后一个 :odd 索引奇数 :even 索引偶数 :eq(index) 指定索引 :gt(index) >索引大于哪一个值 :lt(index) <索引小于哪一个值*/ //<input type="button" value="选择第一个div元素." id="btn1"/> $("#btn1").click(function(){ $("div:first").css("background-color","blueviolet"); }) //<input type="button" value="选择最后一个div元素." id="btn2"/> $("#btn2").click(function(){ $("div:last").css("background-color","blueviolet"); }) //<input type="button" value="选择索引值为偶数 的div元素." id="btn3"/> $("#btn3").click(function(){ $("div:even").css("background-color","blueviolet"); }) //<input type="button" value="选择索引值为奇数 的div元素." id="btn4"/> $("#btn4").click(function(){ $("div:odd").css("background-color","blueviolet"); }) //<input type="button" value="选择索引值等于3的div元素." id="btn5"/> $("#btn5").click(function(){ $("div:eq(3)").css("background-color","blueviolet"); }) //<input type="button" value="选择索引值大于3的div元素." id="btn6"/> $("#btn6").click(function(){ $("div:gt(3)").css("background-color","blueviolet"); }) }); </script>
3.4 内容过滤:
:has("选择器"):包含指定选择器的元素
<script type="text/javascript"> $(function(){ /* 内容过滤 :has("选择器"):包含指定选择器的元素*/ //<input type="button" value="选取含有class为mini元素 的div元素." id="btn1"/> $("#btn1").click(function(){ $("div:has('.mini')").css("background-color","blueviolet"); }) }); </script>
3.5 可见过滤:
:hidden 在页面不展示元素 一般指 input type="hidden" 和 样式中display:none
:visible
<script type="text/javascript"> $(function(){ /*可见过滤 :hidden 在页面不展示元素 一般指 input type="hidden" 和 样式中display:none :visible */ //<input type="button" value=" 选取所有可见的div元素" id="b1"/> $("#b1").click(function(){ //:visible $("div:visible").css("background-color","red"); }) //<input type="button" value=" 选取所有不可见的div元素, 利用 jQuery 中的 show() 方法将它们显示出来" id="b2"/> $("#b2").click(function(){ //:hidden 在页面不展示元素 一般指 input type="hidden" 和 样式中display:none $("div:hidden").css("background-color","red").show(1000); }) }); </script>
3.6 属性过滤器
[属性名]
[属性名="值"]
<script type="text/javascript"> $(function(){ /*属性过滤器 [属性名] [属性名="值"]*/ //<input type="button" value="选取含有 属性title 的div元素." id="btn1"/> $("#btn1").click(function(){ $("[title]").css("background-color","red"); }) //<input type="button" value="选取 属性title值等于“test”的div元素." id="btn2"/> $("#btn2").click(function(){ $("[title='test']").css("background-color","red"); }); }) </script>
3.7 表单过滤:
:input 所有的表单子标签 input select textarea button
input 仅仅获取input标签
<script type="text/javascript"> $(function(){ /* 表单过滤 :input 所有的表单子标签 input select textarea button input 仅仅获取input标签*/ //1.获取form标签中的所有的子标签 alert($("#form1 :input").size()); //这种获取方式,不仅可以获取到form标签中的input标签,还可以获取到其中的button,textarea //2.仅仅获取input标签 alert($("#form1 input").size()); }) </script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
