七、jQuery基础

作者: 圣贤与无赖 | 来源:发表于2018-08-27 19:04 被阅读7次

一、jQuery介绍

jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
使用JS写的代码只能调用JS中的属性和方法.
使用JQ写的代码只能调用JQ中的属性和方法．

jQuery库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

提示：除此之外，Jquery还提供了大量的插件。

jQuery 的功能概括：
1、html 的元素选取
2、html的元素操作
3、html dom遍历和修改
4、js特效和动画效果
5、css操作
6、html事件操作
7、ajax异步请求方式

二、网页中添加 jQuery

从 jquery.com 下载 jQuery 库。
有两个版本的 jQuery 可供下载： Production version - 用于实际的网站中，已被精简和压缩。 Development version - 用于测试和开发（未压缩，是可读的代码）
在页面中使用 HTML 的 <script> 标签引用它：

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

还有一种方法：
如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络）引用它。
BootCDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。
如果你的站点用户是国内的，建议使用百度、又拍云、新浪等国内CDN地址，如果你站点用户是国外的可以使用谷歌和微软。
BootCDN:

<head>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
</head>

三、jQuery 语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()

美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作

实例:

$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏所有 id="test" 的元素

文档就绪事件
为了防止文档在完全加载（就绪）之前运行 jQuery 代码，我们需要加上jQuery的入口函数：

$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});

一般使用简洁写法（与以上写法效果相同）:

$(function(){
 
   // 开始写 jQuery 代码...
 
});

笔记：
JavaScript 入口函数:
window.onload = function () {
// 执行代码
}

JQ和DOM对象的转换
使用JS写的代码只能调用JS中的属性和方法.
使用JQ写的代码只能调用JQ中的属性和方法．

<script src="../../js/jquery-1.8.3.js"></script>
        <script>
            // JS
            function writeIn(){
                // document.getElementById("s1").innerHTML = "Hello 王超杰";
                var s1 = document.getElementById("s1");
                // 将JS对象转成JQuery的对象
                $(s1).html("Hello 王超杰");
            }
            
            // JQ
            $(function(){
                $("#bt2").click(function(){
                    // $("#s1").html("Hello 王守义");
                    // 将JQ的对象转成JS的对象。
                    // $("#s1")[0].innerHTML="Hello 王守义";
                    // $("#s1").get(0).innerHTML = "Hello 王守义";
                });
            });
        </script>

四、jQuery选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

1. 元素选择器

jQuery 元素选择器基于元素名选取元素。

在页面中选取所有 <p> 元素:$("p")

实例
用户点击按钮后，所有 <p> 元素都隐藏：

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

2. #id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法：$("#test")

实例
当用户点击按钮后，有 id="test" 属性的元素将被隐藏：

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

3. .class 选择器

jQuery 类选择器可以通过指定的 class 查找元素。
语法如下：$(".test")

实例
用户点击按钮后所有带有 class="test" 属性的元素都隐藏：

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

更多实例

语法	描述
$("*")	选取所有元素
$(this)	选取当前 HTML 元素
$("p.intro")	选取 class 为 intro 的 <p> 元素
$("p:first")	选取第一个 <p> 元素
$("ul li:first")	选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child")	选取每个 <ul> 元素的第一个 <li> 元素
$("[href]")	选取带有 href 属性的元素
$("a[target='_blank']")	选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']")	选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$(":button")	选取所有 type="button" 的 <input> 元素和 <button> 元素
$("tr:even")	选取偶数位置的 <tr> 元素

如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中,然后使用script中的src属性引用文件：

<head>
<script src="jquery-1.10.2.min.js"></script>
<script src="my_jquery_functions.js"></script>
</head>

【基本选择器】

