zoukankan html css js c++ java

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 效果

隐藏/显示:hide(), show(), toggle();
淡入/淡出:fadeIn(), fadeOut(), fadeToggle(), fadeTo()
- fadeTo(duration,opacity)
- 设置透明度,duration, 表示动画持续时间; opaticy, 表示透明度.
滑动: 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 的遍历和过滤

向下遍历:
- children(可选参数):直接子元素,不包含"孙子辈"元素;
- find(参数): 查找任意子元素,必须指定参数;
向上遍历
- parent():只能向上遍历一层;
- parents():向上遍历所有;
- parentUtil():区间,遍历两个元素直接的内容;
同级遍历
- siblings():遍历同级所有元素;
- next(): 同级中的下一个;
- nexeAll(): 同级中处于下面的所有元素;
- nextUtil(): 区间;
- prev(): 前一个;
- preAll(): 前面所有;
- preUntil():区间;
遍历中的过滤
- 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");
    });

参考资料

查看全文

相关阅读:
quota磁盘配额
 lvm管理
 快照
 分区工具
 课下测试03！03！03！题目截图及解析（不完全正确）第四周--信息安全系统设计基础
 2017-2018-1 20155307《信息安全技术李冬冬》实验二——Windows口令破解
 2017-2018-1 20155301 20155307 20155339 《信息安全系统设计基础》实验一开发环境的熟悉
 2017-2018-1 20155307 《信息安全系统设计基础》第5周学习总结
 PGP的原理与使用
 2017-2018-1 20155307 《信息安全系统设计基础》第四周学习总结

原文地址：https://www.cnblogs.com/linkworld/p/7646733.html

JQuery 入门

1. JQuery 库概述

1. JQuery 库包含的功能

2. JQuery 语法

2.1 $(selector).action()

2.2 noConfilct

3. JQuery 选择器

4. JQuery 事件

4.1 绑定事件和解除绑定事件

4.2 事件的目标和冒泡

4.3 自定义事件

2. JQuery DOM 操作

3. JQuery 效果

4. JQuery AJAX

5. JQuery 扩展

5.1 JQuery 为开发插件提供了两个方法, 分别是:

5.2 JQuery.fn.extend(object)

5.3 JQuery.extend(object)

6. JQuery CSS

7. JQuery 的遍历和过滤

2.1 `$(selector).action()`