jQuery 添加元素

简介: jQuery 添加元素

jQuery 添加元素
append()
prepend()
after()
before()

$("table").append("<tr><th>商品编号</th><th>商品名称</th></tr>");
var row3 = $("tr").after("<tr><td>3</td><td>罗技鼠标</td></tr>");
var row2 = $("tr:last").before("<tr><td>2</td><td>dell台式机</td></tr>");

$("<tr><td>4</td><td>漫步者音箱</td></tr>").appendTo($("table"));
$("<tr><td>1</td><td>ThinkPad笔记本</td></tr>").insertAfter($("tr:first"));

});

jQuery 尺寸
width()
height()
outerWidth()
outerHeight()

    <script>
        $(function(){
            console.log($("#box1").width())
            console.log($("#box1").height())
            console.log($("div").outerWidth())
            console.log($("div").outerHeight())
            //$("#box").width(200);
            //$("#box").height(200);
        })
    </script>
</head>
<body>
    <div id="box1" style="width: 200px;height: 100px;border: 6px solid #ff0000;">
        box1
    </div>
    <div id="box2" style="width: 150px;height: 150px;border: 5px solid #ff0000;">
        box2
    </div>
</body>

jQuery 过滤
first()
last()
eq()
filter()
not()

    <script>
        $(function(){
            console.log($("div").first().attr("id"));
            console.log($("div").last().attr("id"));
            
            console.log($("div").eq(0).attr("id"));
            console.log($("div").eq(1).attr("id"));
            
            console.log($("div").not(1).attr("id"));
            
            console.log($("div").filter("#box1").attr("id"));
            console.log($("div").filter(".box1").attr("id"));

        })
    </script>
</head>
<body>
    <div id="box1" class="box1" style="width: 200px;height: 100px;border: 6px solid #ff0000;">
        box1
    </div>
    <div id="box2" style="width: 150px;height: 150px;border: 5px solid #ff0000;">
        box2
    </div>
</body>
相关文章
|
3月前
|
JavaScript 前端开发
使用jQuery操作DOM元素
使用jQuery操作DOM元素
|
3月前
|
前端开发 JavaScript
如何利用jQuery来向一个元素中添加和移除CSS类?
如何利用jQuery来向一个元素中添加和移除CSS类?
59 0
|
4天前
|
前端开发 JavaScript
jQuery改变元素的方法
jQuery改变元素的方法
6 1
|
4天前
|
JavaScript Java
分别使用java script和jQuery添加页面元素
分别使用java script和jQuery添加页面元素
6 0
|
6天前
|
JavaScript
JQuery——动态添加元素导致点击事件失效
JQuery——动态添加元素导致点击事件失效
13 0
|
2月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
2月前
|
JavaScript 前端开发
我如何使用jQuery动画我的元素
我如何使用jQuery动画我的元素
18 0
|
2月前
|
前端开发 JavaScript
jQuery改变元素
jQuery改变元素
|
3月前
|
移动开发 JavaScript 前端开发
jQuery 根据 DOM 元素 attribute 进行过滤的语法
jQuery 根据 DOM 元素 attribute 进行过滤的语法
|
3月前
|
存储 移动开发 JavaScript
jQuery 根据 css 类筛选 DOM 元素的代码
jQuery 根据 css 类筛选 DOM 元素的代码