js版本                     jQuery版本
classList.add()        　　addClass()
classList.remove()  　　　 removeClass()
classList.contains() 　　　hasClass()
classList.toggle()    　　 toggleClass()    

<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()

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

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

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

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

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

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

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

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

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

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

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, …}

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]

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(‘借我钱买草莓 后面还你‘)
    })

<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>

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

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

在获取用户的用户名和密码的时候 用户如果没有填写 应该给用户展示提示信息
<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>

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

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

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

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

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