分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

jQuery的基础dom和css操作

发布时间:2023-09-06 01:17责任编辑:熊小新关键词:jQuery

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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved