首页
学习
活动
专区
圈层
工具
发布

jQuery创建html元素【jQuery框架应用入门08】

jQuery创建一个html元素,将html标签的字符串放入$()中就可创建一个DOM节点,接下去将DOM节点通过appendTo方法添加到指定的某个DOM中即可。...或者是通过先找到某个添加html元素的DOM节点,然后使用append方法添加DOM节点或者html字符串即可实现元素的创建并添加,。 现在为我的歌曲榜榜单再添加一首或几首歌。...首先找到音乐榜单所在的区域是标签,那么先获取ol这个节点,使用jQuery代码$(“ol”)即可实现。...然后利用jQuery的append方法添加一首歌,使用代码: $("ol").append("水手") 或者 $("水手").appendTo($("ol")) 或者...图5-8 添加一首歌曲 通过此案例读者进一步见证,创建一个html元素把它添加到指定的节点元素中,可以是字符串类型也可以是DOM节点类型。

65810
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    jquery 元素节点操作 - 创建节点、插入节点、删除节点

    jquery的节点操作说明 前面的篇章对于jquery的元素操作大部分是使用html()的方式来操作,这种直接使用字符串创建的方式也是性能最高的。...另外还有其他创建节点、插入节点、删除节点的方法,如下: var $div2 = $('这是一个div元素'); # 创建节点 append() appendTo() #在现存元素的内部...,从后面插入元素 prepend() prependTo() #在现存元素的内部,从前面插入元素 after() insertAfter() #在现存元素的外部,从后面插入元素 before() insertBefore...() #在现存元素的外部,从前面插入元素 创建节点 var $div = $(''); var $div2 = $('这是一个div元素'); 插入节点 1、append...()和appendTo():在现存元素的内部,从后面插入元素 下面写一个div内部插入元素的示例如下: ?

    10.4K40

    jquery操作元素的位置

    .offset()   在匹配的元素中,获取第一个元素的当前坐标,或设置每一个元素的坐标,坐标相对于文档。   .offset() 这个不接受任何参数。     ...() 这个方法不接受任何参数.position() 可以获取得元素相对于父元素的偏移位置。...+ position.left + ", top: " + position.top ); .scrollLeft()   获取匹配的元素集合中第一个元素的当前水平滚动条的位置或设置每个匹配元素的水平滚动条的的距离....scrollLeft(value)     设置每一个匹配元素的水平滚动条的距离。   ...$("div.demo").scrollLeft(300); .scrollTop()   获取匹配的元素集合中第一个元素的当前垂直滚动条的位置或设置每个匹配元素的垂直滚动条的距离。

    4.6K60

    Jquery简介选择的

    依赖库:jquery-XXX.js 语法:$() 正文 5择器 id选择器 $(“#id值”) 样例:$(#span1).css(“color”,”red”); 标签选择器 $(“标签名称”) Class...选择器 $(“.class的值”) 群组选择器 $(“标签名称1,标签名称2”) 包括选择器 $(“标签名称1 标签名称2”) 表单选择器 $(“:input”)全部的Input标签 $(“:text...:has(selector)返回值:Array匹配含有选择器所匹配的元素的元素一个用于筛选的选择器演示样例描写叙述:给全部包括 p 元素的 div 元素加入一个 text 类HTML...[attribute] 匹配包括给定属性的元素。注意,在jQuery 1.3中。前导的@符号已经被废除!假设想要兼容最新版本号,仅仅须要简单去掉@符号就可以。...‘:last’仅仅匹配一个元素,而此选择符将为每一个父元素匹配一个子元素 演示样例描写叙述:在每一个 ul 中查找最后一个 li HTML 代码: John

    2.3K20

    jQuery中不同元素的作用

    outerWidth() outerHeight() jQuery 遍历 jQuery 遍历,意为“移动”,用于根据其相对于其他元素的关系来“查找”(或选取)HTML 元素。...以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。 向上遍历 DOM 树 parent() - 返回被选元素的直接父元素。...向下遍历 DOM 树 children()- 返回被选元素的所有直接子元素。 find()- 返回被选元素的后代元素,一路向下直到最后一个后代。...noConflict() 方法 jQuery 使用 符号作为jQuery的简写。如果其他JavaScript框架也使用 符号作为简写怎么办?...当然,您仍然可以通过全名替代简写的方式来使用 jQuery: var jq = $.noConflict(); jq(document).ready(function(){ jq("button")

    3K00

    jQuery 查找on事件绑定元素的被绑定元素方法

    jQuery 查找on事件绑定元素的被绑定元素方法 遇到的问题 今天写了一个JQ插件,结果里面有一点问题.让我很郁闷.问题演示代码如下 $box.on('click', 'img', function(...){ $(this) }); 如上代码,当我点击这个图片的时候 $(this) 是指 img ....当然这是正确的. 而我需要找到 $box 也就是 img 的父级. 如果不是插件的话,我当然可以根据它的ID或者CLASS来进行查询.问题是,我是写的插件,也就是说,我并不知道它的这些信息是什么....解决方法 很多基础的东西不理解,就会出现我这样的问题.如同事所说,你是还不会爬呢,都学上跑了.因此,踩坑无数啊....解决方法如下: $box.on('click', 'img', function(){ $box.has($(this)) }); 如上,通过 .has 操作,就能找到唯一的父级被绑定元素了.

    5.5K10

    JQuery 遍历:发现元素的魔法之旅

    遍历基础在 JQuery 中,遍历主要通过选择器和遍历方法实现。首先,我们来看一下基础的选择器。1. 元素选择器元素选择器是最简单的一种选择器,通过元素的标签名选择对应的元素。...类选择器类选择器通过元素的类名来选择对应的元素。比如,选择所有具有 highlight 类的元素:选择器ID 选择器通过元素的唯一 ID 来选择对应的元素。比如,选择具有 unique ID 的元素:的选择器让我们能够准确地选取页面上的元素,但有时候我们需要更灵活的方式来定位元素。这时就需要使用 JQuery 的遍历方法。...总结通过本文的介绍,你已经对 JQuery 的遍历方法有了一个深入的了解。从基础的选择器到各种强大的遍历方法,你可以根据需要轻松地操作页面上的元素,实现丰富的交互效果。

    87611

    利用jQuery not()方法选取除某个元素外的所有元素

    日常的工作中可能会用到,选取处某个或者某些元素外的所有元素。...这时我们可以使用 jQuery 遍历中的 not() 方法来排除某些元素,例如根据元素的 #id ,.class 等排除,代码如下: $("div.content *").not(".keep"); 表示....content 类的 div 下除 .keep 类以外的所有元素; 另外,注意这里的 * 表示所有元素。...2、CSS选择器内以 * 星号开头的属性: 在CSS选择器内星号 + CSS 属性,一般区别 IE6 和 IE8 、IE6 和 FF,IE7 和 IE8,IE7 和 FF 浏览器之间属性 CSS HACK...声明:本文由w3h5原创,转载请注明出处:《利用jQuery not()方法选取除某个元素外的所有元素》 https://www.w3h5.com/post/439.html

    4K10

    jQuery常用的选择器

    选取页面中元素可以使用jQuery给我们提供的$()方法,该方法需要提供选择器作为参数,方法执行完成后会返回给我们一个jQuery对象,被选取的元素就包含在该对象中。...> p') 选择作为div元素子元素的所有p元素 后代选择器 $('div p') 选择作为div后代的所有p元素 相邻选择器 $('div + p' 选择紧邻div元素且位于其后的p元素 兄弟选择器...$('div ~ p') 选择作为div元素且位于其后的所有p元素 2.3 使用属性选择元素 选择器 实列 说明 tag[attr] $('p[class]') 选择所有带有class属性的p元素 tag...3的li元素 :lt(n) $('lt(3)') 选择匹配元素集合中索引小于3的li元素 :root $(':root') 选择文档的根元素 :header $(':header') 选择所有的标题元素...$('div:parent') 选择匹配元素集合中包含子元素的所有div元素(包括文本节点) 2.7 选取表单元素 jQuery提供了一些专门为表单设计的选择器,用于快速访问表单元素。

    1.2K20

    jquery获取第几个子元素_js获取元素的指定子元素

    ,$(“.items>input:first”) 在这里转一篇《jQuery选择元素的方法大全》 1....只是取的是最后一个; :only– child:返回所有没有兄弟节点的元素,注意,文本元素不是,也就是说类似这样的hellojquery,对于这段会选出...通过子选择器,容器选择器和属性选择器进行选择: *:匹配所有的元素,比如说:(*)会把页面中的所有元素都返回; E:匹配标签名为E的所有元素,如(“a”)返回所有链接元素; E F:匹配父元素E下的标签名为...V开头的; E[A 4.利用jQuery自定义的选择器进行选择: :button:选择任何按钮类型的元素,包括input[type=submit]等等; :checkbox:选择复选框元素; :file...:选择已选中的选项元素; :visible:选择可见元素; :enable:选择界面上已经可以使用的表单元素; :disabled:选择界面上被禁用的表单元素; :checked:选择已选中的复选框或单选按钮

    30.1K30

    jquery 获取鼠标和元素的坐标点

    获取当前鼠标相对img元素的坐标 $('div').mousemove(function(e) { varpositionX=e.pageX-$(this).offset().left;...(offset()方法) var offset = obj.offset(); 获取对象元素的位置,分别是元素的top和left,调用方法是:offset.left和offset.top,可知当前对象的左部和顶部位置...3,获取对象元素的宽度(width()方法) var right = offset.left+obj.width(); 实例中是获取对象的右下角位置,创建新窗口的左部位置。...4,获取对象元素的高度(height()方法) var down =offset.top+obj.height(); 实例中是获取对象的右下角位置,创建新窗口的顶部位置。...5.获取对象相对于父元素的位置(position()方法)   var x = obj.position().top;   var y =obj.position().left; <scripttype

    3.7K41
    领券