Hybrid App开发之jQuery操作DOM
前言：
前面学习了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的更多相关文章
- Hybrid App开发之jQuery基础
前言: 前面学习了JavaScript/Html/Css的基础知识,今天学习一下常用js框架jQuery的使用进行快速的开发. JQuery的基本功能: 方位和操作DOM元素 控制页面样式 对页面事件 ...
- Hybrid App开发之jQuery选择器
前言: 前面学习了JQuery的简单使用,今天进一步学习一下JQuery的选择器. 什么是选择器? JQuery选择器通过标签名.属性名或者内容对DOM元素进行快速准确的选择,而不必担心浏览器的兼容性 ...
- Hybrid App开发之JavaScript基础
前言: 前面学习了html和css的基本使用,今天开始学习JavaScript的使用. 什么是JavaScript JavaScript是一种基于对象(Object)和事件驱动(Event Drive ...
- Hybrid App开发之css样式使用
前言: 前面学习了html,今天学习一下css的基本使用,看下html与css之间是如何结合来编写前端网页的. CSS 是什么? CSS 是 Cascading Style Sheets(级联样式表) ...
- Hybrid App开发之Html基本标签使用
前言: 前面简单学习了html简单标签的使用,今天学习一下其他的标签的使用. HTML的超链接 1.)创建一个超链接 <div> <p> <a href="ht ...
- jQuery操作Dom、jQuery事件机制、jQuery补充部分
jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...
- web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记
hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...
- jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法
一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...
- 第四章 使用jQuery操作DOM
第四章 使用jQuery操作DOM 一.DOM操作 在jQuery中的DOM操作主要可分为样式操作.文本和value属性值操作.节点操作: 节点操作又包含属性操作.节点遍历和CSS-DOM操作. 其中 ...
随机推荐
- string 学习
#include <string> 1.取当中某个字符 与传统一样 c[11]="0123456789"; c[1]=1; ps:好慢 .. 会不会GG... #inc ...
- Ajaxfileupload 总结（包括插件处理json格式bug的解决方案）
Ajaxfileupload 是一款轻量级js的上传插件,简单容易上手,今天简单学习了下. 1,引用jquery和Ajaxfileupload .js <script src="~/S ...
- MNIST机器学习
MNIST是一个入门级的计算机视觉数据集,它包含各种手写数字图片: 1. MNIST数据集 MNIST,是不是听起来特高端大气,不知道这个是什么东西? == 手写数字分类问题所要用到的(经典)MNIS ...
- mongodb新人扫盲
前言 数据库基本命令 集合(表)命令 增加数据 删除数据 更新数据 使用update()更新 使用save()命令实现upsert 自动更新信息 查询数据 mongoose的使用 前言 mongodb ...
- My-Blog搭建过程：如何让一个网站从零到可以上线访问
文章简述 5月13号的时候,上线了自己的个人博客网站:http://blog.hanshuai.xin,随后在平台上发布了一篇关于My-Blog的介绍博客<Docker+SpringBoot+M ...
- Linux下Samba服务器的安装和配置
第一步:sudo apt-get install samba smbclient 安装samba服务器. 第二步:打开/etc/samba/smb.conf文件,在末尾添加下面的字段: [用户名] c ...
- Windows 自动获取IP脚本
@echo off echo 正在自动获取IP地址.... set 连接名称=以太网 netsh interface ip set address name = "%连接名称%" ...
- 关于SESSION失效和关闭浏览器问题
关闭浏览器和session失效没有任何关系, session本身有一个存活时间,在tomcat中默认的是30分钟, 这也就是楼上说的不是马上失效 但和浏览器不要划等号 因为即使你浏览器一直开着,如 ...
- Jmeter结构体系及运行原理
Jmeter结构体系 把Jmeter的结构体系拆分为三维空间,如图: X1~X5:是负载模拟的一个过程,使用这些组件来完成负载的模拟: X1:选择协议,模拟用户请求,检查服务器响应是否正确,然后收集结 ...
- 一、 开篇（ASP.NET MVC5 系列）
这个教程将教你一些用VS2013创建ASP.NET MVC 5 Web应用程序基础知识.为了避免开发工具的不一致而带来的一些小麻烦,建议你使用和我一样的开发工具VS2013英文版. 开发工具:Visu ...