<!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. vs2013如何添加扩展库函数

    本文仅针对C和C++ vs2013下载C/C++编译器后,能够包含常见的头文件,stdlib.h,stdio.h,math.h这些.如果有其他需求例如:调用GL/glfw32.h,freeglut.h ...

  2. 项目实训DAY 11-12 学习

    在神经网络可视化工具中,选择了三种,NNSVG,PlotNeuralNet,GraphCore 前两者应该比较好实现,例子都跑通了,对于定制的代码读起来也不难.PNN的示例图如下 最后一个虽然有实例图 ...

  3. PHP Redis - List (列表)

    Redis列表是简单的字符串列表,按照插入顺序排序. 一个列表最多可以包含  232-1 个元素 (4294967295, 每个列表超过40亿个元素) 插入元素在列表头部(lPush,Lpushx) ...

  4. JS笔记（二）：数据类型

    镇楼图 Pixiv:torino 三.数据类型 原始类型 原始类型像是string.symbol.number之类的都只能存储原子值,而不能像对象一样随意扩展.但是为了提供额外功能,采取了轻量的对象包 ...

  5. python3GUI--实用！B站视频下载工具（附源码）

    目录 一．准备工作 二．预览 1.启动 2.解析 3.下载中 4.下载完成 5.结果 三．设计流程 1.bilibili_video_spider 2.视频json的查找 四．源代码 1.Bilibi ...

  6. 网络游戏同步法则 -- skywind

    转载出处:http://www.skywind.me/blog/archives/112 网路的硬件也有限,而人的创造也无限,在公网平均130ms的Latency下,是不存在"完全的&quo ...

  7. Vue Yarn npm nodejs - 安装、配置

    一.安装 node.js 1.从node.js官网下载并安装,安装时,安装路径可以修改为非C盘 2.使用 node --version 命令在 CMD 中查看 nodejs 安装的版本,显示了安装的版 ...

  8. 1005.Django自定义过滤器及标签

    一.关于自定义 自定义的引入 内置函数--------->自定义函数 内置模块--------->自定义模板 内置过滤器------>自定义过滤器 内置标签---------> ...

  9. 重写org.springframework.beans.BeanUtils的copyProperties方法，能在实体映射的时候把纯数字格式的日期转格式

    就是在拷贝的时候加个正则的校验,如果是纯数字的日期 就转成yyyy-MM-dd HH:mm:ss的格式原本想直接用注解在实体转格式,但是那样实体会变成日期格式,所以放弃了,直接重写拷贝的方法比较简单 ...

  10. 【MSSQL】远程打开对象

    opendatasource https://docs.microsoft.com/zh-cn/sql/t-sql/functions/opendatasource-transact-sql?view ...