jQuery

jQuery

筛选器

1.下一个元素
$("#id").next()  // 筛选出元素的下一个兄弟元素
$("#id").nextAll()  // 筛选元素后面所有的兄弟
$("#id").nextUntil("#i2")  // 筛选出元素后面所有兄弟元素直到选择器元素位置

2.上一个元素
$("#id").prev()  // 筛选元素的上一个兄弟元素
$("#id").prevAll()  // 筛选元素前面所有的兄弟
$("#id").prevUntil("#i2")  // 筛选出元素前面所有兄弟元素直到选择器元素位置

3.父亲元素
$("#id").parent()  // 筛选出元素的父元素
$("#id").parents()  // 查找当前元素的所有父辈元素
$("#id")parentsUntil()  // 查找当前元素的所有父辈元素，直到选择器元素为止

4.链式操作的底层原理
对象调用方法之后返回一个对象，从而实现链式操作的效果

操作标签

jQuery操作				js操作				jQuery操作功能
.css('样式名','样式值')	style.样式名 = '样式值'
1.样式操作
addClass()				classList.add()			添加指定的css类名
removeClass()			classList.remove()		移除指定的css类名
hasClass()				classList.contains()	判断样式存不存在
toggleClass()			classList.toggle()		有css类名就移除，没有就添加

2.文本操作
text()					innerText()			取得所有匹配元素的内容
html()					innerHTML()			取得第一个匹配元素的html内容
val()					value				取得第一个匹配元素的当前值
[0].files				files				获取所有文件

3.属性操作
attr() 静态属性			 setAttribute()		  返回第一个匹配元素的属性值
prop() 动态属性(checked)					 获取属性

4.文档处理
append()				append()			添加到指定元素内部的后面
prepend()								  添加到指定元素内部的前面
after()									  添加到指定元素外部的后面
before()								  添加到指定元素外部的前面

remove()								  从DOM中删除所有匹配的元素
empty()									 删除匹配的元素集合中所有的子节点

jQuery绑定事件方法

js绑定事件与jQuery绑定事件

1.js绑定事件
标签对象.on事件名 = function(){事件代码}

2.jQuery绑定事件
2.1方法1:
jQuery对象.事件名(function(){事件代码})
$btnEle.click(function(){alter(123)})
2.2方法2:
jQuery对象.on('事件名',function(){事件代码})
$btnEle.on('click',function(){alter(123)})
'使用jQuery方法1绑定事件无法触发时可以切换为方法2'
img

事件案例

1.常用事件
click(function(){...})  // 单击事件
hover(function(){...})  // 悬浮事件
blur(function(){...})  // 鼠标移除input框
focus(function(){...})  // 鼠标进入input框
change(function(){...})  // 文本域变化事件
keyup(function(){...})  // 松开键盘事件

2.clone()克隆事件示例
<body>
    <button id="d1" class="c1">多重影分身之术</button>
    <script>
        let $btnEle = $('#d1');
        $btnEle.click(function (){
            $('body').append($(this).clone())
        })
    </script>
</body>

3.hover事件示例
<body>
    <p>第一个</p>
    <p>第二个</p>
    <p>第三个</p>
    <script>
        // 影响所有p标签
        $('p').hover(
            function (){
                alert('我进来了')
            },
            function (){
                alert('我出来了')
            }
        )
    </script>
</body>

4.实时监听input输入值变化示例
<body>
    <input type="text" id="d1">
    <script>
        $('#d1').on('input', function (){
            console.log(this.value)
        })
    </script>
</body>

事件相关补充知识

1.能够触发form表单提交数据动作的标签有两个
1.1<input type="submit" value="提交">
1.2<button>提交</button>
'给已经有事件的标签绑定事件，会先执行绑定的事件，再去执行默认的执行'

2.也可以让标签之前的事件不执行
2.1return false
2.2$(':submit').click(function (e){
            alert('来了')
            e.preventDefault()
        })

3.事件冒泡
'涉及到标签嵌套并且有相同事件的时候，当你触发儿子标签的事件时，它会逐级向上汇报'
<body>
    <div>div
        <p>div>p
            <span>div>p>span</span>
        </p>
    </div>
    <script>
        $('div').click(function (){
            alert('div')
        })
        $('p').click(function (){
            alert('p')
        })
        $('span').click(function (){
            alert('span')
        })
    </script>
</body>

4.阻止事件冒泡
4.1return false
4.2$('p').click(function (e){
        alert('p')
        e.stopPropagation()
    })

'''
创建标签的两种方法
1.js
document.createElement()
2.jQuery
$('<标签名>')
'''
5.事件委托
事情绑定默认情况下是不会对动态创建的标签生效的，如果想生效需要事情委托
$('div').on('click','button',function () {
            alert('阿姨压一压')
        })

jQuery动画效果

1.基本
show([s,[e],[fn]])  // 显示隐藏的匹配元素
hide([s,[e],[fn]])  // 
toggle([s],[e],[fn])  //

Bootstrap

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

目录导航