jQuery学习笔记——选择器的使用和元素的创建

最新推荐文章于 2021-01-26 17:48:44 发布

淡忘～雨季

最新推荐文章于 2021-01-26 17:48:44 发布

阅读量163

点赞数

分类专栏： Web前端学习文章标签： js javascript jquery html5 css3

本文链接：https://blog.csdn.net/weixin_43900407/article/details/104699476

版权

Web前端学习专栏收录该内容

33 篇文章 1 订阅

订阅专栏

1.基本选择器

根据id来获取 -- id选择器 -- $("#id值"); 一个
根据标签来获取 -- 标签选择器 -- $("标签的名字"); 多个
根据类样式来获取 -- 类选择器 -- $(".类的名字"); 多个
$("*") 所有
注意：id选择器需要在值前面加上# 类选择器需要在类名前面加上.
多条件选择器 -- $(多个选择器,中间用逗号隔开)

2.层次选择器

层次选择器有两种类型：后代选择器和子代选择器。

后代选择器：包含元素下面的子元素，子元素下的子元素
例如 $('#div li a') $('.cls span')
子代选择器：元素直接的子元素，不包括子元素下的子元素
例如：$('#div>span') 只是包括id为div下的直接子元素span，不包括div元素中其他元素内的span，

3.奇偶选择器（过滤选择器）

偶数 :even 如$('#ul>li:even') 0 2 4 6 8…… 标签开头是按照第0个开始
奇数 :odd  如$('#ul>li:odd') 1 3 5 7 9 ……

4.索引选择器

索引选择器的索引是从0开始的。
eq(3)：获取索引为3的元素
gt(3)：获取大于3的所有元素
lt(3)：获取小于3的所有元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery索引选择器的使用</title>
    <style></style>
    <script src="jquery-1.12.2.js"></script>
    <script>
    $(function() {
      $('#btn').click(function() {
      // 索引为3 变为红色
      $('#uu>li:eq(3)').css('backgroundColor','red');
      // 索引数大于3 变为黄色
      $('#uu>li:gt(3)').css('backgroundColor','yellow');
      // 索引数小于3 变为蓝色
      $('#uu>li:lt(3)').css('backgroundColor','blue');
      });
    })
    </script>
    </head>
    <body>
    <input type="button" id="btn" value="点击" />
    <ul id="uu">
        <li>笑傲江湖</li>
        <li>射雕英雄传</li>
        <li>天龙八部</li>
        <li>倚天屠龙记</li>
        <li>神雕侠侣</li>
        <li>鹿鼎记</li>
        <li>碧血剑</li>
    </ul>
    </body>

5.元素操作常用方法

.html() 标签中间显示其他标签的及其内容类似innerHTML；
.text() 标签中间的文本内容类似innerText，textContent；
.val() value属性；
.css() 元素的样式 style，需要设置多个样式的时候，css()中加上{}内写键值对的形式 css({键值对,})
方法中的()，写的是字符串，如果有参数，那么就是设置的值，没有参数就是获取值。

6.元素样式的操作

获取元素的样式
使用方法css(),设置一个参数，参数就是需要获取的样式，但是获取到的都是字符串类型，如果需要数字类型需要使用parseInt进行转换。
添加和移除类样式
添加类样式：addClass(‘类名’)，如果需要添加多个类样式，在类名与类名中间使用空格隔开，或者在addClass()后面在点addClass()。

$('#dv').addClass('cls cls2');
或者
$('#dv').addClass('cls').addClass('cls2');

注意：类名前面不要加.
移除类样式：removeClass(‘类名’) ，如果需要移除所有的类样式，则不设置参数：removeClass()。
hasClass(‘类名’)：判断是否应用了某类
toggleClass()：切换类样式
总结：如果只是设置简单的样式，而且属性的个数也较少，那么使用.css(‘属性名’,‘属性值’)的方法
如果样式较多，那么使用addClass()，直接添加一个类样式。

7.jQuery动态创建元素的方法

DOM创建元素的方式
1.document.write(标签代码);缺陷：页面加载元素，会把页面原有的内容覆盖
2.innerHTML
3.document.createElement(标签代码);
jQuery创建元素的方式
1.$(标签代码)
2.对象.html(标签代码)
添加元素的方法
A.append(B)：在A元素中添加B元素
A.appendTo(B)：把A追加到B A.append(B)：把B追加给A
prepend():把元素插入到某元素的前面（子元素）
after()：把元素添加到当前元素的后面（兄弟元素）
before()：把元素添加到当前元素的前面（兄弟元素）
清空元素的内容：对象.html(’’);或者对象.empty();
移除元素：对象.remove();
克隆：clone()：复制这个元素的内容;
自定义属性操作的方法：attr()
设置自定义属性：attr(‘属性名’,‘属性值’) 两个参数是设置自定义的属性；
获取属性：attr(‘属性名’) 一个参数是获取自定义的属性。

// 自定义属性操作
$('#btn3').click(function() {
    //创建a元素
    var aObj = $('<a></a>');
    //自定义属性的设置 attr(属性名,属性值) 两个参数
    aObj.attr('href','www.baidu.com'); 
    aObj.attr('name','aa');
    aObj.text('Hello');
    $('#div3').append(aObj);
    //获取自定义属性 attr(属性名) 一个参数
    var href = aObj.attr('href'); 
    $('#div3').text(href);
});

复选框选中问题
复选框的选中状态的方法 prop()
一个参数：获取复选框是否被选中
两个参数：设置选中还是不被选中，prop(‘checked’,true/false)

 // 全选
$('#btn4').click(function() {
// #div4 :checkbox  id为div4下面全部的checkbox 注意#div4后面有空格 其他地方不能有空格
    $('#div4 :checkbox').prop('checked',true);
});
//全不选
$('#btn5').click(function() {
    $('#div4 :checkbox').prop('checked',false);
});

淡忘～雨季

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记——选择器的使用和元素的创建

1.基本选择器根据id来获取 -- id选择器 -- $("#id值"); 一个根据标签来获取 -- 标签选择器 -- $("标签的名字"); 多个根据类样式来获取 -- 类选择器 -- $(".类的名字"); 多个$("*") 所有注意：id选择器需要在值前面加上# 类选择器需要在类名前面加上.多条件选择器 -- $(多个选择器,中间用逗号隔开)2.层次选择器层次选择器有两种类...
复制链接

扫一扫