JQuery 入门

1. JQuery 库概述

1. JQuery 库包含的功能

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

2. JQuery 语法

2.1 $(selector).action()
  • "$":定义 JQuery;
  • "selector": 查询或查找 HTML 元素;
  • "action()": 执行对元素的操作;
2.2 noConfilct
  • 解决 jQuery 库的 "$" 符号与其他库的冲突

3. JQuery 选择器

// index.html
    <body>
        <p class="pclass">大家好</p>
        <p id="pid">下雨天</p>
        <button>点击这里</button>
    </body>

// app.js
    $(document).ready(function(){
        $("button").click(function(){
                $("#pid").text("id选择器被修改!");
                $(".pclass").text("class 选择器也被修改了.....");
        });
    });

4. JQuery 事件

4.1 绑定事件和解除绑定事件
  • 添加绑定:bind 或 on;
  • 解除绑定:unbind 或 off;
// index.html
    <body>
        <button id="clickMeBtn">点击这里01</button>
    </body>

// app.js
    $(document).ready(function{
        $("#clickMeBtn").on("click",clickHandler2);

        // 解除绑定
        $("#clickMeBtn").off("click");
    });

    // 定义点击事件
    function clickHandler2(e){
        console.log("点击这里01......");
    }
4.2 事件的目标和冒泡
  • event.stopImmediatePropagation():阻止其他事件被触发,以及阻止事件的冒泡;
  • event.stopPropagation(): 阻止事件冒泡.
4.3 自定义事件
// index.html
    <body>
        <button id="clickMeBtn">点击这里</button>
    </body>

// app.js
    // 定义 ClickMeBtn;
    var ClickMeBtn;

    $(document).ready(function(){
        ClickMeBtn = $("#clickMeBtn");
        ClickMeBtn.click(function(){
            // trigger 触发该事件
            ClickMeBtn.trigger("MyEvent");
        });

        // 自定义 MyEvent 事件, 并绑定到 ClickMeBtn 上面
        ClickMeBtn.bind("MyEvent",function(event){
            console.log(event);
        });
    });

2. JQuery DOM 操作

// index.html
    <body>
        <p id="p2">下了好久的一场雨</p>
        <input type="text" id="username"/>
        <a href="https://github.com/Noodlescn" id="aid">个人主页</a>
        <div id="div" style="200px; height:200px; border:1px solid black; background-color:blue">
            <p>这是一段文本</p>
            <p>这是一段文本</p>
        </div>
        <button id="btn">点击这里</button>
    </body>

// app.js
    $(document).ready(function(){
        $("#btn").click(function(){
            // 获取p元素中的文本
            console.log("text:"+$("#p2").text());
        });

        // 获取输入框文本
        $("#btn").click(function(){
            console.log("text:"+$("#username").val());
        });

        // 获取属性
        $("#btn").click(function(){
            console.log("text:"+$("#aid").attr("href"));
        });

        // 设置 p 元素中的文本值
        $("#btn").click(function(){
            // html 中可以带有html标签
            $("#p2").html("<a href='https://github.con/Noodlescn'>我的个人主页</a>");
        });

        // 更改 a 的 href 属性
        $("#btn").click(function(){
            $("#aid").attr("href","http://www.cnblogs.com/linkworld");
        });

        /*
         * 添加元素
         *     append: 在选中元素的后面添加内容;
         *     preappend: 在选中元素的前面添加内容;
         *     before:换行之后,在选中元素的前面添加;
         *     after:换行之后,在选中元素的后面添加;
         */
         funtion appendText(){
             // 添加元素的三种方式: html, jQuery, DOM
             // html: text1 = "<p>内容1</p>"
             // jQuery: text2 = $("<p></p>").text("内容2");
             // DOM: text3 = document.createElement("p");
             //      text3.innerHTML = "内容3";
             $("body").append(text1,text2,text3);
         }

         // 删除元素
         // remove: 全部删除
         // empty: 将元素中的内容清空
         $("#btn").click(function(){
                $("#div").remove();
                // $("#div").empty();
         });
    });

3. JQuery 效果

  1. 隐藏/显示:hide(), show(), toggle();
  2. 淡入/淡出:fadeIn(), fadeOut(), fadeToggle(), fadeTo()
    • fadeTo(duration,opacity)
    • 设置透明度,duration, 表示动画持续时间; opaticy, 表示透明度.
  3. 滑动: slideDown(), slideToggle(), slideUp();

