JQuery学习(一)

最新推荐文章于 2024-08-09 02:16:38 发布

Alex十年

最新推荐文章于 2024-08-09 02:16:38 发布

阅读量260

点赞数

分类专栏： jQuery知识总结

jQuery知识总结专栏收录该内容

9 篇文章 0 订阅

订阅专栏

注意：首先是要引入jQuery文件
一、DOM 对象与jQuery对象相互转换
jQuery对象不能使用DOM对象的方法，DOM对象也不能够使用jQuery对象的方法。

<body>
    <div id="div1">我是dom对象</div>
    <div id="div2">我是jQuery对象</div>
    <script>
         //dom对象只能使用dom方法
        alert(document.getElementById("div1").innerHTML);
        //jQuery对象只能使用jQuery方法
        alert($("#div2").html());
    </script>
</body>

jQuery对象就是把dom对象包装起来形成jQuery对象，用$()把dom对象包装起来。
下面两种方法是相同的，通常使用后面的方法

$(document.getElementById("div1"))===$("#div1")

jQuery对象转换成DOM对象,两种方法
1、jQuery对象是一个数组对象，可以通过[index]的方法来获得DOM对象$("#div1")[0]
2、使用jQuery对象中的方法get（index）的方法来得到相应的对象$("#div1").get(0),这个不常用
二、jQuery的选择器
jq选择器是jq为我们提供的一组方法，更加方便的获取到页面中的元素，其返回的是jq对象。
选择器是jQuery的根基，在jQuery中，对于事件的处理，遍历DOM和Ajax操作都依赖于选择器。
jQuery选择器的优点：简洁的写法和完善的事件处理机制。
检查错误：
1）、当你写了一个jQuery，但是没有反应，可以使用alert（$）;如果能够打印出来，表明其中包含了jQuery。没有的话表示引入错误。
2）、如果还有错误，可能是其中包含了多个框架，并且有两家以上包含了 $符号。这时需要有一个让步。`alert(jQuery）；`此时可以使用jQuery，他和$ 符号相同，是$符号的别名

