JQuery节点与选择器使用

最新推荐文章于 2023-03-17 15:20:14 发布

刘远山

最新推荐文章于 2023-03-17 15:20:14 发布

阅读量386

点赞数

分类专栏：前端专题学习汇总

本文链接：https://blog.csdn.net/weixin_39218464/article/details/108927073

版权

前端专题学习汇总专栏收录该内容

67 篇文章 1 订阅

订阅专栏

JQ的DOM节点

1、jquery(选择器字符串)获取JQ的dom的元素节点（注意不是原生js的dom节点）
例如：jquery(“li”)将获得所有li标记的JQDOM节点
2、JQ的dom节点本质上就是原生dom节点的集合+jQ在原型上定义的若干方法和属性

实例

1、元素选择器
2、类选择器

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery-3.4.1.min.js"></script>
</head>
<style>
    ul{
        list-style: none;
    }
    .red{
        color: red;
    }
    .blue{
        color: blue;
    }
</style>
<body>
<h1>dom节点初识</h1>
<ul>
    <li class="red">1</li>
    <li class="blue">2</li>
    <li class="red">3</li>
    <li class="blue">4</li>
</ul>
<form action="">
    用户名：<input name="username" type="text"><br>
    密码：<input name="pwd" type="password"><br>
    爱好：<input name="ins" type="checkbox" value="sing">唱歌
    <input name="ins" type="checkbox" value="code">编程<br>
    <select name="sl" id="">
        <option value="">北京</option>
        <option value="">上海</option>
        <option value="">南京</option>
    </select><br>
    <p><button type="submit">提交</button></p>
</form>
<script>
$(document).ready(function(){
//   console.log($("li"));//元素选择器
//    console.log($(".blue"));//类选择器

    console.log($("input"));//仅仅是input元素
    console.log($(":input"));//将把表单中的其他非input元素也纳入进来
    console.log($(":checkbox"));
});
</script>
</body>
</html>

刘远山

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery节点与选择器使用

JQ的DOM节点1、jquery(选择器字符串)获取JQ的dom的元素节点（注意不是原生js的dom节点）例如：jquery(“li”)将获得所有li标记的JQDOM节点2、JQ的dom节点本质上就是原生dom节点的集合+jQ在原型上定义的若干方法和属性实例1、元素选择器2、类选择器<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title&gt
复制链接

扫一扫