jq2事件 jq等操作 each

一操作标签
　　1.1css操作
- 　　1.2位置操作
- 　　1.3尺寸　　
- 　　1.4文本操作
- 　　1.5获取值操作
- 　　1.6属性操作
- 　　1.7文档操作
二事件
- 　　2.1克隆事件
- 　　2.2 自定义模态框
- 　　2.3左侧菜单
- 　　2.4返回顶部
- 　　2.5自定义登陆校验（焦点事件）
- 　　2.6 input实时监控
- 　　2.7 hover事件
- 　　2.8键盘按键按下事件
- 　　2.9 阻止后续事件执行
- 　　2.10阻止事件冒泡
- 　　2.11事件委托
- 　　2.12页面加载
- 　　2.13动画效果
- 　　2.14补充

一操作标签

js版本                     jQuery版本
classList.add()        　　addClass()     #使用方法eg：  $('#l1').removeClass('colore1')  
classList.remove()  　　　 removeClass()
classList.contains() 　　　hasClass()
classList.toggle()    　　 toggleClass()

回到顶部

　　1.1css操作

<p>111</p>
<p>222</p>
"""一行代码将第一个p标签变成红色第二个p标签变成绿色"""
jQuery的链式操作 使用jQuery可以做到一行代码操作很多标签
$('p').first().css('color','red').next().css('color','green')

jQuery对象调用jQuery方法之后返回的还是当前jQuery对象 也就可以继续调用其他方法 举例
class MyClass(object):
    def func1(self):
        print('func1')
        return self

    def func2(self):
        print('func2')
        return self
obj = MyClass()
obj.func1().func2()

　　1.2位置操作

offset()
相对于浏览器窗口返回第一个匹配元素的偏移坐标
该方法返回的对象包含两个整型属性：top 和 left

position()  
相对于父标签返回第一个匹配元素的位置
该方法返回的对象包含两个整型属性：top 和 left

scrollTop()
方法返回或设置匹配元素的滚动条的垂直位置

$(window).scrollTop()
括号内不加参数获取滚动条的相对位置

$(window).scrollTop(0)
括号内加参数就是设置位置

scrollLeft()
方法返回或设置匹配元素的滚动条的水平位置

　　1.3尺寸　　

$('p').height()  # 文本
20
$('p').width()
1670
$('p').innerHeight()  # 文本+padding
26
$('p').innerWidth()
1674
$('p').outerHeight()  # 文本+padding+border
26
$('p').outerWidth()
1674

　　1.4文本操作

操作标签内部文本
js    　　　　　　 jQuery
innerText        text()  括号内不加参数就是获取加了就是设置
innerHTML        html()

$("p").text("Hello <b>world!</b>");
Hello <b>world!</b>

$("p").html("Hello <b>world!</b>");
Hello world!

　　1.5获取值操作

js    　　   jQuery
.value     .val()

$('#d1').val()
"sasdasdsadsadad"
$('#d1').val('520快乐')  # 括号内不加参数就是获取加了就是设置

获取文件对象方法
$('#d2')[0].files[0] 
files[0]是JavaScript的属性
$('xx')是jQuery对象，$('xx')[0]是将jQuery对象：$('xx')转换为JavaScript对象，这样才可以使用JavaScript对象的属性和方法
File {name: "01_测试路由.png", lastModified: 1557043083000, lastModifiedDate: Sun May 05 2019 15:58:03 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 28733, …}

　　1.6属性操作

js中                    jQuery
setAttribute()          attr(name,value) 设置属性和值
getAttribute()          attr(name)     设置属性
removeAttribute()       removeAttr(name)  移除选择属性

在用变量存储对象的时候 js中推荐使用    
    XXXEle            标签对象
jQuery中推荐使用
    $XXXEle            jQuery对象

let $pEle = $('p')
$pEle.attr('id')
$pEle.attr('class','c1')
$pEle.removeAttr('password')

对于标签上有的能够看到的属性和自定义属性用attr
对于返回布尔值比如checkbox radio option是否被选中用prop
添加属性名称该属性就会生效应该使用prop();


