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值")  $("标签名")  $("*")