• 技术文章 >web前端 >前端问答

    十分钟搞懂jquery对元素的基本操作

    长期闲置长期闲置2022-01-10 18:39:39转载79
    本篇文章给大家带来了jquery常用功能总结,其中包括怎样获取、移动、创造和修改元素,希望对大家有帮助。

    jQuery简介

    jQuery是JS的一个类库,对JS中的某些功能进行封装,让DOM操作变得简单,使代码简洁,易于使用,且支持链式写法,兼容性好。

    jQuery的设计思想和主要用法即:选择某个网页元素,然后对其进行一些操作。

    jQuery的特别之处在于:用jQuery获取对应元素后,,它不返回这些对应的元素,返回的都是jQuery对象(jQuery构造出来的对象),而此对象可以操作这些对应的元素。

    jQuery能实现的功能JS一定能实现,反之则不一定。

    令window.jQuery = window.$ ,将jQuery简写为$。

    jQuery如何获取元素

    将一个选择表达式放进构造函数$()里即可,然后得到被选中的元素。选择表达式可以是CSS选择器,也可以是jQuery特有的表达式。

    // CSS选择器
    $(document) // 选择整个文档对象
    $('#xxxID') // 选择ID为xxx的元素
    $('div.xxxClass') // 选择Class为xxx的元素
    $('input[name=first]') // 选择类名属性为first的元素
    // jQuery特有表达式
    $('a:first') // 选择网页中第一个a元素
    $('tr:odd') // 选择表格的奇数行
    $('#myForm:input') // 选择表单中的input元素
    $('div:visible') // 选择可见的div元素
    $('div:gt(2)') // 选择所有的div元素,除了前三个
    $('div:animated') // 选择当前处于动画状态的div元素

    jQuery如何创造元素

    直接将新元素传入jQuery构造函数即可。

    创建的新元素不会自动插入到页面中,我们还需要明确的指定其插入到页面中的位置。

    举个例子:创建一对<h1></h1>标签

    $(function(){
    let $h1 = $('<h1></h1>') // 创建元素h1
    $('body').append($h1) // 将元素h1放入到body里(用append表示成为body的最后一个子元素)
    }

    用div举个例子:

    $('div').prepend('') // 给div添加一个大儿子(即添加到最前)
    $('div').append(选择器/jQuery对象) // 给div添加一个小儿子(即添加到最后)
    $('<h2>xxx</h2>').appendTo(选择器/jQuery对象) // 在选择器选中的元素的子元素里,将“xxx”添加到最后

    jQuery如何移动元素

    方法一:直接移动该元素

    $('div').insertAfter($('p')) // 将元素div移动到元素p后面

    方法二:移动其他元素从而使目标函数到达我们想要的位置

    $('p').after($('div')) // 把元素p放到元素div前

    这两种方法的区别:返回的对象不同。方法一返回的对象是div,方法二返回的对象则是p。

    元素不同的移动方式:

    .insertAfter()和.after() // 在现存元素的外部,从后面插入元素
    .insertBefore()和.before() // 在现存元素的外部,从前面插入元素
    .appendTo()和.append() // 在现存元素的内部,从后面插入元素
    .prependTo()和.prepend() // 在现存元素的内部,从前面插入元素

    jQuery如何修改元素属性

    使用attr()来修改元素属性及其内容,attr为attribute的缩写,是JS中setAttribute&getAttribute的简写。attr是取值还是赋值,由函数的参数来决定。

    举个例子:

    $('img').attr('width','100px') // 为属性'width'赋值'100px'

    使用方式:

    $(selector).attr(attribute) // 返回被选元素的属性值
    $(selector).attr(attribute.value) // 返回被选元素的属性&值
    $(selector).attr(attribute,function(index,oldvalue)) // 用函数返回值设置被选元素的属性&值
    $(selector).attr({attribute1:value,attribute2:value...}) // 为被选一个及以上的元素设置属性&值,可一次修改多个属性的属性值

    补充:上述第三种使用方式的意思是:用函数的返回值给属性赋属性值,该函数可接收并使用选择器的index值和当前属性值。举个例子:

    $('button').click(function(){
        $('img').attr('width',function(n,v){
         return v-50;  // 点击按钮图片宽度减少50
        })
    })

    jQuery的链式操作

    在选择网页元素后,对其进行一系列操作,并且所有操作都可以连在一起并以链条的形式写出来,这就是jQuery的链式操作。

    举个例子:$('div').find('h3').eq(2).html('Hello');此行代码可以拆分如下

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

    jQuery还提供了后退操作.end(),使得操作结果可以后退一步。

    $('div')
     .find('h3')
     .eq(2)
     .html('Hello')
     .end() // 退回到选中所有的h3元素的那一步
     .eq(0) // 选中第一个h3元素
     .html('World') // 将它的内容改为World

    相关视频教程推荐:jQuery视频教程

    以上就是十分钟搞懂jquery对元素的基本操作的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金,如有侵犯,请联系admin@php.cn删除
    专题推荐:jquery
    上一篇:jquery怎样设置几秒循环 下一篇:JavaScript的单线程你真的理解了吗

    相关文章推荐

    • jquery中select2的用法是什么• jQuery中css()和addclass()有啥区别• jquery中confirm的使用方法是什么• jquery怎样判断被选中是第几个• jquery怎样设置只能填数字

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网