jQuery代码笔记

jQuery

对象类型

1.HTML dom对象，常规的对象

2.jQuery对象

两种对象的方法和属性不一样，使用要区分，两种对象可以互转

jQuery->HTML( jQuery对象[0])

HTML->jQuery( $(HTML对象) )

如果你对HTML对象熟悉，可以用jQuery选择上元素后转换为HTML

开始使用

(document)document本身是HTML对象，用(document)document本身是HTML对象，用()括起来就变成了jQuery对象

$(document).ready(function(){
  // 在这里写你的代码...
});

以上代码类似于

window.onload=function(){
  // 在这里写你的代码...
}

jQuery初始化简写为:

$(function(){
   // 在这里写你的代码...
})
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-3.6.0.js" type="text/javascript"></script>
    <script>
        $(function () {
            alert($('body')[0])
            // jQuery对象转HTML对象，并使用HTML对象的属性和方法来操作
            $('body')[0].style.border='1px solid red'
            $('body').css('height','100px')
            //document.getElementsByTagName("body")[0]
            //document.body
        });
    </script>
</head>
<body>

</body>
</html>

选择器

基本

<script>
    $(function () {
        // id选择器
        $('#div1').css('border', '1px solid red');
        // 类选择器
        $('.c1').css('border', '1px dotted blue');
        // 标签选择器
        $('div').css('color', 'green');
        // 全选中
        $('*').css('font-size', '30px');
        // 组合选择器
        $('#div1,.c1,div').css({'height':'150px'});
    });
</script>

层级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-3.6.0.js"></script>
    <script>
        $(function () {
            // 包含选择器
            $('body div').css('color', 'red');//div1, div2 ,div3 ,div4
            // 父子选择器
            $('body>div').css('border', '1px solid blue');//div1,div3,div4
            // 匹配所有紧接在 prev 元素后的 next 元素
            $('#div1+div').css('height', '50px');//div3
            // 匹配 prev 元素之后的所有 siblings(兄弟姐妹) 元素
            $('#div1~div').css({'font-weight': 'bold', 'font-style': 'italic', 'color': 'green'});// div3,div4
        })
    </script>
</head>
<body>
    <div id="div1">
        div1
        <div>
            div2
        </div>
    </div>
    <div>
        div3
    </div>
    <div>
        div4
    </div>
</body>
</html>

筛选器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-3.6.0.js"></script>
    <style>
        table {
            width: 50vw;
            /*// 相邻的线条合二为一*/
            border-collapse: collapse;
        }
        td {
            border: 1px solid gray;
        }
    </style>
    <script>
        $(function () {
            // 上下两种写法都可
            $('tr:first').css('color', 'blue');
            // $('tr').first().css('color', 'red');
            $('tr:last').css('color', 'green');
            // 匹配所有索引值为奇数的元素，从 0 开始计数
            $('tr:odd').css('background-color', 'skyblue');
            // 匹配所有索引值为偶数的元素，从 0 开始计数
            $('tr:even').css('height', '40px');
            // 匹配一个给定索引值的元素
            $('td:eq(1)').css('background-color', 'orange');
            // 匹配所有大于给定索引值的元素
            $('td:gt(1)').css('background-color', 'pink');
            // 后面会覆盖前面的数值
            // $('td:lt(22)').css('background-color','yellow')
        })
    </script>
</head>
<body>
    <table>
        <tr>
            <td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
        </tr>
        <tr>
            <td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
        </tr>
        <tr>
            <td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
        </tr>
        <tr>
            <td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
        </tr>
        <tr>
            <td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
        </tr>
    </table>
</body>
</html>

