站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

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

时间:2022-01-11 [网络编程]作者:fabuyuan 浏览:4 次

本篇文章给大家带来了jquery常用功能总结,其中包括怎样获取、移动、创造和修改元素,希望对大家有帮助。

十分钟搞懂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对元素的基本操作的详细内容,更多请关注站长家园其它相关文章!

本文标签:  jquery

转载请注明来源:十分钟搞懂jquery对元素的基本操作

本文永久链接地址:https://www.adminjie.com/post/7491.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • mysql怎样in查询操作排序

      mysql怎样in查询操作排序

      在mysql中,可利用“ORDERBY”子句配合SELECT语句in查询来操作排序,语法为“select*from表名where字段值in(排序1,排...

    • docker能用yum命令吗

      docker能用yum命令吗

      docker能用yum命令,docker容器内安装yum的方法:1、通过“apt-getupdate”更新apt-get指令;2、通过“apt-getins...

    • 如何解决docker telnet不通的问题

      如何解决docker telnet不通的问题

      dockertelnet不通的解决办法:1、查看配置文件;2、修改nginx配置文件的端口为80;3、重新加载即可。本文操作环境:centOS6.8系统、Do...

    • css怎样改变一个图片高度和宽度

      css怎样改变一个图片高度和宽度

      在css中,可以使用width和height属性来改变一个图片高度和宽度,只需要给图片元素添加“width:宽度值;height:高度值;”样式即可。width...

    • docker不能删除镜像怎么办

      docker不能删除镜像怎么办

      docker不能删除镜像的解决办法:1、删除REPOSITORY;2、删除IMAGEID;3、通过“dockerimages”查看镜像即可。本文操作环境:c...

    热门文章