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")// ???????????设置当前鼠标距离上边框的距离,设置鼠标跳转到距离上边框指定的距离
jQuery的基础dom和css操作
原文地址:http://www.cnblogs.com/bainianminguo/p/7653664.html