公司网站建设高端网站建设网页设计,织梦 响应式网站,成都好玩的地方景点推荐,怎么查网站备案进度使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性#xff0c;其中attr(属性名)格式是获取元素属性名的值#xff0c;attr(属性名#xff0c;属性值)格式则是设置元素属性名的值。 例如#xff0c;使用attr(属性名)的格式获取页面中a元素的“… 使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性其中attr(属性名)格式是获取元素属性名的值attr(属性名属性值)格式则是设置元素属性名的值。 例如使用attr(属性名)的格式获取页面中a元素的“href”属性值并将该值的内容显示在span元素中如下图所示 在浏览器中显示的效果 从图中可以看出通过attr()方法可以方便地获取元素中指定属性名称的内容并将获取的内容通过html()方法显示在页面中。 操作元素的内容 使用html()和text()方法操作元素的内容当两个方法的参数为空时表示获取该元素的内容而如果方法中包含参数则表示将参数值设置为元素内容。 例如分别使用html()和text()方法获取一个元素的内pww并将获取的内容显示在不同的div元素中如下图所示 在浏览器中显示的效果 从图中可以看出html()方法可以获取元素的HTML内容因此原文中的格式代码也被一起获取而text()方法只是获取元素中的文本内容并不包含HTML格式代码所以它显示的内容并没有变“歪”。 操作元素的样式 通过addClass()和css()方法可以方便地操作元素中的样式前者括号中的参数为增加元素的样式名称后者直接将样式的属性内容写在括号中。 例如使用addClass()方法改变div元素的背景色和文字颜色如下图所示 在浏览器中显示的效果 从图中可以看出通过addClass()方法为div元素增加了两个样式名称从而改变了div元素的背景和文字颜色增加多个样式名称时要用空格隔开。 css()方法和addClass方法用法类似只是需要去设置具体样式了。 移除属性和样式 使用removeAttr(name)和removeClass(class)分别可以实现移除元素的属性和样式的功能前者方法中参数表示移除属性名后者方法中参数则表示移除的样式名 例如使用removeAttr()方法移除a元素中的“href”属性如下图所示 在浏览器中显示的效果 从图中可以看出使用removeAttr()方法移除元素的“href”属性后再次显示元素的“href”属性值时则为空值a元素中的文字也丢失可点击的效果。 使用append()方法向元素内追加内容 append(content)方法的功能是向指定的元素中追加内容被追加的content参数可以是字符、HTML元素标记还可以是一个返回字符串内容的函数。 例如在页面的body元素中追加一个具有“id”、“title”属性和显示内容的div元素如下图所示 在浏览器中显示的效果 从图中可以看出由于使用append()方法在body元素中追加了一些HTML 元素标记因此追加后这些元素标记直接生成对应的元素和属性显示在页面中。 使用appendTo()方法向被选元素内插入内容 appendTo()方法也可以向指定的元素内插入内容它的使用格式是 $(content).appendTo(selector) 参数content表示需要插入的内容参数selector表示被选的元素即把content内容插入selector元素内默认是在尾部。 例如使用appendTo()方法将div外的span元素插入div内如下图所示 在浏览器中显示的效果 从图中可以看出使用appendTo()方法将类别名为“red”的span元素插入到div元素的尾部相当于追加的效果。 使用before()和after()在元素前后插入内容 使用before()和after()方法可以在元素的前后插入内容它们分别表示在整个元素的前面和后面插入指定的元素或内容调用格式分别为 $(selector).before(content)和$(selector).after(content) 其中参数content表示插入的内容该内容可以是元素或HTML字符串。 例如调用before()方法在一个span元素插入另一个span元素如下图所示 在浏览器中显示的效果 从图中可以看出使用before()方法将HTML格式的内容插入到原有span元素内容之前而并不仅是它的内部文本。 使用clone()方法复制元素 调用clone()方法可以生成一个被选元素的副本即复制了一个被选元素包含它的节点、文本和属性它的调用格式为 $(selector).clone() 其中参数selector可以是一个元素或HTML内容。 例如使用clone()方法复制页面中的一个span元素并将复制后的元素追加到页面的后面如下图所示 在浏览器中显示的效果 从图中可以看出使用clone()方法复制元素时不仅复制了该元素的文本和节点还将它的“title”属性也一起复制过来了。 替换内容 replaceWith()和replaceAll()方法都可以用于替换元素或元素中的内容但它们调用时内容和被替换元素所在的位置不同分别为如下所示 $(selector).replaceWith(content)和$(content).replaceAll(selector) 参数selector为被替换的元素content为替换的内容。 例如调用replaceWith()方法将页面中span元素替换成一段HTML字符串如下图所示 在浏览器中显示的效果 从图中可以看出使用replaceWith()方法替换类别名为“green”的span元素替换之后旧元素完全由新替换的元素所取代。 使用wrap()和wrapInner()方法包裹元素和内容 wrap()和wrapInner()方法都可以进行元素的包裹但前者用于包裹元素本身后者则用于包裹元素中的内容它们的调用格式分别为 $(selector).wrap(wrapper)和$(selector).wrapInner(wrapper) 参数selector为被包裹的元素wrapper参数为包裹元素的格式。 例如调用wrap()方法将span用div元素包裹起来如下图所示 在浏览器中显示的效果 从图中可以看出红色区域的span元素被绿色边框的div元素通过wrap()方法包裹起来。 使用each()方法遍历元素 使用each()方法可以遍历指定的元素集合在遍历时通过回调函数返回遍历元素的序列号它的调用格式为 $(selector).each(function(index)) 参数function为遍历时的回调函数index为遍历元素的序列号它从0开始。 例如遍历页面中的span元素当元素的序列号为2时添加名为“focus”的样式如下图所示 在浏览器中显示的效果 从图中可以看出在使用each()方法遍历span元素时回调函数中的“index”参数为元素的序列号它从0开始当为2时表示第3个span元素增加样式。 使用remove()和empty()方法删除元素 remove()方法删除所选元素本身和子元素该方法可以通过添加过滤参数指定需要删除的某些元素而empty()方法则只删除所选元素的子元素。 例如调用remove()方法删除span元素中类别名为“red”的如下图所示 在浏览器中显示的效果 从图中可以看出使用remove(.red)方法只是把span元素中类别名为“red”的这部分元素给删除了。
