jQuery（三）DOM操作

最新推荐文章于 2024-07-05 14:21:58 发布

不许偷苹果

最新推荐文章于 2024-07-05 14:21:58 发布

阅读量180

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_38904347/article/details/82859655

版权

jquery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

jQuery的属性：
val();：获取value值
html();：获取html内容
text();：获取文本内容

console.log($('#content').html());
console.log($('#content').text());

attr();：设置属性和值

$("#content").attr("style","color:red;");
$("#content").attr("style","color:red;border:1px solid pink;");
$("img").attr({"width":"300","height":"200","alt":"图像"});

使用函数设置属性和值：

规定要返回属性值到集合的函数
 index：接受集合中元素的 index 位置
 currentvalue：接受被选元素的当前属性值
 $('img').attr("width",function(index,currentvalue){
         return currentvalue-50;
 })
 示列：
 $('img').attr('height',function(n,v){
    if(n==0)
        return v-100;
})

prop();：设置属性和值

$("#content").prop("style","color:red;");
$("img").prop({"width":"300","height":"200","alt":"图像"});

attr()和prop()区别
标签自定义属性使用attr获取，prop只能获取对象应有属性

css();：设置样式

设置对象的单一css样式
$('.p01 > font').css("color","red");
设置对象的多个css样式：obj.css({属性名:'属性值',属性名:'属性值',...});
$('.p01 font').css({"color":"red","font-weight":"bold"});

addClass();：添加class
removeClass();：删除class
toggleClass();：有责删除class，无责添加class

<style>
    .p02{
         color:orange;
     }
</style>
<script>
	$('#c01').addClass('p02');
	$('#c01').removeClass('p02');
	$('#c01').toggleClass('p02');
	$('#div_c').removeClass('p02');
</script>

append()：方法在被选元素的结尾插入指定内容
prepend()：在被选元素的开头插入内容
在这里插入图片描述
语法：$(selector).append(content,function(index,html));
注意：是在被选元素内部进行添加
content：必需。规定要插入的内容（可包含 HTML 标签）。
function(index,html)：可选。规定返回待插入内容的函数。index - 返回集合中元素的 index 位置。html - 返回被选元素的当前 HTML。
before();：元素前面添加内容，元素外部
after();：元素末尾添加内容，元素外部
在这里插入图片描述
示列：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../js/jquery.js" type="text/javascript"></script>
    <style type="text/css">
        div{
            width:200px;
            height:200px;
            margin:0 auto;
            border:1px solid red;
            margin-top:100px;
            text-align:center;
        }
    </style>
    <script type="text/javascript">
        $(function(){
            var str = "你好"
            $('div:eq(0)').before('<p>前边</p>');
            $('div:eq(0)').after('<p>后边</p>');
            $('div:eq(1)').append('<p>后边</p>');
            $('div:eq(1)').prepend('<p>前边</p>');
            $('div:eq(1)').append(function(a,b){
                if (a==0) {
                    $('div:eq(1)').prepend(str);
                    $('div:eq(1)').append(b);
                }
            })
        })
    </script>
</head>
<body>
    <div>111</div>
    <div>222</div>
</body>
</html>