JQuery初步学习之入门（一）

最新推荐文章于 2024-11-17 21:01:02 发布

挑战不可

最新推荐文章于 2024-11-17 21:01:02 发布

阅读量212

点赞数

分类专栏： JQuery 文章标签： jquery c#

本文链接：https://blog.csdn.net/qq_42612120/article/details/107923529

版权

JQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.简介

当前应用非常广泛的一个 js 类库，封装了大量方法，可以快速完成常用功能，在使用前需要先引入jquery.js 文件，才可以使用这个库中的成员。$对象是 jquery 对象的简写方式，一般都使用 $ 而不书写 jquery ，简便快捷。官方网址：http://jquery.com/。它很好地解决了浏览器兼容问题，体积小，使用方便（Write Less,Do More ）。链式编程，隐式迭代，插件丰富，开源，免费

注意：

只是为常用操作提供了方法，并不能实现所有操作，如果没有实现的操作，还需要手写js

主要功能：

对象处理、属性、css、、选择器、筛选、文档处理、事件、效果、ajax、工具

2.基本选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>01基本选择器</title>
    <script src="scripts/jquery-1.7.1.min.js"></script>
    <script>
        onload = function () {
            //jquery->$
            //jquery对象：本质就是一个dom的一个数组
            //js对象
            //dom对象：操作html的对象
            //通过jquery选择器得到的jquery对象，可以使用jquery提供的方法
            $('btnShow');

        };
    </script>

</head>
<body>
    <input type="button" id="btnShow" value="显示" />
</body>
</html>

3.属性操作

用于对标签元素的属性进行操作

获取属性值： attr ( 属性 )

设置属性值： attr ( 属性，值 )

如果是操作标签的值可以简写为： text() ， html()

如果是操作控件的值可以简写为： val ()

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>02属性操作</title>
    <script src="scripts/jquery-1.7.1.min.js"></script>
</head>
<body>
    <input type="button" id="btnShow" value="显示" />
    <img src="images/idle.png" />
    <script>
                //操作属性的值
                //获取属性的值：只写第一个参数，属性的名字
            //alert($('#btnShow').attr('value'));


        //设置属性的值：写2个参数，第一个是属性名，第二个是值
        //$('#btnShow').attr('value', 'Hello World');

         //prop表示html的原有属性，attr而表示扩展属性
        //如：img的src操作使用prop，而href操作使用attr
        //一般使用attr因为各种情况都适用
        //$('img').attr('href', 'abc');

           //移除属性
        $('#btnShow').removeAttr('value');


    </script>
</body>
</html>

4.事件

事件注册处理程序

• 方式一： bind( 事件类型 , 处理函数 )

• 方式二：事件类型 ( 处理函数 )

• 事件类型与 dom 的相同，去掉 on 前缀

卸载事件处理程序

• unbind();// 移除所有事件处理程序

• unbind(‘click’);// 移除所有的 click 事件处理程序

• unbind('click', 函数名称 );// 移除 click 事件的指定名称的处理函数，这种方法无法移除匿名函数

说明： dom 事件不支持多播，而 jquery 事件支持多播

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    <title>03事件</title>
    <script src="scripts/jquery-1.7.1.min.js"></script>
</head>
<body>
    <input type="button" id="btnShow" value="显示" />
    <script>
        //对于value一种属性的简写操作
       $('#btnShow').attr('value');
       // $('#btnShow').val();

         //为按钮绑定点击事件
        //$('#btnShow').click(function() {
        //    alert(this.value);//this是dom对象，不能调用jquery的成员
        //});

         //dom的事件注册:一个事件只能注册一个处理函数，不支持多播
        //document.getElementById('btnShow').onclick = function() {
        //    alert(1);
        //};
        //document.getElementById('btnShow').onclick += function() {
        //    alert(2);
        //};

        //jquery事件注册：支持多播，一个事件可以指定多个处理函数
        $('#btnShow').click(function () {
            alert(1);
        });
        $('#btnShow').click(function () {
            alert(2);
        });
                               
    </script>
</body>
</html>

5.加载事件

js 方式： window.onload = fn ;

jq方式： $(document).ready( fn );-> 可简写为 $( fn );

区别一：window.onload 表示页面所有资源加载完成后才会被触发执行； $( fn ) 表示只要文档结构加载完成后就会执行，即所有标签加载完成

区别二：window.onload 重复赋值会被覆盖，即不支持多播委托； $( fn ) 可以添加多个事件处理程序，即在 jq 中定义的事件支持多播

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>04加载就绪</title>
    <script src="scripts/jquery-1.7.1.min.js"></script>
    <script>
                //为window的onload事件注册处理函数，表示页面加载完成后触发执行
                //标签加载完成，并且标签指定的资源也加载完成
                //onload = function () {
                //};

                //表示加载完成后执行此代码:dom就绪，指标签加载完成，
                //这时，标签指定的资源可能还没有加载完成
        //$(document).ready(fun);简写如下：
        $(function () {
            $('#btnShow').click(function () {
                alert(1);
            });
        });

    </script>

</head>
<body>
    <input type="button" id="btnShow" value="显示" />
</body>
</html>

6.DOM与JQuery转换

为了使用 jq 中的方法，需要将 dom 对象转换成 jq 对象

