美文网首页
jQuery的基础功能

jQuery的基础功能

作者: 茜Akane | 来源:发表于2021-04-13 00:36 被阅读0次

    Get started

    • 获取元素
    • 闭包&链式操作
    • 创建元素
    • 移动元素
    • 修改元素
    • 复制和删除元素

    获取元素

    使用jQuery,要先选取一个选择表达式(可以是整个文档、元素、jQuery特有的表达式),来获取对其操作的对象。

    $(document)  //选择整个文档对象
    $('#myId')  //选择ID为myId的网页元素
    $('div.myClass')  // 选择class为myClass的div元素,div可省略
    $('a:first')  //选择网页中第一个a元素
    

    闭包&链式操作

    闭包:函数内部的子函数能够读取其他函数内部变量,这种方式叫做闭包。利用js函数的作用域,来隐藏变量,防止随意修改。
    原理:jQuery函数的返回了jQuery对象,使其返回值可以继续使用其内部函数,通过这种操作实现了jQuery的链式操作。

    // $('div').find('h3').eq(2).html('Hello'); // 同下
    $('div') //找到div元素
     .find('h3') //选择其中的h3元素
     .eq(2) //选择第3个h3元素
     .html('Hello'); //将它的内容改为Hello
    

    创建元素

    直接输入元素。

    $("<div>不相关数据</div>")
    $("<p>不相关数据</p>")
    

    移动元素

    操作作元素在网页中的位置移动。

    $('div').after('p') //把p元素放到div元素后面
    $('div').insertAfter('p') //把div元素放到p的后面
    

    修改元素

    $('div').addClass("red") //给div元素添加类名red
    $('div').attr("title", "hello world") //给div元素添加title属性
    

    复制和删除元素

    复制元素使用.clone()
    删除元素使用.remove().detach()。两者的区别在于,前者不保留被删除元素的事件,后者保留,有利于重新插入文档时使用。
    清空元素内容(但是不删除该元素)使用.empty()
    jQuery中文文档https://www.jquery123.com/
    原文文档https://api.jquery.com/

    相关文章

      网友评论

          本文标题:jQuery的基础功能

          本文链接:https://www.haomeiwen.com/subject/ykzxlltx.html