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>
相关文章
|
1月前
|
JavaScript 前端开发
使用jQuery操作DOM元素
使用jQuery操作DOM元素
16 1
|
4月前
|
前端开发 JavaScript
如何利用jQuery来向一个元素中添加和移除CSS类?
如何利用jQuery来向一个元素中添加和移除CSS类?
31 0
|
7月前
|
JSON JavaScript 数据格式
jQuery操作页面元素属性和内容
jQuery操作页面元素属性和内容
39 0
|
1月前
|
前端开发 JavaScript Java
第四章使用jQuery操作DOM元素
第四章使用jQuery操作DOM元素
9 0
|
1月前
|
JavaScript
jQuery操作DOM元素案例
jQuery操作DOM元素案例
10 0
|
1月前
|
JavaScript 索引
jQuery选择器 获取元素的十一种方式
jQuery选择器 获取元素的十一种方式
|
7月前
|
JavaScript 前端开发
jQuery改变单个元素属性问题
div嵌套div改变外层div字体颜色保留内层div字体颜色出现同时改变的情况解决方案
89 6
jQuery改变单个元素属性问题
|
3月前
|
JavaScript 前端开发
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
19 0
|
3月前
|
JavaScript
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
39 0
|
3月前
|
JavaScript
jQuery DOM2-第4次课-从某个元素出发,往上下左右找祖先、后代、兄弟然后对其进行增删改-附资料作业笔记
jQuery DOM2-第4次课-从某个元素出发,往上下左右找祖先、后代、兄弟然后对其进行增删改-附资料作业笔记
25 0