今日内容 jQuery筛选器，操作标签方法 jQuery绑定事件及Bootstrap框架

  • 筛选器方法

复制代码
下一个元素：
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

上一个元素：
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

父亲元素：
$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

儿子和兄弟元素：
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们

查找
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
$("div").find("p")
等价于$("div p")

筛选
筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。
$("div").filter(".c1")  // 从结果集中过滤出有c1样式类的
等价于 $("div.c1")

补充：
.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素
复制代码

  • 操作标签

一.样式操作

jQuery操作:                                                    JS操作：

addClass(); // 添加指定的CSS类名。                              classList.add()                                         
removeClass();// 移除指定的CSS类名。                            classList.remove()
hasClass();// 判断样式存不存在                                  classList.contains()
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加          classList.toggle()

二.位置操作

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移

三.文本操作

HTML代码：

html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容

文本值：

text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容

值：

val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值

属性操作：

用于ID等或自定义属性：

attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性

  • 事件

一.jQuery绑定事件

复制代码
JS绑定事件
    标签对象.on事件名 = function(){事件代码}
           btnEle.onclick = function(){alert(123)}
jQuery绑定事件
    方式1
        jQuery对象.事件名(function(){事件代码})
            $btnEle.click(function(){alter(123)})
    方式2
          jQuery对象.on('事件名',function(){事件代码})
              $btnEle.on('click',function(){alter(123)})
     """
     有时候使用jQuery的方式1绑定事件如果无法触发 可以切换为方式2
     """
复制代码

二.阻止后续事件

复制代码
能够触发form表单提交数据动作的标签有两个
     <input type="submit">
       <button></button>
给已经有事件的标签绑定事件 会先执行绑定的 再去执行默认的
    我们也可以让标签之前的事件不执行
        return false
    
$(':submit').click(function (e){
            alert('一定要细心 千万不要慌!!!')
            // return false  方式1
            e.preventDefault()方式2
        })
复制代码
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止默认事件</title>
</head>
<body>

<form action="">
    <button id="b1">点我</button>
</form>

<script src="jquery-3.3.1.min.js"></script>
<script>
    $("#b1").click(function (e) {
        alert(123);
        //return false;
        e.preventDefault();
    });
</script>
</body>
</html>
View Code
复制代码

三.阻止事件冒泡

涉及到标签嵌套并且有相同事件的时候 那么会逐级往上反馈并执行
$("span").click(function (e) {
        alert("span");
          return false;          方式1
        e.stopPropagation();     方式2
    });
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止事件冒泡</title>
</head>
<body>
<div>
    <p>
        <span>点我</span>
    </p>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
    $("span").click(function (e) {
        alert("span");
        e.stopPropagation();
    });

    $("p").click(function () {
        alert("p");
    });
    $("div").click(function () {
        alert("div");
    })
</script>
</body>
</html>
View Code
复制代码

四.事件委托

复制代码
"""
创建标签的两种方式
    JS
        document.createElement()
    jQuery
        $('<标签名>')
"""
事件绑定默认情况下是不会对动态创建的标签生效的 如果想生效需要事件委托
$('div').on('click','button',function () {
            alert('你犯困的样子萌萌哒')
        })
上述方式就可以解决动态标签事件的执行问题(注意委托指得是标签内部的标签)
复制代码

  • Bootstrap框架

复制代码
提前写好了所有的标签样式 直接拷贝使用即可
使用之前需要先导入  bootstrap涉及到js的部分需要使用jQuery 
需要熟悉：

布局容器
栅格系统
全局css样式
组件

https://v3.bootcss.com/getting-started/
http://www.fontawesome.com.cn/
复制代码
posted @   你好你好你好丶  阅读(48)  评论(0)  编辑  收藏  举报
（评论功能已被禁用）
相关博文：
·  今日内容JS基本数据类型，流程控制，函数与面向对象 JS的BOM与DOM操作
·  今日内容 CSS选择器与CSS属性
·  jQuery筛选器，bootstrap
·  【2022.8.29】前端开发（6）
·  jQuery补充与Bootstrap框架
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
点击右上角即可分享
微信分享提示
AI IDE Trae