美文网首页
Jquery学习

Jquery学习

作者: 暗香有独 | 来源:发表于2017-07-30 12:31 被阅读8次

一个简单的例子：

<html>
    <head>
        <script type="text/javascript" src="../bin/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("p").click(function(){
                    $(this).hide();
                });
            });
        </script>
    </head>
    <body>
        <h1>
            <p>if you click Hello Wolrd, i will disapper.</p>
        </h1>
    </body>
</html>

备注：
1、代码中的函数：
1) hide：隐藏对象。
2) click：点击事件。

  1. ready: 文档就绪函数(为了防止文档在完全加载（就绪）之前运行 jQuery 代码)。
    举例：
    a> 试图隐藏一个不存在的元素
    b> 获得未完全加载的图像的大小
    2、其它：
    1）jquery内库引入:
    // 引入Jquery内库，需要注意<script>标签必须是一对，不能单独出现，不然引入内库文件失败。
    <script type="text/javascript" src="../bin/jquery.js"></script>
    2)关键字：
    this:用于代表此函数对象。

Jquery特性：

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

选择器：

元素选择其：
$("p.intro") 选取所有 class="intro" 的 p元素。
$("p#demo") 选取所有 id="demo" 的 p元素。

属性选择器：
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

CSS选择器：
$("p").css("background-color","red");

总结：jquery中目前包含三种选择器

1.元素选择器。2.属性选择器。3.CSS选择器。

事件：

$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)  触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

show/hide函数使用：

语法：

// 1.speed用来设置隐藏或显示的速度（毫秒），callback：回调函数,默认不需要填写参数。
//2.toggle介于hide和show之间，如果目前对象是隐藏执行toggle函数可以显示对象，相反目前对象是显示执行toggle函数可以隐藏对象。
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);

代码：

    <!DOCTYPE HTML>
    <html>
        <head>
            <script type="text/javascript" src="../bin/jquery.js"></script>
            <script type="text/javascript">
                $(document).ready(function(){
                    $("button.hide").click(function(){
                        $("p").hide(10,function(){
                            alert("hide success!");
                        });
                    });
                    $("button.show").click(function(){
                        $("p").show(10,function(){
                            alert("show success!");
                        });
                    });
                    $("button.toggle").click(function(){
                        $("p").toggle(10,function(){
                            alert("toggle success!");
                        });
                    });
                });
            </script>
        </head>
        <body>
            <h1>
                <p>if you click Hello Wolrd, i will disapper.</p>
                <button class="hide" type="button">hide</button>
                <button class="show" type="button">show</button>
                <button class="toggle" type="button">toggle</button>
            </h1>
        </body>
    </html>

获取内容和属性：

  1. 获取内容：
    1> text():设置或返回所选元素的文本内容。
    2> html()：设置或返回所选元素的内容（包括 HTML 标记）。
    3> val():设置或返回表单字段的值。

2.获取属性：
attr():用于获取属性值

代码：

<html>
    <head>
        <script type="text/javascript" src="../bin/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("button.text").click(function(){
                    alert($("p.char").text());
                });
                $("button.html").click(function(){
                    alert($("p.char").html());
                });
                $("button.val").click(function(){
                    alert($("input.text").val());
                });
                $("button.attr").click(function(){
                    alert($("#w3s").attr("href"));
                });
            });
        </script>
    </head>
    <body>
        <h1>
            <p class="char">这是一段操作的<b>粗体</b>字符串.</p>
        </br>
            <input class="text" type="text" value="这是一段操作的<b>粗体</b>字符串.">
        </br>
            <p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>
        </h1>
        <button class="text" type="button">Text</button>
        <button class="html" type="button">html</button>
        <button class="val" type="button">val</button>
        <button class="attr" type="button">attr</button>
    </body>
</html>

修改内容和属性：

