<!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. Vue中的样式穿透，修改element-ui组件样式不生效

    在Vue项目中用的比较多的就是组件,为了实现组件的样式模块化.我们通常会在style标签中添加一个scoped属性,这样css样式只能作用于当前的Vue组件.使组件之间的样式相互独立,当调用该组件的时 ...

  2. 使用idea2021.1.3新建一个Web项目教程

    使用idea2021.1.3新建一个Web项目教程 文章目录 一.新建项目 二.在WEB-INF下创建classes,lib文件夹 三.配置WEB容器(tomcat Server) 一.新建项目 点击 ...

  3. What is the Best Python IDE for Data Science?

    Created by Guido van Rossum, Python was first released back in 1991. The interpreted high-level prog ...

  4. 从零开始：在树莓派上安装OpenEuler

    树莓派(Raspberry Pi)是一款基于ARM架构的小型电脑,它的便携性和低功耗性能使它成为制作物联网设备或运行嵌入式系统的理想选择.在这篇博客中,我们将介绍如何在树莓派上安装OpenEuler操 ...

  5. 新安装的eclipse没有新建java project----解决方法：安装插件

    问题描述:最近新安装的一个eclipse版本,建立新工程的时候发现没有java project选项,如下: 百度了一些资料:https://blog.csdn.net/sinat_41752599/a ...

  6. ios底部安全距离

    一.使用背景 苹果官方推荐:使用env(),constant()来适配,env()和constant(),是IOS11新增特性,用于设定安全区域与边界的距离 safe-area-inset-left: ...

  7. 20181224《网络攻防技术》Exp 8 Web综合

    20181224<网络攻防技术>Exp 8 Web综合 目录 20181224<网络攻防技术>Exp 8 Web综合 相关知识点总结 web前端 web后端 数据库编程 实验内 ...

  8. apache axis2 生成客户端实体类

    打开控制台,cd至压缩包(见下方网盘链接)的bin目录下执行如下命令.只用到了axis2-1.4.1-bin.zip. war目前不知道有什么用,因为资源不好找,留着备用吧 WSDL2Java -ur ...

  9. 试题管理/在线课程/模拟考试/能力评估报告/艾思在线考试系统www.aisisoft.cn

    艾思软件发布在线考试系统, 可独立部署, 欢迎咨询索要测试账号 一. 主要特点: ThinkPHP前后端分离框式开发 主要功能有: 在线视频课程, 模拟考试, 在线考试, 能力评估报告, 考试历史错题 ...

  10. windows系统错误代码

    0  操作成功完成.  1  功能错误.  2  系统找不到指定的文件.  3  系统找不到指定的路径.  4  系统无法打开文件.  5  拒绝访问.  6  句柄无效.  7  存储控制块被损坏. ...