• jQuery对选中的DOM元素进行HTML操作


    在一个html页面设计完成之后,页面的元素也就随着页面的加载完成而确定了。不过可以交互的动态页面,肯定需要随着用户的操作而修改页面中的元素内容,包括在元素中添加新的Html代码,修改或者获取元素的值等等

    1,操作html

    var a=$("table tr").html();

    这里a的值为本页面所有table标签里第一个tr标签里面的值。虽然选择器返回的是多个元素集合,但是因为html()方法,仅返回集合中第一个元素的内容

    $("table tr").html("<h1>hello</h1>")

    但是html()方法则会作用在选择器里的所有节点。

    2,操作文本

    和html不同 不带参数的text()方法会返回选择器中所有匹配元素包含的文本内容组合起来的文本

    $("table tr").text();

    这个方法会返回table节点下 tr节点里所有的文本内容

    $("table tr").text("hello");

    这个方法会将table节点下 tr节点里输出hello。

    需要注意:不要在text()方法里输入标签!为了表示字符串正常输出 会将标签转义

    3,操作值

    获取操作值:

    val()方法不带参数时则返回第一个匹配元素的值。如果是可以多选的元素(比如checkbox)则返回一个数组

    $("table tr").val();

    这个方法会返回table节点下第一个tr的值

    设置操作值:

    当在val()方法中传递一个字符串或者数组作为参数时,此参数将用来设置匹配集合中每个元素的值

    4,元素属性

    获取属性

    jQuery可以使用attr()方法来获取元素的值,

    $("selector").attr('属性名')

    此方法会返回选择器节点下第一个匹配元素的属性值,如果该节点没有该属性 则返回undefined

     

    修改属性

    根据传递的参数不同不同,attr()方法有两种方法格式修改匹配元素的每个属性值

    如果单个属性

    $("selector").val("class","myclass");

    如果多个属性

    $("selector").val({

    name:"mydiyname",

    class:"myclass",

    ........

    })

    删除属性

    $("selector").removeAttr("属性名")

     

    5,元素样式

    添加样式

    $("selector").addClass("main");

    为匹配的元素添加class="main"属性

    上面的方法attr()方法也可以修改节点元素的属性 但是区别在于attr()会替换掉之前的class属性。而addClass会在原先的class属性上追加样式

    移除样式

    $("selector").removeClass()// 如果不加参数则删除所有的样式 如果加参数则删除指定的样式

    切换样式

    $("selector").toggleClass("样式")  //如果样式存在就删除 不存在就添加。两极反转

    $("selector").toggleClass("样式",boolean) //布尔值确定是true就添加 false就删除。一般用方法来确定。

    6,元素css

    在jQuery中 设置DOM元素的样式只需要一个css()方法。无论指定的样式属性是通过style属性还是通过css类直接添加的,都可以使用css()获取

     读取元素

    $("p").css("color") //将返回p元素的字体颜色

     

    设置css样式

    $("div").css("color","#FFFFFF");

    也可以一次设置多个样式 使用map格式的参数就可以{属性:值,属性:值。。。。。 }

    元素css位置

    offset()方法

    用于获取匹配元素在全局的偏移量

    var point=$("img:last").offset(); //获取坐标

    var x=point.left; //获取left坐标值

    var y=point.top; //获取top坐标值

    position()方法

    用于获取匹配元素相对于父元素的当前偏移量

    元素css尺寸

    jQuery提供了6个方法来控制元素在css样式中的尺寸。分别是获取元素高度和宽度的height()和width()方法

    获取内部高度和宽度的innerHeight()和innerWidth()方法

    获取外部高度和宽度的outerHeight()和outerWidth()方法

    不和别人一样,不复制只真正理解
  • 相关阅读:
    Android环境说明 与 屏幕尺寸问题
    关于修改Visual Studio 2010 Ultimate RC的密钥
    安装Office 2010是出现windows installer服务不能更新一个或多个受保护的windows文件 错误
    Sharepoint 2010和阿里通进行集成完成短信通知功能
    用visual studio 2010 打开winform程序 时 无法运行 的解决方案
    一次尴尬的招聘经历
    TFS里的MSB3021错误
    程序员是强者
    修改密码导致应用程序池无法启动
    远离客户开发陷阱(转)
  • 原文地址:https://www.cnblogs.com/Vinlen/p/12706744.html
Copyright © 2020-2023  润新知