<!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. c++11 智能指针学习汇总

    c++为什么要引入智能指针? C/C++ 语言最为人所诟病的特性之一就是存在内存泄露问题,因此后来的大多数语言都提供了内置内存分配与释放功能,有的甚至干脆对语言的使用者屏蔽了内存指针这一概念.这里不置 ...

  2. 常用的CSS效果（1）

    单行省略 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 多行省略 display:-webkit-box; overf ...

  3. elementUI el-tree报错 Cannot read property ‘setCheckedKeys’ of undefined"

    给树节点赋值时,执行下面代码会报错,原因是:DOM元素未加载完成. 以下为错误写法. handleRowClick(row) { this.$refs.tree.setCheckedKeys(ids) ...

  4. Unity 2D 记录

    Unity 2D 记录 1. 环境配置 1.1 下载安装unity hub和vs code 搜索unity hub 进行下载 https://unity.com/download 安装vs code ...

  5. PLC入门笔记4

    逻辑指令及其应用 基本逻辑指令 续电器 PLC 公式 扩展逻辑指令 1.置位和复位线圈 置位ON/复位OFF (SET/RST) 不推荐置位复位线圈  可以用更好的方式去表达.. 2.能流取反开关 取 ...

  6. python中的变量定义

    1 变量名:由下划线.字母和数字组成 2 python中变量名的特殊含义: xx:标准的标识符,共有的 _xx:只是在from - import *时是不会被导入的,其他导入方式会被引入 隐藏变量还有 ...

  7. nginx 代理路径

    反向代理被代理url没有截取 /report/api/ /report/api/bussinessRisk/zhucai/creditInquiry 应该是/bussinessRisk/zhucai/ ...

  8. python 中倒是什么事可哈希的意思那？

    可哈希对象 python中的hashable(可哈希的)是什么意思 2018年12月29日 23:29:36 shangyj17 阅读数:511   不严谨但易懂的解释: 一个对象在其生命周期内,如果 ...

  9. JDK8：Lambda表达式操作List集合

    JDK8的流对list的处理提供了很大的方便,特别是做报表的时候才能真正体现出来这个功能的强大:结合日常使用过程,有两个体会:一个是减少了数据库连接,最忌讳在循环中进行数据查询,特别是嵌套多层循环的时 ...

  10. [极客大挑战 2019]BuyFlag 1

    好吧,又是一道违背我思想的题目,哦不哦不不对,是本人操作太傻了 首先进入主页面 没有发现什么奇怪的东西,查看源代码,搜索.php 可以看到有一个pay.php,访问查看 给我们了一些提示 FLAG N ...