内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-3.6.0.js"></script>
    <style>
        .c1 {
            color: red;
        }
    </style>
    <script>
        $(function () {
            // 匹配包含给定文本的元素
            $('td:contains("0")').css('background-color', 'red');
            // 匹配所有不包含子元素或者文本的空元素
            $('td:empty').css('background-color', 'yellow');
            // 匹配含有选择器所匹配的元素的元素
            // 给所有包含 span 元素的 td 元素添加一个 c1 类
            $('td:has("span")').addClass('c1');
            // removeClass 是对td的操作,不是b的
            $('td:has("b")').removeClass('c1');
            
            $('div:empty').css('height', '10px').css('border', '1px solid red');
            // 匹配含有子元素或者文本的元素,与empty选择器正好相反
            $('div:parent').css('height', '10px').css('border', '1px solid blue');

        })
    </script>
</head>
<body>
    <div></div>
    <div>1</div>
    <div><span></span></div>
    <table>
        <tr>
            <td><span>span1</span></td><td>1</td><td>1</td><td>1</td><td></td>
        </tr>
        <tr>
            <td>1</td><td>0</td><td>1</td><td>1</td><td class="c1"><b>has b</b></td>
        </tr>
        <tr>
            <td>1</td><td>1</td><td>1</td><td>0</td><td>1</td>
        </tr>
        <tr>
            <td></td><td>1</td><td>1</td><td>1</td><td>1</td>
        </tr>
        <tr>
            <td>1</td><td>0</td><td>1</td><td>1</td><td></td>
        </tr>
    </table>
</body>
</html>

可见性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span,div {
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
    </style>
    <script src="../jquery-3.6.0.js"></script>
    <script>
        $(function () {
            $('span:last').css('display', 'block');
            // 找到hidden的元素,将其显示出来
            // 匹配所有不可见元素，或者type为hidden的元素
            $('div:hidden').css('display', 'block');
            // 找到visible的元素,将其设置为显示不出来
            // 匹配所有的可见元素
            $('div:visible').css('display', 'none');
        })
    </script>
</head>
<body>
    <div style="display: none">div1</div>
    <div style="display: block">div2</div>
    <span>span1</span><span>span2</span>
</body>
</html>

表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-3.6.0.js"></script>
    <script>
        $(function () {
            // 匹配所有 input, textarea, select 和 button 元素
            // alert($(':input').length)
            $(':input:first').val('input1')
            $(':input:eq(1)').val('123')
            $(':input:eq(2)').val('input btn1');

            $(':input:eq(3)').click(function () {
                alert(this);
            })
            $(':input:eq(4)').append("<option value='one'>1</option>")

            $(':input:last').val("qweqweqweqweqw");

            alert($(':text').length);
            alert($(':password').length);
            alert($(':button').length);
        })
    </script>
</head>
<body>
<form>
    <input><input type="password"><input type="button">
    <button>btn1</button>
    <select name=""></select>
    <textarea name="" cols="30" rows="10"></textarea>
</form>
<form>
    <input><input type="password"><input type="button">
    <button>btn1</button>
    <select name=""></select>
    <textarea name="" cols="30" rows="10"></textarea>
</form>
</body>
</html>

属性

https://www.cnblogs.com/guanghe/p/10592727.html

attr需要在html中写出来，才可以，prop不需要在html中写出来。

prop处理本身自带的属性（固有属性），attr可以处理我们自定义的属性。

each

处理数组或者对象

事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-3.6.0.js"></script>
    <script>
        $(function () {
            // 对新加入的元素有效果
            /*$('body').bind('click', 'button', function () {
                alert(this);
            });*/
            $('body').on('click', 'button', function () {
                alert('Hello');
            });
            // 新加的元素无效果
            /*$('body button').bind('click', function () {
                alert(this);
            });*/
            // 无效果
            /*$('button').bind('click', function () {
                alert(this);
            });*/
            // 新加的元素无效果
            /*$('button').click(function () {
                alert(this);
            });*/
            let btn = document.createElement("button");
            btn.innerText = 'btn1';
            document.body.append(btn);
        })
    </script>
</head>
<body>

</body>
</html>

posted @ 2021-12-01 20:18 大聪明_小蓝阅读(238) 评论(0) 收藏举报

刷新页面返回顶部

Loading

Wjg's blog

jQuery代码笔记

jQuery

对象类型

开始使用

选择器

基本

层级

内容

可见性

表单

属性

each

事件

公告