$('#d3').attr('checked')
"checked"
$('#d2').attr('checked')　　　　　　#查看是否选中
undefined
$('#d2').attr('checked')
undefined
$('#d4').attr('checked')
undefined
$('#d3').attr('checked')
"checked"
$('#d3').attr('checked','checked')  # 无效
w.fn.init [input#d3]
           
           
$('#d2').prop('checked')
false
$('#d2').prop('checked')
true　　
$('#d3').prop('checked',true)　　　　　　　　#设置默认的选中
w.fn.init [input#d3]
$('#d3').prop('checked',false)
w.fn.init [input#d3]

　　1.7文档操作

js                            jQuery
createElement('p')            $('<p>')
appendChild()                 append()

let $pEle = $('<p>')
$pEle.text('你好啊 草莓要不要来几个?') 设置文本内容

$pEle.attr('id','d1')     设置标签属性
     
$('#d1').append($pEle)  # 内部尾部追加
$pEle.appendTo($('#d1')) 
           
$('#d1').prepend($pEle)  # 内部头部追加
w.fn.init [div#d1]

$pEle.prependTo($('#d1')) 在被选标签的头部添加
w.fn.init [p#d1, prevObject: w.fn.init(1)]
         
$('#d2').after($pEle)  # 放在某个标签后面
w.fn.init [p#d2]

$pEle.insertAfter($('#d1'))在被选标签的后面插入
        
$('#d1').before($pEle) 放在被选标签前面
w.fn.init [div#d1]     

$pEle.insertBefore($('#d2'))在被选标签的前面插入

$('#d1').remove()  # 将标签从DOM树中删除
w.fn.init [div#d1]
           
$('#d1').empty()  # 清空标签内部所有的内容
w.fn.init [div#d1]

回到顶部

二事件

// 第一种
    $('#d1').click(function () {
            alert('别说话 吻我')
    });
  
// 第二种(功能更加强大 还支持事件委托)
    $('#d2').on('click',function () {
            alert('借我钱买草莓 后面还你')
    })

　　2.1克隆事件

<button id="d1">屠龙宝刀，点击就送</button>

<script>
    $('#d1').on('click',function () {
        // console.log(this)  // this指代是当前被操作的标签对象
        // $(this).clone().insertAfter($('body'))  // clone默认情况下只克隆html和css 不克隆事件
        $(this).clone(true).insertAfter($('body'))  // 括号内加true即可克隆事件

    })
</script>

　　2.2 自定义模态框

　　模态框内部本质就是给标签移除或者添加上hide属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        body{
            margin: 0;
        }
        .hidden{
            display: none;
        }

        .look{
            height: 200px;
            width:400px;
            background-color: white;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -200px;
            /*text-align: center;*/

            z-index:100 ;
        }
        .motai{

            right: 0;
            left: 0;
            top: 0;
            bottom: 0;
            background-color: rgba(1,1,1,0.5);
            position: fixed;
            z-index: 99;

        }
        input{
            margin: 18px auto;
            margin-left: 18px;
            padding: 10px;

        }
    </style>
</head>
<body>
<div>最下面
<button id="l1">登入</button>
</div>
<div id="l4" class="motai hidden "></div>
<div id="l2" class="hidden look">
    账号：<input type="text" style="top: 300px ;float: none"><br>
    密码：<input type="password">
    <button id="l3">点击取消</button>

</div>
<script>
$("#l1").click(function () {
    $("#l2,#l4").removeClass("hidden")
})
$("#l3").on('click',function () {
    $("#l2,#l4").addClass('hidden')
})
</script>
</body>
</html>

　　2.3左侧菜单

<script>
    $('.title').click(function () {
        // 先给所有的items加hide
        $('.items').addClass('hide')
        // 然后将被点击标签内部的hide移除
        $(this).children().removeClass('hide')
    })
</script>
<!--尝试用一行代码搞定上面的操作-->

　　2.4返回顶部

<script>
    $(window).scroll(function () {
        if($(window).scrollTop() > 300){
            $('#d1').removeClass('hide')
        }else{
            $('#d1').addClass('hide')
        }
    })
</script>

　　2.5自定义登陆校验（焦点事件）

在获取用户的用户名和密码的时候 用户如果没有填写 应该给用户展示提示信息
<p>username:
    <input type="text" id="username">
    <span style="color: red"></span>
</p>
<p>password:
    <input type="text" id="password">
    <span style="color: red"></span>
</p>
<button id="d1">提交</button>

<script>
    let $userName = $('#username')
    let $passWord = $('#password')
    $('#d1').click(function () {
        // 获取用户输入的用户名和密码 做校验
        let userName = $userName.val()
        let passWord = $passWord.val()
        if (!userName){
            $userName.next().text("用户名不能为空")
        }
        if (!passWord){
            $passWord.next().text('密码不能为空')
        }
    })
    $('input').focus(function () {
        $(this).next().text('')
    })
</script>

　　2.6 input实时监控

<input type="text" id="d1">

<script>
    $('#d1').on('input',function () {
        console.log(this.value)  
    })
</script>

　　2.7 hover事件

<script>
    // $("#d1").hover(function () {  // 鼠标悬浮 + 鼠标移开
    //     alert(123)
    // })

    $('#d1').hover(
        function () {
            alert('我来了')  // 悬浮
    },
        function () {
            alert('我溜了')  // 移开
        }
    )
</script>

　　2.8键盘按键按下事件

<script>
    $(window).keydown(function (event) {
        console.log(event.keyCode)
        if (event.keyCode === 16){
            alert('你按了shift键')
        }
    })
</script>

　　2.9 阻止后续事件执行

<script>
    $('#d2').click(function (e) {
        $('#d1').text('宝贝 你能看到我吗?')
        // 阻止标签后续事件的执行 方式1
        // return false
        // 阻止标签后续事件的执行 方式2
        // e.preventDefault()
    })
</script>

　　2.10阻止事件冒泡

<script>
        $('#d1').click(function () {
            alert('div')
        })
        $('#d2').click(function () {
            alert('p')
        })
        $('#d3').click(function (e) {
            alert('span')
            // 阻止事件冒泡的方式1
            // return false
            // 阻止事件冒泡的方式2
            // e.stopPropagation()
        })
</script>

　　2.11事件委托

<button>是兄弟，就来砍我!!!</button>

<script>
    // 给页面上所有的button标签绑定点击事件
    // $('button').click(function () {  // 无法影响到动态创建的标签
    //     alert(123)
    // })

    // 事件委托     
    $('body').on('click','button',function () {
        alert(123)  // 在指定的范围内 将事件委托给某个标签 无论该标签是事先写好的还是后面动态创建的
    })
</script>

　　2.12页面加载

# 等待页面加载完毕再执行代码
window.onload = function(){
  // js代码
}

"""jQuery中等待页面加载完毕"""
# 第一种
$(document).ready(function(){
  // js代码
})
# 第二种
$(function(){
  // js代码
})
# 第三种
"""直接写在body内部最下方"""

　　2.13动画效果

$('#d1').hide(5000)
w.fn.init [div#d1]
$('#d1').show(5000)
w.fn.init [div#d1]
$('#d1').slideUp(5000)
w.fn.init [div#d1]
$('#d1').slideDown(5000)
w.fn.init [div#d1]
$('#d1').fadeOut(5000)
w.fn.init [div#d1]
$('#d1').fadeIn(5000)
w.fn.init [div#d1]
$('#d1').fadeTo(5000,0.4)
w.fn.init [div#d1]

　　2.14补充

# each()
# 第一种方式
$('div')
w.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]
$('div').each(function(index){console.log(index)})
VM181:1 0
VM181:1 1
VM181:1 2
VM181:1 3
VM181:1 4
VM181:1 5
VM181:1 6
VM181:1 7
VM181:1 8
VM181:1 9

$('div').each(function(index,obj){console.log(index,obj)})
VM243:1 0 <div>1</div>
VM243:1 1 <div>2</div>
VM243:1 2 <div>3</div>
VM243:1 3 <div>4</div>
VM243:1 4 <div>5</div>
VM243:1 5 <div>6</div>
VM243:1 6 <div>7</div>
VM243:1 7 <div>8</div>
VM243:1 8 <div>9</div>
VM243:1 9 <div>10</div>

# 第二种方式
$.each([111,222,333],function(index,obj){console.log(index,obj)})
VM484:1 0 111
VM484:1 1 222
VM484:1 2 333
(3) [111, 222, 333]
"""
有了each之后 就无需自己写for循环了 用它更加的方便
"""
# data()
"""
能够让标签帮我们存储数据 并且用户肉眼看不见
"""
$('div').data('info','回来吧，我原谅你了!')
w.fn.init(10) [div#d1, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]
               
$('div').first().data('info')
"回来吧，我原谅你了!"
$('div').last().data('info')
"回来吧，我原谅你了!"
               
$('div').first().data('xxx')
undefined
$('div').first().removeData('info')
w.fn.init [div#d1, prevObject: w.fn.init(10)]
           
$('div').first().data('info')
undefined
$('div').last().data('info')
"回来吧，我原谅你了!"

posted @ 2021-05-13 18:47 欧阳锦涛阅读(76) 评论(0) 收藏举报

刷新页面返回顶部

欧阳锦涛

欧阳锦涛

jq2事件 jq等操作 each

一操作标签

1.1css操作

1.2位置操作

1.3尺寸

1.4文本操作

1.5获取值操作

1.6属性操作

1.7文档操作

二 事件

2.1克隆事件

2.2 自定义模态框

2.3左侧菜单

2.4返回顶部

2.5自定义登陆校验（焦点事件）

2.6 input实时监控

2.7 hover事件

2.8键盘按键按下事件

2.9 阻止后续事件执行

2.10阻止事件冒泡

2.11事件委托

2.12页面加载

2.13动画效果

2.14补充

公告

　　1.1css操作

　　1.2位置操作

　　1.3尺寸　　

　　1.4文本操作

　　1.5获取值操作

　　1.6属性操作

　　1.7文档操作

二事件

　　2.1克隆事件

　　2.2 自定义模态框

　　2.3左侧菜单

　　2.4返回顶部

　　2.5自定义登陆校验（焦点事件）

　　2.6 input实时监控

　　2.7 hover事件

　　2.8键盘按键按下事件

　　2.9 阻止后续事件执行

　　2.10阻止事件冒泡

　　2.11事件委托

　　2.12页面加载

　　2.13动画效果

　　2.14补充