七、jQuery基础

一、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

  1. 从 jquery.com 下载 jQuery 库。
    有两个版本的 jQuery 可供下载： Production version - 用于实际的网站中，已被精简和压缩。 Development version - 用于测试和开发（未压缩，是可读的代码）
  2. 在页面中使用 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的区别:

  1. keydown：在键盘上按下某键时发生,一直按着则会不断触发（opera浏览器除外）, 它返回的是键盘代码;
  2. keypress：在键盘上按下一个按键，并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符，所以监听无效 ,换句话说, 只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。
  3. 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(); --单击事件的切换
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • jQuery基础(1)
    一、样式篇 第1章 初识jQuery （1）环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 8,915评论 0赞 44
  • 十二、事件
      JavaScript 与 HTML 之间的交互是通过事件实现的。   事件，就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 8,925评论 1赞 11
  • jQuery基础(2)
    (续jQuery基础(1)) 第5章 DOM节点的复制与替换 （1）DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 5,283评论 0赞 8
  • 电子商务网站开发与建设
    概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 13,183评论 0赞 3
  • jQuery基础——样式篇
    第一章 jQuery简介 1-1 jQuery简介 1.简介 2.优势 3.特性与工具方法 1-2 环境搭建 进入...
    mo默22阅读 5,644评论 0赞 11

友情链接更多精彩内容