前言：

前面学习了JQuery的选择器，今天开始学习新的知识，JQuery操作DOM元素。

元素属性的访问与设置

  • attr(name) 获取元素属性
  • attr(name,value) 单个属性设置
  • attr({key:value,key1:value1,...}) 多个属性设置
  • attr(name,function(index))通过函数返回的值修改属性
  • removeAttr(name) 删除单个属性值

元素内容的访问与设置

  • html() 获取元素的html内容
  • html(val) 修改元素的html内容
  • text() 获取元素的文本内容
  • text(val) 设置元素的文本内容
  • val()获取元素的值
  • val(value)设置元素的值

元素样式操作

  • css(name,value)  修改单个css样式值
  • addClass(class1) 增加css样式类别
  • toggleClass(class1)类别切换
  • removeClass(class1)删除类别

上面几个写个小例子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <style type="text/css">

        #searchText {

            height: 40px;

            width: 200px;

        }

        .searchBtnNormal {

            width: 100px;

            height: 45px;

            margin: 5px;

            background-color: deepskyblue;

            color: white;

            font-size: 16px;

            font-family: 宋体;

            border: 0;

        }

        .searchBtnClick {

            width: 100px;

            height: 45px;

            margin: 5px;

            background-color: blue;

            color: white;

            font-size: 16px;

            font-family: 宋体;

            border: 0;

        }

    </style>

    <script type="text/javascript">

        $(function () {

            $("#searchBtn").click(function () {

                //获取元素属性值

                alert($("#logo_icon").attr("src"));

                //修改元素单个属性值

                $("#logo_icon").attr("width", "135px");

                //修改元素多个属性值

                $("#logo_icon").attr({"width": "135px", "height": "80px"});

                //通过function修改元素属性值

                $("#logo_icon").attr("src", function () {

                    return 'http://www.hao123.com/redian/images/logo_new.gif';

                });

                //删除某个元素的属性值

                $("#logo_icon").removeAttr("width");

                //获取元素的html值

                var html = $("#bottomDiv").html();

                alert(html);

                //修改html元素的值

//                $("#bottomDiv").html(html + "<p>输入你要搜索的内容</p>");

                alert($("#bottomDiv>h3").text());

                $("#bottomDiv>h3").text('百度搜索天下无敌');

                alert($("#searchText").val());

                $("#searchText").val("");

                $("#searchBtn").toggleClass("searchBtnClick");

            });

        });

    </script>

</head>

<body>

<div>

    <div align="center">

        <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png"

             width="270px" height="179px" id="logo_icon">

    </div>

    <div align="center" id="bottomDiv">

        <h3>百度搜索</h3>

        <input type="text" name="search" value="" id="searchText" align="center">

        <input type="button" name="search_btn" value="百度一下" id="searchBtn" class="searchBtnNormal">

    </div>

</div>

</body>

</html>

节点元素操作

  • 创建节点元素
  • 插入节点
  • 复制节点
  • 删除节点
  • 替换节点
  • 包裹节点
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <style type="text/css">

        .bandDiv {

            float: left;

            font-size: 15px;

        }

    </style>

    <script type="text/javascript">

        $(function () {

            $("h5").click(function () {

                var $jdDiv = "<div class='bandDiv' id='jd'><img src='https://ss1.bdstatic.com/lvoZeXSm1A5BphGlnYG/icon/95541.png' alt='品牌'>京东</div>";

                //向所选择的元素中插入元素

                $("#contentDiv").append($jdDiv);

                //将选中元素中插入到目标元素

//                $($jdDiv).appendTo("#contentDiv");

                var $tbDiv = "<div class='bandDiv' id='tb'><img src='https://ss2.bdstatic.com/lfoZeXSm1A5BphGlnYG/icon/10062.png' alt='品牌'>淘宝</div>";

                //向所选择的元素中最前面插入元素

                $("#contentDiv").prepend($tbDiv);

                //将选中元素中插入到目标元素最前面

//                $($tbDiv).prependTo("#contentDiv");

                var $nmDiv = "<div class='bandDiv' id='nm'><img src='https://ss3.bdstatic.com/lPoZeXSm1A5BphGlnYG/icon/9483.png' alt='品牌'>糯米</div>";

                //向所选择的元素外部后面插入元素

                $("#tb").after($nmDiv);

                var $ddDiv = "<div class='bandDiv' id='dd'><img src='https://ss1.bdstatic.com/lvoZeXSm1A5BphGlnYG/icon/95517.png' alt='品牌'>当当</div>";

                //向所选择的元素外部前面插入元素

                $("#tb").before($ddDiv);

                //每个被选元素后面插入一个已有元素

                $("#tb").insertBefore($("#jd"));

                // 每个被选元素前面插入一个已有元素

                $("#nm").insertAfter($("#tb"));

                //复制节点

                var $vp = $("#tb").clone(true).attr({"id": "vp"});

                $("#nm").before($vp);

                $("#vp >img").attr("src", "https://ss1.bdstatic.com/lvoZeXSm1A5BphGlnYG/icon/95693.png");

                //替换节点

                $("#vp").replaceWith("<div class='bandDiv' id='vp'><img src='https://ss1.bdstatic.com/lvoZeXSm1A5BphGlnYG/icon/95517.png' alt='品牌'>唯品会</div>");

                //所有选择的元素用加粗包裹起来

                $("#contentDiv >div").wrap("<b></b>");

                //遍历元素

                $("#vp").each(function () {

                    $("#vp >img").attr("src", "https://ss1.bdstatic.com/kvoZeXSm1A5BphGlnYG/icon/93289.png");

                });

                //删除节点

                $("#nm").remove();

            });

        });

    </script>