隔行变色案例，理解jq对象和dom对象

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
    </head>
    <body>
        <ul>
            <li>我是第1行</li>
            <li>我是第2行</li>
            <li>我是第3行</li>
            <li>我是第4行</li>
            <li>我是第5行</li>
            <li>我是第6行</li>
            <li>我是第7行</li>
        </ul>
        <script>
            var lis = $('li');
            for(var i=0;i<lis.length;i++){

                //此时不会报错，因为lis是jq对象，但是lis[i]是取出来的，已经成为DOM对象

                if(i%2==0){
                    lis[i].style.backgroundColor='blue';
                }else{
                    lis[i].style.backgroundColor='pink';
                }

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

1、基础选择器

#id,  ele,   .class,   *,   组合选择器

代码演示

<body>
    <h1 id="aa">aaaaaaaaaa</h1>
    <h2 id="bb">bbbbbbbbbbb</h2>
    <h1 class="cc">cccccccccc</h1>
    <h1>ddddddddddddd</h1>
    <p>eeeeeeeeeeeeeeeee</p>
    <p>eeeeeeeeeeeeeeeee</p>
    <script>
       // $("#bb").css({'color':'blue'});b变蓝色
       // $("h1").css({'color':'blue'});a,c,d蓝色
       // $(".cc").css({'color':'blue'});c蓝色
       // $("*").css({'color':'blue'});所有蓝色
       $("h1,p").css({'color':'blue'});a,c,d,c蓝色
    </script>
</body>

2、层级选择器

ancestor descendant 祖先空格后代
parent > child 父>子
prev+next 前一个后一个（兄弟关系），只有后面同级的第一个改变
pre~siblings  前一个后面所有（兄弟关系）后面所有同级的都改变

代码演示

<body>
<div id="div1">
    <h1 id="aa">aaaaaaaaaa</h1>
    <h1 id="bb">bbbbbbbbbbb</h1>
    <div id="div11">
         <h1>eeeeeeeeeeeeeeeee</h1>
         <h1>eeeeeeeeeeeeeeeee</h1>
    </div>
</div>
<h1>fffffffffffffff</h1>
<h1>ggggggggggggggg</h1>
    <script>
      // $("#div1 h1").css({'color':'blue'});//所有均为蓝色
      // $("#div1>h1").css({'color':'blue'});//a,b为蓝色
      // $("#div1+h1").css({'color':'blue'});//f为蓝色
      $("#div1~h1").css({'color':'blue'});//f,g均为蓝色
    </script>
</body>

3、基本选择器（：就代表修饰前面的东西的，even偶数，odd奇数，但是是默认从0开始）

:first   :last  :not()   :even偶数   :odd奇数   :eq()等于    :gt()大于    :lt()小于

代码演示

<body>
<h1>00001</h1>
<h1>00002</h1>
<h1>00003</h1>
<h1>00004</h1>
<h1>00005</h1>
    <script>
    //  $("h1:first").css({'color':'blue'});//00001为蓝色
    //  $("h1:last").css({'color':'blue'});//00005为蓝色
    //  $("h1:not(:first)").css({'color':'blue'});//除了00001，其他均为蓝色
    //  $('h1:even').css({'color':'blue'});//偶数项为蓝色,即1,3,5，因为计算机是从0开始的
    //  $('h1:odd').css({'color':'blue'});//奇数项为蓝色，即2,4,6
    //  $('h1:eq(2)').css({'color':'blue'});//00003为蓝色
    //  $('h1:gt(2)').css({'color':'blue'});//00004,000005为蓝色
      $('h1:lt(2)').css({'color':'blue'});//00001,000002为蓝色
    </script>
</body>

4、内容选择器

has 主要是找上面一层   parent匹配含有字标签或者文本的元素，空格，回车换行也算文本    empty

代码演示

<div>
        <h1>aaaaaaaaaa</h1>
        <h1>aaaaaaaaaa</h1>
    </div>
    <div>
        <p>22222222</p>
        <p>22222222</p>
    </div>
    <script>
        $('div:has(h1)').css({'color':'blue'});//其实找的是div，只是字体样式会继承，所以h1变成蓝色
    </script>

<body>
        <h1>aaaaaaaaaa</h1>
        <h1>aaaaaaaaaa</h1>
        <h1></h1>
    <script>
        //找到空的h1赋值xxxxxx，并且加样式蓝色
        $('h1:empty').html('xxxxxxxxxxxx').css({'color':'blue'});    
        //找到非空的变成蓝色
        $('h1:not(empty)').css({'color':'blue'});    
    </script>
</body>

<body>
        <h1>aaaaaaaaaa</h1>
        <h1></h1>
    <script>
        //当你在浏览器进行检查时会发现第一个h1中属性多了color，而第二个h1没有
        $('h1:parent').css({'color':'blue'});
    </script>
</body>

5、属性选择器

[name]    [name=user]    [name!=user]   [name^user] name以user开头的     [name$user]name以user结尾的      [name*=er]name中含有er的      [name=user][age]同时含有的

<body>
        <h1 name ="user">aaaaaaaaaa</h1>
        <h1 name ="user" age="10">bbbbbbbb</h1>
    <script>
        //同时含有name和age属性的将被选中
        $('[name][age]').css({'color':'blue'});
    </script>
</body>

6、子元素选择器

nth-child第几个子元素     first-child第一个子元素     last-child最后一个子元素       only-child只含有一个子元素的，找的是这个子元素

<body>
        <div id="div1">
            <h1>aaaaaaaaaaaaa</h1>
            <h1>aaaaaaaaaaaaa</h1>
            <h1>aaaaaaaaaaaaa</h1>
        </div>
        <div id="div2">
            <h1>aaaaaaaaaaaaa</h1>
            <h1>aaaaaaaaaaaaa</h1>
            <h1>aaaaaaaaaaaaa</h1>
        </div>
        <div>
            <h2>vvvvvvvvvvvvvvvvvv</h2>
        </div>
        <div>
            <h2>vvvvvvvvvvvvvvvvvv</h2>
            <h3>bbbbbbbbbbbbbbbbbb</h3>
        </div>
    <script>
        //找到第一个div中的第一个h1
       // $('#div1 h1:first').css({'color':'blue'});
        //找到所有div中的第一个h1
       // $('div h1:first').css({'color':'blue'});
        //找到每个div中的第一个h1
        //$('div h1:first-child').css({'color':'blue'});
        //找到每个div中的最后一个h1
        //$('div h1:last-child').css({'color':'blue'});
        //找到每个div中的第二个子元素,这个的下标是从1开始
        //$('div h1:nth-child(2)').css({'color':'blue'});
        //找到div里仅有的那个h2
        $('div h2:only-child').css({'color':'blue'});
    </script>
</body>

7、表单选择器

:input   :text   :password   :radio   :checkbox    :submit   :resert   :button   :file   :hidden

在写代码的时候要注意符号，尤其是$('')

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有关jQuery</title>
    <style>
        .error{
            color: red;
            font-weight: bold;
            display: none;
        }
    </style>
    <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>

</head>
<body>
    <form action="mag.php" method="post">
        <p>用户名：</p>
        <p>
            <input type="text" name="username" class="auth">
            <span class="error">用户名至少6位</span>
        </p>

        <p>密码：</p>
        <p>
            <input type="text" name="password" class="auth">
            <span class="error">密码至少8位</span>
        </p>

        <p>确认密码：</p>
        <p>
            <input type="text" name="repassword" class="auth">
            <span class="error">两次密码不一致</span>
        </p>
        <p><input type="submit" value="OK"></p>
    </form>

    <script>
        //表单验证
        //data() 方法向被选元素附加数据，或者从被选元素获取数据。
        //因为没有办法判断是否全部正确，所以给每一个input设一个标记，首先错误时标记都是0，$(this).data('s','0');正确时为1 ，$(this).data('s','1');
        //当加一起为3时则说明验证全部都是正确的，所以可以进行提交

        //分别找到每个input,blur就是失去焦点
        $('input[name=username]').blur(function () {
            //获取输入的值
            val = this.value;
            if(val.length<6){
                //如果验证是错误的，则还是为0
                $(this).data('s','0');
                //首先span是隐藏的，需要在之前设置
                //找到span让其显示出来，即是input的下一个,并让其显示出来
                $(this).next().show();
            }else{
                //如果验证是正确的，则为1，最后三个一起是3，则说明所有的都正确，则可以提交
                $(this).data('s','1');
                //如果长度大于6位，则让其隐藏起来
                $(this).next().hide();
            }
        });

        $('input[name=password]').blur(function () {
            val = this.value;
            if(val.length<8){
                $(this).data('s','0');
                $(this).next().show();
            }else{
                $(this).data('s','1');
                $(this).next().hide();
            }
        });

        $('input[name=repassword]').blur(function () {
            //.val()方法是获取他的值
            val1 = $('input[name=password]').val();
            val2 = this.value;
            if(val2!=val1){
                $(this).data('s','0');
                $(this).next().show();
            }else{
                $(this).data('s','1');
                $(this).next().hide();
            }
        });
        $('form').submit(function () {
            //让class为auth的input失去焦点，此时则会触发上面的验证
            $('input.auth').blur();
            //定义一个变量进行收集之前做的标记
            tot = 0;
            $('input.auth').each(function () {
                tot+=$(this).data('s');
            });
            //如果不等于3表示有错误，被阻断，提交不过去，
            if(tot != 3){
                return false;
            }
        });

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