day57 jQuery基础

目录

• 一、操作标签
  • 1 位置操作
  • 2 尺寸
  • 3 文本操作
  • 4 获取值操作
  • 5 属性操作
  • 6 获取属性的特例
  • 7 文档处理
• 二、事件
  • 1 克隆事件
  • 2 自定义模态框
  • 3 左侧菜单
  • 4 回到顶部
  • 5 输入校验
  • 6 input实时监控
  • 7 hover事件
  • 8 键盘按键按下事件

一、操作标签

方法语言	js	jQuery
给标签添加类	标签对象.classList.add()	jQuery对象.addClass()
移除类	.classList.remove()	.removeClass()
判断是否有类	.classList.contains()	.hasClass()
有则删除，无则添加	.classList.toggle()	.toggleClass()

jQuery的几个特点

• 链式操作，一行代码可以操作很多标签
• jQuery对象调用jQuery方法后还是jQuery对象，可以继续使用

举例：一行代码将第一个p标签变成红色第二个p标签变成绿色

$('p').first().css('color','red').next().css('color','green')

# 这种操作在python中的实现
class MyClass(object):
    def func1(self):
        print('func1')
        return self

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

# 在调用这个对象内的方法后，返回的还是这个对象，可以一直调用使用很多方法

1 位置操作

offset()  # 相对于浏览器窗口
position()  # 相对于父标签

scrollTop()		# 页面所处的位置距顶部
$(window).scrollTop()
0
$(window).scrollTop()
969
$(window).scrollTop()  # 括号内不加参数就是获取
1733
$(window).scrollTop(0)  # 加了参数就是设置
n.fn.init [Window]
$(window).scrollTop(500)
n.fn.init [Window]
scrollLeft()

2 尺寸

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

3 文本操作

方法语言	js	jQuery
获取或设置内部文本	.innerText()	.text()
获取或设置内部全部内容	.innerHTML（）	.html()

4 获取值操作

方法语言	js	jQuery
获取值操作	.value = 'xxx'	.val('xxx')

# 标签对象和jQuery对象方法对比
$('div').first().val('123') === $('div')[0].value = '123'

5 属性操作

方法语言	js	jQuery
设置标签属性	.setAttribute()	.attr(name,value)
取得标签属性	.getAttribute()	.attr(name)
移除标签属性	removeAttribute()	removeAttr(name)

let $divEle = $('div').first()

$divEle
S.fn.init [div, prevObject: S.fn.init(2)]

# 取得divEle的username属性
$divEle.attr('username')
"hz"

# 设置divEle的password属性为123
$divEle.attr('password','123')
S.fn.init [div, prevObject: S.fn.init(2)]

$divEle.attr('password')
"123"

# 移除divEle的password属性
$divEle.removeAttr('password')
S.fn.init [div, prevObject: S.fn.init(2)]

$divEle.attr('password')
undefined

6 获取属性的特例

# 对于上述需要获取具体属性和属性值的时候用attr
# 如果要返回布尔值，如checkbox radio option是否被选中用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]
           

7 文档处理

方法语言	js	jQuery
创建一个p标签	.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('借我钱买草莓 后面还你')
    })

1 克隆事件

<button id="d1"> 点击</button>

<script>
    $('#d1').on('click',function () {
        $(this).clone(true).insertAfter($('body')) // clone(true) 默认false表示只克隆html标签和css样式，不克隆事件，改成true就可以克隆事件
    })
</script>

2 自定义模态框

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

3 左侧菜单

<script>
    $('.title').click(function () {
        // 先给所有的items加hide
        $('.items').addClass('hide')
        // 然后将被点击标签内部的hide移除
        $(this).children().removeClass('hide')
    })
</script>

4 回到顶部

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

5 输入校验

<script>
    let textEle = $(':text')
    let passEle = $(':password')
    $('#d1').click(function () {
        if(!textEle.val())
            textEle.next().text('请输入！')
        if(!passEle.val())
            passEle.next().text('请输入！')
    })
    $('input').focus(function () {
            $(this).next().text('')
    })
</script>

6 input实时监控

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

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

7 hover事件

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

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

8 键盘按键按下事件

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