jQuery的基础dom和css操作

最新推荐文章于 2025-09-05 11:22:47 发布

转载最新推荐文章于 2025-09-05 11:22:47 发布 · 71 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/bainianminguo/p/7653664.html

文章标签：

#javascript #ViewUI

本文介绍了使用jQuery进行网页元素内容、属性、样式的操作方法，包括获取和设置HTML内容、文本、表单值，修改元素属性，以及复杂的CSS样式调整等。

1、元素以及内容操作

 $(function () {
//            alert($("a").html());
//            获取元素中间的html内容，包括标签和文本内容

//            alert($("a").text());
//            获取元素中间的文本内容，包括其本身的文本内容和后代的文本内容,有html标签会自动清理

//            $("div").html("<em>www.163.com</em>")
//        替换html的内容<em>的标签是斜体的意思,如果有html标签，则会做html的解析
//             $("div").text("<em>www.163.com</em>")
//替换文本内容，有html会进行转义为普通字符，不会作为标签处理


//            alert($("input").val())
//            $("input").val("cui")

//            alert($("input[type=checkbox]").val())
//            $("input[type=checkbox]").val("魅力及")

//            获取表单标签的内容
//            设置表单标签的内容



//            元素的属性操作

            $("div").attr("type")

            $("div").attr("title","我是域名")

            $("div").removeAttr("title")

//            获取属性的值，不建议用attr来设置class属性
//            设置属性的值，不建议用attr来设置class属性
//            删除某个标签的属性


//            元素样式的操作
            $("div").css("color")
//            获取标签的color属性

            $("div").css("color","red")
//            设置标签的color的属性值

二、样式操作

$(function () {
//            alert($("div").css("color"))
//获取某个标签的color的属性的值，如果有多个，则只返回第一个的color的属性值


//            $("div").css("color","green")
//设置div标签的color的属性值为green,如果多有个，则多个都会被设置


//            var a = $("div").css(["color","height","font-size"])
//            可以同时获取多个属性的值,这里返回的a的类型为对象数组，可以用下面的方法来获取各个属性的值
//            for(i in a){
//                alert(i + ":" + a[i])
//            }


//            下面这种方式each更加简单，效果和上面的写法是一样的
//            $.each(a,function (m,n) {
//                    alert(m + ":" + n)
//            })


//用下面的方法可以同时设置多个css的属性的值
//            $("#bbb").css({
//                "color":"red",
//                "font-size":"50px",
//                "height": "200px",
//            })

//给某个标签添加css样式，可以同时添加多个，也可以只添加一个，添加多个，不同样式之间用空格隔开
//            $("div").addClass("aaa bbb")

//给某个标签删除css样式，可以同时删除多个，或者单个，不同样式之间用空格隔开
//            $("div").removeClass("aaa bbb")


//toggleClass的作用是切换class属性的意思，下面的例子的效果就是你点击某个标签，则该标签就会应用“bbb”这个css样式,做css样式qiehuan
//            $("*").click(function () {
//                $(this).toggleClass("bbb ccc")
//            })


//可以获取某个css样式的width属性的值，第一个返回的是一个字符串，比如200px，而第二个返回的是一个数字，为200,同样heigth的用法和width的用法是一样的
//            $("div").css("width")
//            $("div").width()



//position这个css属性是设置元素的位置的，如果他的值为absolute,则元素的位置为绝对路径，他可以设置2个属性，一个是left，一个是top,距离左边多远，距离上边多远
//            position: absolute;
//            left: 100px;
//            top: 300px;
//            offset得到的值就是距离显示屏的距离
//            alert($(".ddd").offset().top)
//            alert($(".ddd").offset().left)

//            position得到的值是距离父标签的记录

//            alert($(".ddd").position().top)
//            alert($(".ddd").position().left)


//            alert($(window).scrollTop())
//            获取当前鼠标距离上边框的距离

//            $(window).scrollTop("0px")
//            设置当前鼠标距离上边框的距离，设置鼠标跳转到距离上边框指定的距离

转载于:https://www.cnblogs.com/bainianminguo/p/7653664.html