4.回调函数: 例如,fadeIn(duration,complete);, 其中的 complete 是在淡入动画执行完毕后,调用一次的函数.

// index.html
    <body>
        <p id="text">一段文本</p>

        <button id="btn">点击这里</p>
    </body>

// app.js
    $(document).ready({

        // 隐藏和显示
        $("#btn").click(function(){
            // 1000 表示从隐藏开始到结束一共需要 1000 毫秒
            $("#text").hide(1000); // 隐藏
            $("#text").show(1000); // 显示
        });

        // 或者使用 toggle, 点击第一次,隐藏; 点击第二次,显示
        $("#btn").click(function(){
            $("#text").toggle(1000);
        })
    });

4. JQuery AJAX

// jQuery 提供的 ajax 方法: ajax, post, get, load, getJSON, getScript
    $.ajax({
        url: 请求地址,
        type: 请求方式, 默认为 GET
        data: 请求参数,
        async:true, 是否为异步请求,
        cache: false, 是否缓存结果
        dataType: 响应的数据格式(xml,text,json)
        success: function(data){....},
        error: 出现异常后,执行的处理方式
    });

    $.post(url,{参数},function(data){}, 'json');

5. JQuery 扩展

5.1 JQuery 为开发插件提供了两个方法, 分别是:
  • jQuery.fn.extend(object): 给 jQuery 对象添加方法;
  • jQuery.extend(object): 为 jQuery 类添加新的方法;
5.2 JQuery.fn.extend(object)
  • jQuery.fn = jQuery.prototype, prototype 相当于 javascript 中的 类, jQuery 表示一个封装的
    非常好的类,而语句 $("#btn") 会生成一个 jQuery 类的实例;
  • jQuery.fn.extend(object),就是为 jQuery 类添加"成员函数", jQuery 类的实例可以使用这个"成员函数";
// 比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便 alert 当前编辑框里的内容
 $.fn.extend({
    alertWhileClick: function(){
        $(this).click(function(){
            alert($(this).val());
        });
    }
 });

 // 调用方式:
    $("#input").alertWhileClick();
5.3 JQuery.extend(object)
  • 为 jQuery 类添加类方法,可以理解为添加静态方法;
//示例
    $.extend({
        add:function(a,b){return a+b;}
    });

// 调用方式:
    $.add(3,4);  // 结果为 7

6. JQuery CSS

// index.html
    <body>
        <div></div>
    </body>

// app.js
    $(document).ready(function(){
        // 设置 div 的样式
        $("div").css({
            "100px",height:"50px",backgroundColor:"red"
        });

        // 第二种方式,加载 css 文件中的样式
        // 在 js 中需要引入该 css 文件
        $("div").addClass("style2");  // 参数为 样式名称
    });

// style2.css
    .style{
        100px;
        height:100px;
        background-color:blue;
    }

7. JQuery 的遍历和过滤

  1. 向下遍历:

    • children(可选参数):直接子元素,不包含"孙子辈"元素;
    • find(参数): 查找任意子元素,必须指定参数;

  2. 向上遍历

    • parent():只能向上遍历一层;
    • parents():向上遍历所有;
    • parentUtil():区间,遍历两个元素直接的内容;

  3. 同级遍历

    • siblings():遍历同级所有元素;
    • next(): 同级中的下一个;
    • nexeAll(): 同级中处于下面的所有元素;
    • nextUtil(): 区间;
    • prev(): 前一个;
    • preAll(): 前面所有;
    • preUntil():区间;

  4. 遍历中的过滤

    • first(): 寻找同样元素中的第一个;
    • last(): 寻找同样元素中的最后一个;
    • eq():
    • filter(): 符合要求的保留
    • not(): 取反
// index.html
    <body>
        <div>
            <p>div1</p>
        </div>
        <div>
            <p class="pclass">div2</p>
        </div>
        <div>
            <p class="pclass">div3</p>
        </div>
        <div>
            <p>div4</p>
        </div>
    </body>

// app.js
    $(document).ready(function(){

        // 只修改 div1
        $("div p").first().css("background-color","red");

        // eq(index), 指定结果中的第几个元素,从0开始
        // 修改 div2
        $("div p").eq(1).css("background-color","red");

        // 修改 div2 和 div3
        $("div p").filter(".pclass").css("background-color","red");

        // 修改 div1  和 div4
        $("div p").not(".pclass").css("background-color","red");
    });

参考资料

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/linkworld/p/7646733.html