<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .box{width:100px;height:100px;border: solid 2px black;}

    </style>

</head>

<body>

<div class="box" abc="admin">

    <div class="box1">

        <div class="box2">

            <span>hello</span>

            <input type="text" value="123">

        </div>

    </div>

</div>

</body>

<script src="../jquery.js"></script>

<script>

     console.log($("span").parent())     // 直接父级

     console.log($("span").parents())    // 所有父级

     console.log($("span").parentsUntil(".box")) // 指定范围父级，不包括这个父级元素。

    // 原生内容操作对比

    // innerHTML

    // innerText

    // value

    // jq内容操作

     console.log($(".box").html()); //含标签

     console.log($(".box").text());//只是文本

     $(".box").html("<mark>world</mark>") //box里面会多一个mark标签，标签里面写着world

     $(".box").text("<mark>world</mark>")//box里面写着文本<mark>world</mark>

     console.log($("input").val()); //console.log input的默认值

     $("input").val("hello") //设置input的value的值

    // 属性操作

    // addClass见jq第一篇

    // removeClass见jq第一篇

    // css()

     console.log($(".box").css("width"))//一个参数是获取，获取box的宽度

     $(".box").css("width","300px") //两个参数是设置，设置box的宽度

     $(".box").css({

         width:400,

         height:500,

         background:"red"

     })   //一个对象是批量设置

     console.log($(".box").css(["width","height","border"]));//一个数组是批量获取，获取的也是一个对象：{width: "100px", height: "100px", border: "2px solid rgb(0, 0, 0)"}

     var obj = $(".box").css(["width","height","border"])

     $.each(obj,function(key,val){

         console.log(key,val)

     }) //遍历，输出key和val：

//            width 400px

//            height 500px

//            border 2px solid rgb(0, 0, 0)

//     attr(),相当于js中的attribute，可操作内置也可操作非内置

     console.log($(".box").attr("abc")) //一个字符获取

     $(".box").attr("abc","qwe") //两个字符，设置

     $(".box").attr({

         a:10,

         b:20,

         c:30

     }) //一个对象批量设置

     $(".box").removeAttr("b") //删除

</script>

</html>

jQ-DOM属性的操作的更多相关文章

  1. jQuery DOM/属性/CSS操作

    jQuery DOM 操作 创建元素 只需要把DOM字符串传入$方法即可返回一个 jQuery 对象 var obj = $('<div class="test">&l ...

  2. jquery：jqery表单属性 值操作

    重置表单(且清空隐藏域)  $('#myform')[0].reset() ​​ DOM属性相关操作 返回属性值 $(selector).attr(attribute) 设置属性值 $(selecto ...

  3. JavaScript 节点操作Dom属性和方法(转)

    JavaScript 节点操作Dom属性和方法   一些常用的dom属性和方法,列出来作为手册用. 属性:   1.Attributes 存储节点的属性列表(只读)   2.childNodes 存储 ...

  4. Dom的样式操作和属性操作

    如果说web的研究对象是html和css,那么整个dom结构,包含html树和dom树的dom结构才是研究对象,而在整个页面呈现上面,js起到的作用则是异步的用户行为. 按照上面整个思路,获取dom元 ...

  5. 第一百六十六节，jQuery，基础 DOM 和 CSS 操作，元素内容，元素属性，css和class，元素宽度高度、偏移、滚动条

    jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...

  6. jQuery 源码分析(十三) 数据操作模块 DOM属性 详解

    jQuery的属性操作模块总共有4个部分,本篇说一下第2个部分:DOM属性部分,用于修改DOM元素的属性的(属性和特性是不一样的,一般将property翻译为属性,attribute翻译为特性) DO ...

  7. jQuery属性操作之DOM属性操作

    DOM属性操作是对DOM元素的属性进行读取.设置和移除操作, 比如prop(). removeProp(). 1. prop() 1.1 使用prop()获取返回值 prop() 用于返回属性值时, ...

  8. Jquery操作的是内存数据，H5 dataset操作的是dom属性

    Jquery操作的是内存数据,H5操作的是dom属性

  9. 2018-06-27 jq文档处理与jq对象属性操作

    jQ文档处理: 内部插入 A.append(B) ->把B后追加到A内部中 B.appendTo(A) ->把B后追加到A内部中 A.prepend(B) ->把B后追加到A内部中 ...

  10. 操作属性、操作样式 - DOM编程

    1. 操作属性 1.1 HTML 属性与 DOM 属性的对应 <div> <label for="username">User Name: </lab ...

随机推荐

  1. Python循环任务，错误打包输出

    有时候,多个任务循环在跑,但不想中间任何一个错误,停止主线程,但又想在主线程运行结束后,采集运行过程中所有的错误信息. 这种刁钻的想法,我自问自答,记录一下操作方法. err_list = [] ma ...

  2. 中国人民公安大学 Chinese people’ public security university 网络对抗技术 实验报告4

    中国人民公安大学 Chinese people' public security university 网络对抗技术 实验报告   实验四 恶意代码技术     学生姓名 陈禹 年级 2018 区队 ...

  3. Vue-数据代理

    Vue中的数据代理 数据代理定义 所谓数据代理,就是通过一个对象代理对另一个对象中的属性的操作(读/写).说白了就是操作一个对象上的属性可以读取和修改另一个对象上的属性,这种关系就叫做数据代理. 在V ...

  4. Shell脚本基本命令4

    使用join连接字段 1.$ cat >sales 创建salse文件 #业务员数据   注释说明 #业务员量 joe 100 jane 200 herman 150 chris 300 2.$ ...

  5. JAVA、Tomcat服务器

    JAVA如何配置服务器 Tomcat服务器: 1．Web开发中的常见概念: (1)B/S系统和C/S系统 Brower/Server:浏览器 服务器 系统 ----- 网站 Client/Server ...

  6. Java中接口相关知识

    1.接口 1.1接口概述 接口就是一种公共的规范标准,只要符合标准,大家都可以通用 Java中的接口更多的体现在对行为的抽象 1.2接口的特点 接口用关键字interface修饰,格式:public ...

  7. Centos8 防火墙

    Centos8 防火墙 一: 防火墙端口相关操作 1:查看防火墙某个端口是否开放 firewall-cmd --query-port=3306/tcp 2:开放防火墙端口 注意:开放端口后要重启防火墙 ...

  8. python中将各种类型表达式中的 \ 符号，都看作转义符

    python中将各种类型表达式中的 \ 符号,都看作转义符,如 \n 代表换行  \t  代表空tab,还发现 \a 相当于什么都不是,改行末尾的 \ 的意思是该行还没写完,接着下边一行的内容. 转义 ...

  9. Lombok和MapStruct冲突

    Lombok和MapStruct冲突导致无法生成正确的class文件. lombok自动生成getset等冗余代码. MapStruct对象copy.传统的BeanUtils.copy等利用的反射原理 ...

  10. Flask-Migrate数据库模型映射

    1.Flask-Migrate介绍 flask-migrate可以十分方便的进行数据库的迁移与映射,将我们修改过的ORM模型映射到数据库中.flask-migrate是基于Alembic进行的一个封装 ...