</head>

<body>

<div>

    <h5>动态添加元素</h5>

    <div id="contentDiv">

    </div>

</div>

</body>

</html>

总结：

今天简单学习使用了一下JQuery操作DOM元素的一些语法。

Hybrid App开发之jQuery操作DOM的更多相关文章

  1. Hybrid App开发之jQuery基础

    前言: 前面学习了JavaScript/Html/Css的基础知识,今天学习一下常用js框架jQuery的使用进行快速的开发. JQuery的基本功能: 方位和操作DOM元素 控制页面样式 对页面事件 ...

  2. Hybrid App开发之jQuery选择器

    前言: 前面学习了JQuery的简单使用,今天进一步学习一下JQuery的选择器. 什么是选择器? JQuery选择器通过标签名.属性名或者内容对DOM元素进行快速准确的选择,而不必担心浏览器的兼容性 ...

  3. Hybrid App开发之JavaScript基础

    前言: 前面学习了html和css的基本使用,今天开始学习JavaScript的使用. 什么是JavaScript JavaScript是一种基于对象(Object)和事件驱动(Event Drive ...

  4. Hybrid App开发之css样式使用

    前言: 前面学习了html,今天学习一下css的基本使用,看下html与css之间是如何结合来编写前端网页的. CSS 是什么? CSS 是 Cascading Style Sheets(级联样式表) ...

  5. Hybrid App开发之Html基本标签使用

    前言: 前面简单学习了html简单标签的使用,今天学习一下其他的标签的使用. HTML的超链接 1.)创建一个超链接 <div> <p> <a href="ht ...

  6. jQuery操作Dom、jQuery事件机制、jQuery补充部分

    jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...

  7. web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记

    hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...

  8. jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法

    一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...

  9. 第四章 使用jQuery操作DOM

    第四章 使用jQuery操作DOM 一.DOM操作 在jQuery中的DOM操作主要可分为样式操作.文本和value属性值操作.节点操作: 节点操作又包含属性操作.节点遍历和CSS-DOM操作. 其中 ...

随机推荐

  1. 基于swift MKMapkit 开发的地图定位导航

    //  DTOneViewController.swift //  Mapper-JSON // //  Created by kcl on 16/8/8. //  Copyright © 2016年 ...

  2. poj3159最短路spfa+邻接表

    https://vjudge.net/contest/66569#problem/K 相当于模板吧,第一次写spfa的 #include<iostream> #include<cst ...

  3. spring、spring mvc、mybatis框架整合基本知识

    学习了一个多月的框架知识了,这两天很想将它整合一下.网上看了很多整合案例,基本都是基于Eclipse的,但现在外面公司基本都在用Intellij IDEA了,所以结合所学知识,自己做了个总结,有不足之 ...

  4. MySQL游标的简单实践

    Q:为什么要使用游标? A: 在存储过程(或函数)中,如果某条select语句返回的结果集中只有1行,可以使用select into语句(上几篇博客有介绍到用法)来得到该行进行处理:如果结果集中有多行 ...

  5. j2ee分布式架构 dubbo + springmvc + mybatis + ehcache + redis 分布式架构

    介绍 <modules>        <!-- jeesz 工具jar -->        <module>jeesz-utils</module> ...

  6. zepto全选按钮之全选会根据按钮是否被全部选中更改状态

    在做手机端二次开发购物车的时候,发现zepto全选,没找到,或者功能不是自己想要的 后来做好,分享给需要的人 //全选或多选处理      var CheckAll = $('#items_check ...

  7. Android 开发—— 小工具，大效率

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:姚志锋 一.Hugo插件 -- 打印方法运行时间 首先申明下,此Hugo非 彼Hugo(Hugo是由Go ...

  8. html5，js插件实现手机端实现头像剪切上传

    思路:先打开相册,选取图片,在剪切图片,转化为base64格式,然后上传到七牛存储,返回url,再传给后端,整个流程就是这样.用的是angular框架,图像插件用到imagecropper.js,废话 ...

  9. 【设计模式】单一职责原则(SRP)

    单一职责原则是面向对象原则五大原则中最简单,也是最重要的一个原则, 他的字面定义如下: 单一职责原则(Single Responsibility Principle, SRP): 一个类只负责一个功能 ...

  10. CopyOnWriteArrayList实现原理及源码分析

    CopyOnWriteArrayList是Java并发包中提供的一个并发容器,它是个线程安全且读操作无锁的ArrayList,写操作则通过创建底层数组的新副本来实现,是一种读写分离的并发策略,我们也可 ...