• q 并没有完成所有操作的封装，需要将 jq 对象转换成 dom 对象，再调用 dom 方法

dom -> jq ： $( dom 对象名称 )

jq -> dom ： jq 对象 .get(index) 或 jq 对象 [index]

对于 dom 对象，有属性、事件成员

对于 jq 对象，只有方法成员

  <script src="scripts/jquery-1.7.1.min.js"></script>
    <script>
        $(function () {
            //将jquery对象转换成dom对象：通过[下标]的形式返回dom对象
            //通过jquery的选择器得到的数组，才是jquery对象，才可以调用jquery的成员
            //将dom对象转换成jquery对象：$(dom对象)
            $('#btnShow').click(function() {
                $('p').text('都是P');//隐式迭代
                $(this).val('abc');

              //  var temp = [1, 2, 3];
            });
        });
    </script>
</head>
<body>
    <input type="button" id="btnShow" value="都是P" />
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <p>p4</p>
    <p>p5</p>
</body>

7.文档处理

创建元素： $(' 标签字符串 ')

添加元素：

• append() ， appendTo () ：追加子元素

• prepend() ， prependTo () ：前加子元素

• after() ， insertAfter () ：后加兄弟元素

• before() ， insertBefore () ：前加兄弟元素

动态删除元素

• empty() ：清空子元素

remove(selector)：删除当前元素，无参表示删除全部，有参表示删除符合条件的元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>11文档操作</title>
    <script src="scripts/jquery-1.7.1.min.js"></script>
    <script>
        $(function() {
            $('#btnAppend').click(function () {
                //动态创建jquery对象
                var zhh = $('<b>Zhh</b>');
                //追加
                $('#divContainer').append(zhh);
            });

            $('#btnAppendTo').click(function () {
                //追加到
                $('<b>拍电影</b>').appendTo($('#divContainer'));
            });

            $('#btnEmpty').click(function () {
                //清空所有子元素
                $('#divContainer').empty();
            });

            $('#btnRemove').click(function() {
                //$('#divContainer').remove();
                $('<span style="color:red">sadkfjlsad</span>').insertBefore('#divContainer');
            });
        });
    </script>

</head>
<body>
    <input type="button" id="btnAppend" value="Append" />
    <input type="button" id="btnAppendTo" value="AppendTo" />
    <input type="button" id="btnEmpty" value="Empty" />
    <input type="button" id="btnRemove" value="Remove" />
    <div id="divContainer">asdfsdaf</div>
</body>
</html>

8.层次选择器

符号一：空格，表示取子元素，无论是几层的子元素，都会被选择到

符号二：大于号 > ，表示直接子元素，不包含后代子元素

符号三：加号 + ，表示之后紧临的一个同级元素

符号三：波浪号 ~ ，表示之后的所有同级元素

next(), prev (), nextAll (), prevAll (),siblings(),parent(),children()

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>13层级选择器</title>
    <script src="scripts/jquery-1.7.1.min.js"></script>
    <script>
        $(function () {
            //空格表示查找所有子级
            $('#d1 div');
        });
    </script>

</head>
<body>
    <div id="d1">
        <div id="d11"></div>
        <div id="d12">
            <div id="d121"></div>
            <div id="d122"></div>
        </div>
        <div id="d13"></div>
    </div>
    <div id="d2"></div>
    <div id="d3">
        <div id="d31">
            <div id="d311"></div>
            <div id="d312"></div>
            <div id="d313"></div>
        </div>
    </div>
</body>
</html>

9.样式与操作类

样式操作： css () ，按照键值对的格式对样式进行设置

如果只设置一个样式，则可直接赋值，如： css (' color','red ');

如果设置多个样式，则使用 css ({ 键 1 ：值 1 ，键 2 ：值 2}) 的格式

操作后生成的代码，都是对标签的 style 属性进行设置

类操作： addClass,hasClass,removeClass,toggleClass

也可以使用属性方法进行操作： attr ('class',' className ');

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>14样式</title>
    <script src="scripts/jquery-1.7.1.min.js"></script>
    <script>
        $(function () {
            //设置样式
            //$('#btnShow').css('background-color', 'red');
            //设置多个样式
            $('#btnShow').css({
                'color': 'white',
                'background-color': 'blue',
                'font-size': '20px'
            });
        });
    </script>
</head>
<body>
    <input type="button" id="btnShow" value="显示" />
</body>
</html>

10.过滤选择器

用于对选择结果执行进一步过滤
:first、:last、:eq()、:gt()、:lt()、:not(选择器)、:even偶数、:odd奇数
说明1：索引下标从0开始
说明2：以下标判断奇偶，下标从0开始
标题的快速获取
普通方法：$('h1,h2,h3...h6')
快捷方法：$(':header')

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>18过滤选择器</title>
    <script src="scripts/jquery-1.7.1.min.js"></script>
    <script>
        $(function() {
            $('div:first');
        });
    </script>
</head>
<body>
    <div id="d1">
        <div id="d11"></div>
        <div id="d12">
            <div id="d121"></div>
            <div id="d122"></div>
        </div>
        <div id="d13"></div>
    </div>
    <div id="d2"></div>
    <div id="d3">
        <div id="d31">
            <div id="d311"></div>
            <div id="d312"></div>
            <div id="d313"></div>
        </div>
    </div>
</body>
</html>