<!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. opencv对鱼眼图像畸变矫正

    import numpy as np ''' #T_cam_imu body_T_cam0: !!opencv-matrix rows: 4 cols: 4 dt: d data: [0.003489 ...

  2. Charles 抓取 HTTPS 协议内容，需要做什么操作？

    抓取 HTTPS 需要安装证书,Charles 端需要安装 Android.iOS手机端也需要安装 电脑的 Charles 操作:1.proxy - proxy setting - http prox ...

  3. 接口文档API、剖析http协议, 原生http请求函数

    http协议:超广本传输协议 特点: 短连接 请求完成后就断开 无状态  对于事务处理无记忆能力 媒体独立 客户端要指定适合的传输内容类型,如json http  是建立在tcp/ip协议之上的应用层 ...

  4. Jenkins集成appium自动化测试

    一,引入问题 自动化测试脚本绝大部分用于回归测试,这就需要制定执行策略,如每天.代码更新后.项目上线前定时执行,才能达到最好的效果,这时就需要进行Jenkins集成. 不像web UI自动化测试可以使 ...

  5. Upload上传组件，上传之后，再次预览下载按钮不见问题

    如图所示红色部分不见了. 解决方式: fileList 代表的是上传后当前文件内容的具体信息名称,该数据决定了上传之后页面展示的内容 this.fileList.push({ uid:remark.i ...

  6. windows11中使用ctypes运行时出错:AttributeError: function *** not found

    最近我在研究用ctypes实现python调用c,按照晚上的教程写下了类似下面的c程序: #include <stdio.h> int nn_test(int num){ printf(& ...

  7. nRF52832出现“APP_UART_COMMUNICATION_ERROR”的错误的问题

    在调试nRF52832的uart的过程中,发现调试信息会时不时打印"APP_UART_COMMUNICATION_ERROR"这个错误,看上去似乎毫无规律.查看SDK的相关说明,可 ...

  8. Connect to D365 CE with multi-factor Authentication using C# sharp

    Effective Feb 4, 2020 - Use of the WS-Trust (Web-Service Trust) authentication security protocol whi ...

  9. 关于Maven的使用

    Maven基础入门 一.maven是什么 Apache Maven,是一个项目管理及自动构建的工具,有Apache软件基金会所提供. Maven是用Java语言编写的,是一款可以跨平台的软件. Mav ...

  10. iframe页面加载完成为什么还是获取不到里面的dom

    iframe页面加载完成为什么还是获取不到里面的dom? 因为Iframe是跨域,跨域的情况下是无法获取到iframe里面的DOM的,即使iframe加载完成,也无法获取到里面的DOM. 有什么方法获 ...