带你快速进入--Jquery的世界

博客转移到个人站点：http://www.wangchengmeng.club/2018/02/01/%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8BJquery/

欢迎来吐槽

Jquery的使用

1、引用的两种方式

1、直接下载库，导入到你的工程中

2、使用cdn

<!--利用百度的CDN  使用Jquery-->
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

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" 的元素


文档就绪事件

$(document).ready(function(){

// 开始写 jQuery 代码...

});

**这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

简洁的写法：

$(function(){

// 开始写 jQuery 代码...

});

jQuery 选择器

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

1、元素选择器

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

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

实例1：点击button后所有<p>都隐藏

$(document).ready(function(){

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

2、ID选择器

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

通过 id 选取元素语法如下：
$("#test")    选取 id为text的标签

实例2、点击button，id为test的<p>隐藏

$(document).ready(function(){

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

3、.class 选择器

jQuery 类选择器可以通过指定的 class 查找元素。

语法如下：
$(".test")

实例3：点击button隐藏class为test的<p>

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

4.更多语法：

$("*") 选取所有元素

$(this)    选取当前 HTML 元素

$("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> 元素

$("tr:odd")    选取奇数位置的 <tr> 元素

jQuery 事件

1、什么是事件？

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

2、jQuery 事件方法语法

1、点击事件  click()

    $("button").click(function(){
        //操作
    });

2、双击事件  dblclick()

    $("button").dblclick(function(){
        $(this).hide();
    });  //双击button隐藏button

3、鼠标进入  mouseenter()

$("p#pi").mouseenter(function(){
    //鼠标移动到了<p>id为pi上
});

4、鼠标离开  mouseleave()

$("p.pi").mouseleave(function(){
    //鼠标离开了<p>class为pi的标签
});

5、按下鼠标  mousedown()

$("p : first").mousedown(function(){
    //鼠标在第一个<p>标签按下了
});

6、松开鼠标  mouseup()

$("p").mouseup(function(){
    //鼠标松开了
});

*7、鼠标经过  hover()

$("p").hover(function(){
    //鼠标进入
},function(){
    //鼠标离开
});

8、获得焦点  focus()

$("input").focus(function(){
    //获得了焦点
});

9、失去焦点  blur()

$("input").blur(function(){
    //失去焦点
});

3、jQuery 效果

1、jQuery 效果 - 显示和隐藏

$(function(){

    $("button#hide").click(function () {
        $("p.hide_show").hide();
    });

    $("button#show").click(function () {
        $("p.hide_show").show();
    });
});

显示和隐藏 设置时间  和回调函数

    $(function(){

        $("button#hide").click(function () {
            $("p.hide_show").hide(2000,function () {
                alert("已经隐藏");
            });
        });

        $("button#show").click(function () {
            $("p.hide_show").show(3000,function () {
                alert("显示完毕");
            });
        });
    });

toggle()  切换hide()  show()

//toggle 函数 切换 hide()  show()

    $(function () {
        $("button#toggle").click(function(){
            $("p.hide_show").toggle(3000,function(){
                alert("执行完毕的回调");
            });
        });
    });

2、jQuery 效果 - 淡入淡出

 //淡入淡出的效果

    $(function () {
        $("button#fade_out").click(function () {
            $("div#fade_1").fadeOut();
            $("div#fade_2").fadeOut("slow");
            $("div#fade_3").fadeOut(2000,function () {
                alert("fadeOut完毕");
            });
        });
    });

    $(function () {
        $("button#fade_in").click(function(){
            $("div#fade_3").fadeIn();
            $("div#fade_2").fadeIn("slow");
            $("div#fade_1").fadeIn(2000,function () {
                alert("fadeIn完毕");
            });
        });
    });

fadeToggle()  切换 fadeIn()  fadeOut()

 $(function () {
        $("button#fade_toggle").click(function () {
            $("div#fade_1").fadeToggle();
            $("div#fade_2").fadeToggle();
            $("div#fade_3").fadeToggle();
        });
    });

fadeTo()  指定淡入的透明度

$(function () {
       $("button#fade_to").click(function(){
           $("div#fade_3").fadeTo("slow",0.15);
           $("div#fade_2").fadeTo("slow",0.5);
           $("div#fade_1").fadeTo("slow",0.8);
       });
    });

3、jQuery 效果 - 滑动

 //滑动
    $(document).ready(function () {
        $("div#flip_down").click(function(){
            $("div#panel").slideDown("slow");
        });
    });

    $(document).ready(function () {
        $("div#flip_up").click(function () {
            $("div#panel").slideUp("slow");
        });
    });

    //切换 slideDwon()  slideUp()
    $(document).ready(function () {
        $("div#flip_toggle").click(function () {
            $("div#panel").slideToggle("slow");
        });
    });、


4、动画  animate

//动画
    $(document).ready(function () {
        $("button#animate").click(function () {
            $("div#translate").animate({
                left:200,
                width:100,
                height:200,
                opacity:0.3
            },2000,function () {
                alert("动画执行完毕");
            });
        });
    });

animate(param,speed,callback);
第一个参数是必须的，通过改变css样式去实现动画效果
第二个参数是执行时间
第三个是执行完毕后的回调函数

您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：

动画队列：

//队列动画  依次往下执行
    $(document).ready(function () {
        $("button#animate_queue").click(function () {
            var div = $("div#translate");
            div.animate({
                height:300,
                width:100,
                opacity:0.3
            },"slow");
            div.animate({
                height:100,
                width:300,
                opacity:0.5
            },"slow");
            div.animate({
                height:100,
                width:100,
                opacity:1
            },"slow");
        });
    });


5、jQuery 停止动画

//在动画执行完毕前  停止动画
    $(document).ready(function () {
        $("button#animate_stop").click(function () {
            $("div#translate").stop();
        });
    });

4、jQuery - 链(Chaining)

有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。
提示： 这样的话，浏览器就不必多次查找相同的元素。
如需链接一个动作，您只需简单地把该动作追加到之前的动作上。

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

5、jQuery - 获取内容和属性

1、获得内容 - text()、html() 以及 val()

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值  value属性的值


//获取标签内容
    $(document).ready(function () {
        $("button#get_text").click(function () {
            alert("text==:"+$("p#text").text());
        });
    });
    $(document).ready(function () {
        $("button#get_html").click(function () {
            alert("text==:"+$("p#text").html());
        });
    });


2、获取属性  jQuery attr() 方法用于获取属性值。

$("button").click(function(){
alert($("#runoob").attr("href"));
});
获取id为rouoop中href属性的值

3、设置内容 - text()、html() 以及 val()

     //设置内容
    $(function () {
        $("button#set_text").click(function () {
            $("p#empty_text").text("我是被设置的文本");
        });
    });

    //动态使用标签
    $(function () {
        $("button#set_html").click(function () {
            $("p#empty_text").html("<b>hello world</b>");
        });
    });


4、text()、html() 以及 val() 的回调函数

//回调函数
    $(function () {
        $("button#text_callback").click(function () {
            $("p#text").text(function (i, originText) {
                return "origin：" + originText + ";新文本：" + "我是新添加的文本" + i;
            });
        });
    });


    $(function () {
        $("button#html-callback").click(function () {
            $("p#text").text(function (i, originText) {
                return "origin：" + originText + ";新文本：" + "我是新添加的<b>hello</b>文本" + i;
            });
        });
    });

设置属性：

//设置属性
    $(document).ready(function () {
        $("button#set_attr").click(function () {
            $("a#jump2link").attr("href","https://www.baidu.com");
        });
    });

设置多个属性用,好分割开

attr() 的回调函数

$("button").click(function(){
$("#runoob").attr("href", function(i,origValue){
return origValue + "/jquery"; 
 });
});

6、jQuery - 添加元素

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

append()在尾部添加元素  prepend()在头部添加元素

//添加元素
    $(function () {
        $("button#append_text").click(function () {
            $("p#text_label").append("<b>在尾部添加的文本</b>");
        });
    });

    $(function () {
        $("button#append_list").click(function () {
            $("ol#list").append("<li><b>添加到尾部的列表项</b></li>");
        });
    }); 


添加多个标签

function appendText()
{
    var txt1="<p>文本。</p>";              // 使用 HTML 标签创建文本
    var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 创建文本
    var txt3=document.createElement("p");
    txt3.innerHTML="文本。";               // 使用 DOM 创建文本 text with DOM
    $("body").append(txt1,txt2,txt3);        // 追加新元素
}


after() 和 before() 方法

$("img").after("在后面添加文本");

$("img").before("在前面添加文本");

7、jQuery - 删除元素

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素(不包括备选元素)

删除指定的元素
$("p").remove(".italic");  //删除指定<p>class为italic的元素

8、jQuery - 获取并设置 CSS 类

1、jQuery 操作 CSS

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性


    1、addClass()给被选的元素添加一个class选择器，可以一次添加多个

    2、removeClass()给被选元素删除一个class选择器

     $(function () {
        $("button.remove_class").click(function () {
            $("h2#add_blue").removeClass("blue");
            $("h3#add_red").removeClass("red");
        });
    });

    3、toggleClass() 切换 addClass()  removeClass()

    $(function () {
        $("button.toggle_class").click(function () {
            $("h2,h3").toggleClass("red");
        });
    });


    4、jQuery css() 方法

    //css()
    $(document).ready(function () {
        $("button.get_css").click(function () {
            var css = $("h2#add_blue").css("font-size");
            alert("css_属性："+css);
        });
    });

    //设置css属性
    $(document).ready(function () {
        $("button.set_css").click(function () {
            $("h2#add_blue").css("background-color","red");
        });
    });

    //设置多个css{"":"","":""}

    $("p").css({"background-color":"yellow","font-size":"200%"});

9、jQuery 尺寸

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

innerWidth() 方法返回元素的宽度（包括内边距）。  +左右pandding
innerHeight() 方法返回元素的高度（包括内边距）。  +上下padding

outerWidth() 方法返回元素的宽度（包括内边距和边框）。 +左右padding+border
outerHeight() 方法返回元素的高度（包括内边距和边框）。 +上下padding+border


 //使用width()  height() 测量元素的宽高、
    $(document).ready(function () {
        $("button#measure_size").click(function () {
            var txt = "";
            txt+= "width:"+$("div#measure").width()+"</br>";
            txt+= "height:"+$("div#measure").height()+"</br>";
            txt+="inner_width:"+$("div#measure").innerWidth()+"</br>";
            txt+="inner_height:"+$("div#measure").innerHeight()+"</br>";
            txt+="out_width:"+$("div#measure").outerWidth()+"</br>";
            txt+="out_height:"+$("div#measure").outerHeight();
            $("div#measure").html(txt);
        });
    });

10、jQuery 遍历

它们用于向上遍历 DOM 树：
parent()   被选元素 上一级父元素
parents()  被选元素 所有的上级元素
parents("指定元素")  被选元素指定的上级元素
parentsUntil("指定元素")  被选元素和指定元素之间的父元素

//遍历上级标签
    $(document).ready(function () {
        $("span.child").parents("div.grad_parent").css({
            "border":"1 solid red",
            "background":"blue"
        });
        $("span.child").parentsUntil("div.parent").css({
            "background":"red"
        });
    });


下面是两个用于向下遍历 DOM 树的 jQuery 方法：
children()  children() 方法返回被选元素的所有 直接 子元素。

$(document).ready(function(){
$("div").children("p.1");   //过滤div直接子元素，返回<p>class属性为1的元素
});

find()  方法返回被选元素的 后代 元素，一路向下 直到 最后一个后代。

    $(document).ready(function(){
    $("div").find("span");  //返回div元素下所有的span子元素
    });

    $(document).ready(function(){
    $("div").find("*");  //返回div元素下所有的子元素
    });




jQuery 遍历 - 同胞(siblings)

在 DOM 树进行水平遍历：
siblings()  返回被选元素的所有同胞（拥有同一个父亲）元素。 siblings("p")过滤
next()   返回被选元素的下一个同胞元素。
nextAll()  返回被选元素的所有跟随的同胞元素。
nextUntil()   回介于两个给定参数之间的所有跟随的同胞元素

$(document).ready(function(){
 $("h2").nextUntil("h6");      //h2 --  h6 之间
});

//下面与next相反
prev()
prevAll()
prevUntil()

first() 方法返回被选元素的首个元素。

    $(document).ready(function(){
     $("div p").first();   //返回收个 div+p元素
    });

last() 方法返回被选元素的最后一个元素。

eq() 方法返回被选元素中带有指定索引号的元素。  索引从0开始

$(document).ready(function(){
$("p").eq(1);     //返回索引为1的p元素  也就是第二个
});

filter() 匹配的元素会被返回。

$(document).ready(function(){
 $("p").filter(".url");  //返回p元素中 class为url的所有元素
});

not() 方法返回不匹配标准的所有元素。 与filter相反

11、jQuery - AJAX

1、jQuery - AJAX load() 方法

语法:
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。

$("div#ajax").load("aaa.txt");

$("div#ajax").load("aaa.txt #p1");  //加载aaa.txt文档中 id为p1的标签到被选中元素


可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
responseTxt - 包含调用成功时返回的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象

2、jQuery - AJAX get() 和 post() 方法

jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。

GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。


GET  POST区别

get()方法：通过 HTTP GET 请求从服务器上请求数据。

$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。

$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。

jQuery noConflict() 方法  释放 $ 标识符的控制，这样其他脚本就可以使用它了。

var jq = $.noConflict(); //替换$符号
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery 仍然在工作!");
});
});