04 . 前端之JQuery

YPE html>

# 1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
# 2. jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，
# 能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“

# JQuery是一个JavaScript函数库
# JQuery是一个轻量级的"写的少，做的多"的JavaScript库.可以通过一行简单的标记被添加到网页中．
?
# JQuery库包含以下功能:
?
# 1. HTML元素选取
# 2. HTML元素操作
# 3. CSS操作
# 4. HTML事件函数
# 5. JavaScript特效和动画
# 6. HTML DOM遍历和修改
# 7. AJAX(不刷新页面同时修改页面内容)
# 8. Utilities
?
# 除此之外，JQuery还提供了大量的插件

# 目前网络上有大量开源的JS框架，但是JQuery是目前最流行的JS框架，而且提供了大量的扩展.
# 很多大公司都在使用JQuery，例如:
# Google,Microsoft,IBM,Netflix
?
# JQuery是否适用于所有浏览器
# jQuery 团体知道JS在不同浏览器中存在着大量的兼容性问题,目前jQuery兼容于所有主流浏览器,包括Internet Explorer 6!

var $variable = jQuery对像
var variable = DOM对象
$variable[0]//jQuery对象转成DOM对象

$("#i1").html();//jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM对象使用DOM的方法

html lang="en">
head>
    meta charset="UTF-8">
    title>Titletitle>
head>
    link rel="stylesheet" href="csswenjian"/>
    style>
?
    style>
body>
    div id="i1">123div>
?
    script src="jquery-1.12.4.js">script>
    script>
        $("#i1")
    script>
body>
html>

# 打开浏览器访问这个html的console
document.getElementById(‘i1‘)
div id=•"i1">•123•div>•
?
$(‘#i1‘)           
jQuery.fn.init [div#i1, context: document, selector: "#i1"]
?
$(‘#i1‘)[0]
div id=•"i1">•123•div>•
?
# JQuery对象[0]  => DOM对象
# Dom对象   =>  $(Dom对象)

JQuery安装

可以通过多种方法在网页中添加 jQuery。 您可以使用以下方法：

 

从 jquery.com 下载 jQuery 库

 

从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery

HTML标签引用JQuery

有两个版本的 jQuery 可供下载：
?
* Production version - 用于实际的网站中，已被精简和压缩。
* Development version - 用于测试和开发（未压缩，是可读的代码）
?
以上两个版本都可以从 [jquery.com](http://jquery.com/download/) 中下载。
?
jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 

html lang="en">
head>
    meta charset="UTF-8">
    title>Titletitle>
head>
    link rel="stylesheet" href="csswenjian"/>
    style>
?
    style>
body>
    div id="i1">123div>
?
    script src="jquery-1.12.4.js">script>
    script>
        $("#i1")
    script>
body>
html>
?
# 将下载的文件放在网页的同一目录下，就可以使用JQuery

CDN引用JQuery

如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络） 引用它。

 

Staticfile CDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。

 

如果你的站点用户是国内的，建议使用百度、又拍云、新浪等国内CDN地址，如果你站点用户是国外的可以使用谷歌和微软。 如需从Staticfile CDN、又拍云、新浪、谷歌或微软引用 jQuery，请使用以下代码之一：

Staticfile CDN:

head>  
script  src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">  /script>  
/head>

百度CDN

head>  
script  src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">  /script>  
/head>

新浪CDN

head>  
script  src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">  /script> 
/head>

Google CDN

head>  
script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">  /script>  
/head>
# Google产品在中国很不稳定

Microsoft CDN

head>  
script  src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js">/script>  
/head>

# 使用CDN的JQuery，有一个很大的优势:
# 许多用户访问其他站点时，已经从上面各种CDN加载过JQuery，所以结果是，他们访问你站点时，
# 会从缓存中加载JQuery，这样可以减少加载时间，同时，大多数CDN都可以确保当用户向其请求文件时，
# 会从离最近的服务器上返回响应，这样也可以提高加载速度.
?
# 在浏览器Console输入 $.fn.jquery可以查看使用的什么版本.

JQuery基础语法

# 通过JQuery，可以选取(查询,query)HTML元素，并对他们执行"操作"(actions).

Example

html lang="en">
head>
    meta charset="UTF-8">
    title>Titletitle>
    script src="../jquery-2.1.1.min.js">script>
head>
body>
p>Hellop>
p>Hellop>
p>Hellop>
script>
    $(document).ready(function () {
        // alert("文档加载完毕");
        //  当前函数执行完执行alert弹出框
        $("p").click(function () {
            $(this).hide();
        // 隐藏p元素   
        })
    });
script>
body>
html>

查找标签

1. 基本选择器 id选择器：

$("#id")

标签选择器

$("tagName")

Class选择器

$(".className")

配合使用

$("div.c1")
// 找到c1  class类的div标签

所有元素选择器

$("*")

组合选择器

$("#id,.className,tagName")

层级选择器 x和y可以为任何选择器

$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y

Example1

    

    

    


    
p1

    
p2

    
        click
    
    

基本筛选器

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

事件

    

    

    


Click

事件之绑定，解除绑定

    

    

    


ClickBind

自定义事件

    

    

    


    Click
    

Example2

$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

Example3 多选，全选，反选

    

    



?
    
    
    
?
?
    
        
            
                
                
                
            
        
?
        
            
                
                
                
            
?
            
                
                
                
            
        
    



选项
IP
Port







1.1.1.1
80




1.1.1.2
3306







?
    
    


?
/*
$(‘:checkbox‘).prop(‘checked‘);     获取值
$(‘checkbox‘).prop(‘checked‘,true); 设置值
?
JQuery方法内置循环:  $(‘:checkbox‘).xxxx
?
$(‘:checkbox‘).each(function(k)){
    // k当前索引
    // this,DOM,当前循环的元素 $(this)
}
*/

Example4 筛选器

    

    

    



    


        


            
标题1

            
内容

        


?
        


            
标题2

            
内容

        


?
        


            
标题3

            
内容