jQuery常用方法

jQuery是一个快速，简洁的JavaScript库，座右铭：少写，多做。
1. $()的四种类型参数的应用场景实例
$(筛选器) : 获取dom对象,相当于document.querySelectorAll
$(dom对象) : 把dom对象转化为jQuery对象
$(html文本) : 创建dom元素,返回为jQuery对象
$(callback) :当dom树加载完成后的回调
<body>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
    </ul>
    <script>
        // 1. $(筛选器) : 获取dom对象,相当于document.querySelectorAll
        console.log($('ul'));
        // 2. $(dom对象) : 把dom对象转化为jQuery对象
        console.log($(document.body) instanceof jQuery);
        // 3. $(html文本) : 创建dom元素,返回为jQuery对象
        $("<h2>Hello World</h2>").insertBefore($('ul'));
        // 4. $(callback) :当dom树加载完成后的回调
        $(() => $('h3').css('color', 'red'));
    </script>
    <h3>bye,bye</h3>
</body>
2. jQuery常用方法
attr(name, value) : 属性操作,单参数时是获取 同比:getAttribute, 双参数是设置 同比: setAttribute,设置多个属性时可使用对象传参
removeAttr() : 移除属性 同比: removeAttribute
<body>
    <ul name='lists' id="ul1" style="border: 1px solid #000;">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
    </ul>
</body>
<script>
    const ul = $('ul');
    const li = $('li');
    // 获得属性
    console.log(ul.attr('name'));
    // 设置属性
    ul.attr('name', 'test');
    console.log(ul.attr('name'));
    // 多属性设置
    ul.attr({ 'name': 'test2', 'id': '1', 'data-index': 'shop' });
    console.log(ul.attr('id'));
    // 删除属性
    ul.removeAttr('id');
    console.log(ul.attr('id'));
</script>
css(name, value) : 样式操作,单参数时是获取 同比:style, 双参数是设置 同比: style.name = value,设置多个属性时可使用对象传参
<body>
    <ul name='lists' id="ul1" style="border: 1px solid #000; color: lightgreen;">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
    </ul>
</body>
<script>
    const ul = $('ul');
    // 获取样式
    console.log(ul.css('color'));
    // 设置样式
    $('li:nth-of-type(1)').css('backgroundColor', 'yellow');
    // 设置多个样式
    $('li:nth-of-type(2)').css({ 'font-size': '20', 'backgroundColor': 'red' });
</script>
addClass(name) : 添加样式类 同比:classlist.add
removeClass(name) : 删除样式类 同比:classlist.remove
hasClass(name) : 判断是否有某个样式类 同比:classlist.contains
toggleClass(name) : 切换样式类 同比:classlist.toggle
<style>
    .error {
        background-color: red;
    }
    .warning {
        background-color: orange;
    }
</style>
<body>
    <ul>
        <li>item1</li>
        <li class=" warning">item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
    </ul>
</body>
<script>
    // 添加样式类
    $('li:nth-of-type(1)').addClass('error');
    // 删除样式类
    $('li:nth-of-type(2)').removeClass('warning');
    // 判断是否有类
    console.log($('li:nth-of-type(2)').hasClass('warning'));;
    // 切换样式类
    $('li:nth-of-type(2)').on('click', function () {
        $(this).toggleClass('warning');
    });
</script>
val() : 获取或者设置表单元素的value属性的值,无参获取, 有参数是设置
html() : html文本处理 无参获取, 有参数是设置 同比: innerHTML
text() : 文本处理 无参获取, 有参数是设置 同比:textContent
<body>
    <form action="">
        <label for="" id="userlab">用户名:</label>
        <input type="text" id="username">
        <label for="" id="pwdlab">密码:</label>
        <input type="password" id="password">
        <div id='btn'></div>
    </form>
</body>
<script>
    // 设置value
    $('#username').val('php.com');
    // 获得value
    console.log($('#username').val());
    // 获得text
    console.log($('#userlab').text());
    // 设置text
    $('#pwdlab').text('password');
    // 设置html文本
    $('#btn').html('<Button type="button">提交在此</Button>');
</script>
3. 将jQuery对象转js对象的方法
因为jQuery的限制性,无法完全替换js的一些操作或方法.需要将jQuery对象转为js对象.
jQuery对象转换成DOM对象：
jQuery对象.get(索引值);
jQuery对象[索引值]
jQuery对象是包装集(集合)，从集合中取数据可以使用索引的方式
DOM对象转换成jQuery对象：
$(DOM对象) 只有这一种方法;
<style>
    .cur {
        color: lightcoral;
    }
    .pre {
        color: lightgreen;
    }
</style>
<body>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
    </ul>
    <script>
        // 同比于jQuery的addClass
        $('li')[3].classList.add('cur');
        $('li:nth-of-type(2)').addClass('pre');
    </script>
</body>
相关文章
