将课堂未演示的常用选择器，自己举例进行联系；演示DOM对象与jQuery对象之间的转换方式（熟悉jQuery的选择器并使用；掌握jQuery对象和DOM对象的互相转换）2019年5月20日20点 - PHP

Home > List of blog posts > 将课堂未演示的常用选择器，自己举例进行联系；演示DOM对象与jQuery对象之间的转换方式（熟悉jQuery的选择器并使用；掌握jQuery对象和DOM对象的互相转换）2019年5月20日20点

Blogger Information

Blog 49

fans 1

comment 0

visits 45187

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器演示</title>
</head>
<body>
<div>
    <p>西门大官人</p>
    <p>金莲小妹妹</p>
    <p>朱老师</p>

</div>
<div>
    <h3>朱老师</h3>
</div>
<div></div>


<ul>
    <li>item1</li>
    <li class="red">item2</li>
    <li>item3</li>
    <li class="green">item4</li>
    <li>item5</li>
</ul>


<form action="" onsubmit="return false">
    <p><label>帐号:<input type="text"></label></p>
    <p><label>密码:<input type="password" disabled></label></p>
    <p><label>记住<input type="checkbox" checked></label></p>
    <p>
        <label>语言:
            <select name="lang">
                <option value="cn">中文</option>
                <option value="en" selected>英文</option>
                <option value="jp">日文</option>
            </select>
        </label>
    </p>
    <p><label>备注:<textarea name=""cols="30" rows="10" disabled></textarea></label></p>
    <p><button type="submit">提交</button></p>

</form>


<script src="static/js/jquery-3.4.1.js"></script>

<script>
    //层级选择器测试
    console.log($('div p'));//`ancestor descendant`: 后代选择器, 中间用空格分隔

    //基本筛选器
    console.log($('div:first'));//选中第一个div中的第一元素

    console.log($('div:last'));//选中div中的第最后一个元素


    //内容筛选器
    console.log($('p:contains(朱老师)'));//获取文本内容为朱老师的p标签

    console.log($('div:parent'));//获取含有子元素的div：两个div

    //内容选择器
    console.log($('p[朱老师]'));

    //可见性选择器
    console.log($(':visible'));//显示所有可见的元素

    //属性选择器
    console.log($('li[class="green"]'));//选中ul内class为green的li

    //子元素选择器
    console.log($('ul :nth-child(2)'));//选中ul中第二个li


    //表单选择器
    $(':password').css('background-color', '#888');//将password所匹配的元素背景颜色设置成灰色


    //控件状态选择器
   $(':disabled').attr('disabled', false);//将不被编辑的元素改为可以编辑

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

运行实例 »

点击 "运行实例" 按钮查看在线实例

最终效果：

选择器.png

演示DOM对象与jQuery对象之间的转换方式：

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示DOM对象与jQuery对象之间的转换方式</title>
</head>
<body>
<ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>

<script src="static/js/jquery-3.4.1.js"></script>

<script>
    // 原生JavaScript
    //原生JavaScript改列表内一个li的样式方法1
    var ul = document.getElementsByTagName('ul').item(0);//获取ul
    var li3 = document.getElementsByTagName('li').item(2);//获取列表中的第三个li
    li3.style.color = 'red';//给li定义样式

    //原生JavaScript改列表内一个li的样式方法2
    document.querySelector('ul li:nth-of-type(3)').style.color = 'blue';

    //用jQuery的方法
    //先将DOM对象转为Jquery对象
    //方法1
    $('ul li:nth-of-type(3)').css('color', 'red');//重新定义第三个li的样式

    //jQuery对象转为DOM对象
    var lis = $('li');//获取jQuery对象中的所有li
    console.log(lis);//控制台中查看是否获取成功

    //lis：实际上是一个类数组对象
    console.log(lis[4] instanceof jQuery);//查看最后一个li是否为jQuery对象，正常返回值应该为false
    console.log(lis[4] instanceof Object);//查看最后一个li是否为DOM对象，正常返回值应该为true

    //方法2：$().get(n);
    console.log(lis.get());//获取所有li，为类数组对象


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

运行实例 »

点击 "运行实例" 按钮查看在线实例

控制台的输出：

jQuery转DOM.png

Correction status：Uncorrected

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

520小实验

2019-05-20 22:44:59

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

实例

实例