<html>
    <head>
        <script type="text/javascript" src="../bin/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("button.text").click(function(){
                    $("p.text").text("修改内容为TEXT");
                });
                $("button.html").click(function(){
                    $("p.html").html("修改内容为HTML");
                });
                $("button.val").click(function(){
                    $("input.text").val("修改内容VAL");
                });
                $("button.attr").click(function(){
                    //单属性操作
                    //$("#w3s").attr("href","http://www.baidu.com");
                    //多属性操作
                    $("#w3s").attr({
                        "href" : "http://www.baidu.com",
                        "title" : "www.baidu.com"
                    });
                });
            });
        </script>
    </head>
    <body>
        <h1>
            <p class="text">这是一段操作的<b>粗体</b>字符串.</p>
        </br>
            <p class="html">这是一段操作的<b>粗体</b>字符串.</p>
        </br>
            <input class="text" type="text" value="这是一段操作的<b>粗体</b>字符串.">
        </br>
            <p><a href="http://www.hao123.com" id="w3s">W3School.com</a></p>
        </h1>
        <button class="text" type="button">Text</button>
        <button class="html" type="button">html</button>
        <button class="val" type="button">Text</button>
        <button class="attr" type="button">attr</button>
    </body>
</html>

添加内容和属性：

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

<html>
    <head>
        <script type="text/javascript" src="../bin/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                // 在内容后面添加新的元素
                $("button.append").click(function(){
                    $("p").append("<b>end Appended text</b></br>");
                });
                // 在内容前面添加新的元素
                $("button.prepend").click(function(){
                    $("p").prepend("<b>start Appended text</b></br>");
                });
                // 在内容后面添加新的元素
                $("button.after").click(function(){
                    $("p").after("<b>end Appended text</b></br>");
                });
                // 在内容前面添加新的元素
                $("button.before").click(function(){
                    $("p").before("<b>start Appended text</b></br>");
                });
                // 创建新元素添加
                $("button.password").click(function(){
                    // 通过HTML方式创建元素
                    var text1="<p>Text.</p>";
                    // 以jquery方式创建元素
                    var text2=$("<p></p>").text("Text.");
                    var field=$("<input type='password'></input>");
                    // 通过 DOM 来创建元素
                    var text3=document.createElement("p");
                    text3.innerHTML="Text.";
                    $("body").append(text1,text2,text3,field);
                });
            });
        </script>
    </head>
    <body>
        <h1>
            <p>if you click Hello Wolrd, i will disapper.</p>
            <button type="button" class="append">append</button>
            <button type="button" class="prepend">prepend</button>
            <button type="button" class="password">password</button>
            <button type="button" class="after">after</button>
            <button type="button" class="before">before</button>
        </h1>
    </body>
</html>

删除内容和属性：

1、remove() - 删除被选元素（及其子元素）
2、empty() - 从被选元素中删除子元素

代码:

<html>
    <head>
        <script type="text/javascript" src="../bin/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                // 清空子元素
                $("button.remove").click(function(){
                    $("div.remove").remove();
                });
                // 清空所有元素
                $("button.empty").click(function(){
                    $("div.empty").empty();
                });
            });
        </script>
    </head>
    <body>
        <h1>
            <div class="remove" style="height:100px;width:300px;border:1px solid black ;background-color:yellow;">
                    <p>This is some text in the div.</p>
                    <p>This is a paragraph in the div.</p>
                    <p>This is another paragraph in the div.</p>
            </div></br>
            <div class="empty" style="height:100px;width:300px;border:1px solid black ;background-color:yellow;">
                    <p>This is some text in the div.</p>
                    <p>This is a paragraph in the div.</p>
                    <p>This is another paragraph in the div.</p>
            </div>
            <button type="button" class="remove">remove</button>
            <button type="button" class="empty">empty</button>
        </h1>
    </body>
</html>

CSS操作：

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

代码：

