Web前端学习（6）_jQuery

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的类库，类似于如下语句：

 <script src="../js/jquery-1.11.0.min.js"></script>

这里导入src的后面不能再写语句了！

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.onload=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对象.onclick=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 buttoninput   仅仅获取input标签*/  //1.获取form标签中的所有的子标签 alert($("#form1 :input").size()); //这种获取方式,不仅可以获取到form标签中的input标签,还可以获取到其中的button,textarea  //2.仅仅获取input标签 alert($("#form1 input").size()); }) </script>