jQuery 基本用法

作者: cy_Wey | 来源:发表于2022-07-25 00:49 被阅读0次

    获取元素

    $(document)  // 获取整个文档
    $('#id') // 获取对应 id 的元素
    $('.class')  // 获取对应 class 的元素
    $('div')  // 获取对应标签的元素
    

    链式操作

    链式操作就是选中网页元素后,对它进行一系列的操作,并且所有操作可以连接在一起,以链条的形式写出来,如

    $('#app').find('div').eq(1).html('hello jQuery')
    

    分解出来是这样的

    $('#app')      // 获取 id 为 app 的元素
      .find('div')  // 找到其中的 div 元素
      .eq(1)        // 找到第 2 个 div 元素
      .html('hello jQuery')    // 将它的内容改为 hello jQuery
    

    创建元素

    $(`<p>hello</p>`)  // 这里的元素在 JS 线程中
    $('#app').append('<p>hello</p>')  // 创建 1 个 元素,将这个元素添加到 #app 对应元素的子元素中
    

    移动元素

    移动元素的方法有两种,一种是移动到一个元素的前面,另一种是移动到一个元素的后面。

    $('.header').after('.main')  // 移动到一个元素的前面
    $('.header').insertAfter('.main')  // 移动到一个元素的后面
    

    修改元素属性

    .attr( attributeName, value)  // 传入两个参数
    $('.header').attr('class', 'footer') 
    .attr( attributes )  // 传入一个对象
    $('.header').attr( {'class' : 'footer'} )  
    

    资料来源:阮一峰的《jQuery设计思想》, jQuery 中文文档

    相关文章

      网友评论

        本文标题:jQuery 基本用法

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