ID选择器：
$(“#id”)
类选择器：
$(“.class”)
元素选择器：
$(“元素”)
通配符选择器：
$(“*”)
选择器,选择器:
$(“#id,.class”)
【基本选择器的案例】

<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                $("#btn1").click(function(){
                    $("#one").css("background","#bbffaa");`
                });
                
                $("#btn2").click(function(){
                    $(".mini").css("backgroundColor","#bbffaa");
                });
                
                $("#btn3").click(function(){
                    $("div").css("backgroundColor","#bbffaa");
                });
                
                $("#btn4").click(function(){
                    $("*").css("backgroundColor","#bbffaa");
                });
                
                $("#btn5").click(function(){
                    $("#two,.mini").css("backgroundColor","#bbffaa");
                });
            });
        </script>
    </head>
    <body>
        <input type="button" id="btn1" value="选择为one的元素"/>
        <input type="button" id="btn2" value="选择样式为mini的元素"/>
        <input type="button" id="btn3" value="选择所有的div元素"/>
        <input type="button" id="btn4" value="选择所有元素"/>
        <input type="button" id="btn5" value="选择id为two并且样式为mini的元素"/>
        <hr/>
        <div id="one">
            <div class="mini">
                111
            </div>
        </div>
        
        <div id="two">
            <div class="mini">
                222
            </div>
            <div class="mini">
                333
            </div>
        </div>
        
        <div id="three">
            <div class="mini">
                444
            </div>
            <div class="mini">
                555
            </div>
            <div class="mini">
                666
            </div>
        </div>
        
        <span id="four">
            
        </span>
    </body>

4.JQ的层级选择器

Ancestor descendant2

JQ的层级选择器1.png
Parent >child

JQ的层级选择器2.png
Prev+next

JQ的层级选择器3.png
Prev~sibling

JQ的层级选择器4.png

【JQ层级选择器的代码】

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="../../css/style.css" type="text/css"/>
        <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                $("#btn1").click(function(){
                    $("body div").css("background","#bbffaa");
                });
                
                $("#btn2").click(function(){
                    $("body>div").css("backgroundColor","#bbffaa");
                });
                
                $("#btn3").click(function(){
                    $("#two+div").css("backgroundColor","#bbffaa");
                });
                
                $("#btn4").click(function(){
                    $("#one~div").css("backgroundColor","#bbffaa");
                });
                
                
            });
        </script>
    </head>
    <body>
        <input type="button" id="btn1" value="选择body中的所有的div元素"/>
        <input type="button" id="btn2" value="选择body中的第一级的孩子"/>
        <input type="button" id="btn3" value="选择id为two的元素的下一个元素"/>
        <input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/>
        
        <hr/>
        <div id="one">
            <div class="mini">
                111
            </div>
        </div>
        
        <div id="two">
            <div class="mini">
                222
            </div>
            <div class="mini">
                333
            </div>
        </div>
        
        <div id="three">
            <div class="mini">
                444
            </div>
            <div class="mini">
                555
            </div>
            <div class="mini">
                666
            </div>
        </div>
        
        <span id="four">
            
        </span>
    </body>
</html>

5. JQ的基本过滤选择器

JQ的基本过滤选择器.png

$(function(){
                $("#btn1").click(function(){
                    $("body div:first").css("background","#bbffaa");
                });
                
                $("#btn2").click(function(){
                    $("body div:last").css("backgroundColor","#bbffaa");
                });
                
                $("#btn3").click(function(){
                    $("body div:odd").css("backgroundColor","#bbffaa");
                });
                
                $("#btn4").click(function(){
                    $("body div:even").css("backgroundColor","#bbffaa");
                });
                
                
            });

6.JQ的属性选择器

<script>
            $(function(){
                $("#btn1").click(function(){
                    $("div[title]").css("background","#bbffaa");
                });
                
                $("#btn2").click(function(){
                    $("div[title='aaa']").css("backgroundColor","#bbffaa");
                });
                
            });
        </script>

7. JQ的表单选择器

$(function(){
                $("#btn1").click(function(){
                    $(":input").css("background","#bbffaa");
                });
                
                $("#btn2").click(function(){
                    $(":text").css("background","#bbffaa");
                });
            });

五、jQuery 事件

页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

jQuery常用事件：

$("p").click();    　　//单击事件
$("p").dblclick();    //双击事件
$("input[type=text]").focus()  //元素获得焦点时,触发 focus 事件
$("input[type=text]").blur()   //元素失去焦点时,触发 blur事件
$("button").mousedown()//当按下鼠标时触发事件
$("button").mouseup()  //元素上放松鼠标按钮时触发事件
$("p").mousemove()     //当鼠标指针在指定的元素中移动时触发事件
$("p").mouseover()     //当鼠标指针位于元素上方时触发事件
$("p").mouseout()    　//当鼠标指针从元素上移开时触发事件
$(window).keydown()    //当键盘或按钮被按下时触发事件
$(window).keypress()   //当键盘或按钮被按下时触发事件,每输入一个字符都触发一次
$("input").keyup()     //当按钮被松开时触发事件
$(window).scroll()     //当用户滚动时触发事件
$(window).resize()     //当调整浏览器窗口的大小时触发事件
$("input[type='text']").change()    //当元素的值发生改变时触发事件
$("input").select()    //当input 元素中的文本被选择时触发事件
$("form").submit()     //当提交表单时触发事件
$(window).unload()     //用户离开页面时

jQuery 事件方法语法
在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。
页面中指定一个点击事件：
$("p").click();
下一步是定义什么时间触发事件。您可以通过一个事件函数实现：

$("p").click(function(){
    // 动作触发后执行的代码!!
});

实例:当点击事件在某个 <p> 元素上触发时，隐藏当前的 <p> 元素

$("p").click(function(){
  $(this).hide();
});

keypress,keydown,keyup的区别:

keydown：在键盘上按下某键时发生,一直按着则会不断触发（opera浏览器除外）, 它返回的是键盘代码;
keypress：在键盘上按下一个按键，并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符，所以监听无效 ,换句话说, 只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。
keyup：用户松开某一个按键时触发, 与keydown相对, 返回键盘代码.

两种常用用法举例
案例1:获取按键代码或字符的ASCII码

$(window).keydown( function(event){
   /通过event.which可以拿到按键代码.  如果是keypress事件中,则拿到ASCII码.
} );

案例2:传递数据给事件处理函数
语法:jQueryObject.keydown( [[ data ,] handler ] );
data: 通过event.data传递给事件处理函数的任意数据;
handler: 指定的事件处理函数;
举例:

// 只允许按下的字母键生效, 65~90是所有小写字母的键盘代码范围.
var validKeys = { start: 65, end: 90  };
$("#keys").keydown( validKeys, function(event){
    var keys = event.data;  //拿到validKeys对象.
    return event.which >= keys.start && event.which <= keys.end;
} );

六、jQuery动画效果

show(); --显示某个元素
hide(); --隐藏某个元素
slideDown(); --向下滑动
slideUp(); --向上滑动
fadeOut(); --淡出
fadeIn(); --淡入
animate(); --自定义动画
toggle(); --单击事件的切换