<html>
    <head>
        <script type="text/javascript" src="../bin/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("button.addCssStyle").click(function(){
                    // 1. 选择器选择多个元素，通过逗号隔离。
                    // 2. 通过addClass属性为元素附加css属性。
                    $("H1,H4,p").addClass("blue");
                    $("div").addClass("important");
                });
                $("button.removeCssStyle").click(function(){
                    // 1. 通过removeClass属性删除css属性。
                    $("H1,H4,p").removeClass("blue");
                    $("div").removeClass("important");
                });
                $("button.toggleCssStyle").click(function(){
                    // 1.通过toggleClass切换状态。
                    $("H1,H4,p").toggleClass("blue");
                    $("div").toggleClass("important");
                });
                $("button.getCssStyle").click(function(){
                    // 1.通过css属性名获取对象使用css的值
                    alert($("div").css("propertyname","value"));
                    alert($("p").css("background-color"));
                    // 一次性设置css多个属性(格式css.({...more attribute value...}))
                    $("p").css({
                        "background-color":"red",
                        "font-size":"20px"
                    });
                });
            });
        </script>
        <style type="text/css">
            .important{
                font-weight: bold;
                font-size: xx-large;
            }
            .blue{
                color: blue;
            }
        </style>
    </head>
    <body>
        <H1>标题1</H1>
        <H4>标题2<H4>
        <p>这是一个段落</p>
        <p>另一个段落</p>
        <div>
            重要的段落
        </div>
        <button class="addCssStyle" type="button">addCssStyle</button>
        <button class="removeCssStyle" type="button">removeCssStyle</button>
        <button class="toggleCssStyle" type="button">toggleCssStyle</button>
        <button class="getCssStyle" type="button">getCssStyle</button>
    </body>
</html>

Ajax操作：

<html>
    <head>
        <script type="text/javascript" src="../bin/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                var path = "http://store.ceair.com/mas/gk/public/gkstqMas/GetXXBMonthDuty";
                $.ajax({
                    url:path,
                    dataType:"json",
                    success:function(data){
                        $.each(data,function(k,v){
                            var text = $("<input type='text'></input></br></br>").val(v.Leadername);
                            $("body").append(text);
                        });
                    },
                });
                // 通过jquery框架提供的json数据解析
                $.getJSON(
                    path, // 请求地址
                    function(data){ // 回调函数获取返回值
                        $.each(data,function(k,v){
                            //var text = $("<input type='text'></input></br></br>").val(v.Leadername);
                            //$("body").append(text);
                        });
                    })
                    // 执行完之后操作
                    .done(function(){
                               do thing ...
                    })
                    // 执行失败操作
                    .fail(function(){
                               do thing ...
                    });
            });
        </script>
    </head>
    <body>
    </body>
</html>

相关文章

  • jQuery

    jQuery学习： 最好的学习方法：查看jQuery的API jQuery下载： jQuery官网：http://...

  • 锋利的jquery学习

    锋利的jquery学习 @(Jquery) [TOC] jquery环境配置 从官网上下载jquery.js文件，...

  • Web前端JQuery入门实战案例

    前端jquery入门到实战 为什么要学习Jquery?因为生活。 案例： 使用jquery案例： jquery 快...

  • 前端基础入门五（掌握jQuery的常用api，实现动态效果）

    jQuery基本概念 学习目标：学会如何使用jQuery，掌握jQuery的常用api，能够使用jQuery实现常...

  • jQuery概述

    jQuery简介 jQuery就是一个封装了很多方法的javaScript库。我们学习jQuery，其实就是学习j...

  • JQuery简单入门

    第一章：jQuery 简介 为什么要学习jQuery? 什么是jQuery？ jquery的官网：http://j...

  • 2019-01-08

    我的jQuery学习 jQuery库是一个JavaScript文件 1.在jQuery...

  • 2018-06-12

    从零玩转jQuery-初识jQuery 课前须知: 学习jQuery前必须先掌握JavaScriptjQuery虽...

  • jQuery ajax——参数详解

    详细学习jQuery ajax 用法 环境依赖jQuery (我用的是 jQuery v1.11.2) 通用写法$...

  • jquery学习

    学习 jquery 简介 什么是 jquerye jquery 安装 加载运行函数 jQuery 的入口函数是在 ...

网友评论

      本文标题：Jquery学习

      本文链接：https://www.haomeiwen.com/subject/sxzmvttx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|Jquery学习|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！