DOM操作：

1.新增元素：
创建元素：$("HTML")返回的创建成功的新元素
新增子元素：
元素.append(obj)

在匹配元素的里面新增一个子元素 追加方式 新元素作为最后一个子元素

例

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

var en = $("<p>我是第二个p标签</p>");
$("div").append(en);

})

2.元素
元素.prepend(obj) 在最前面为匹配新增子元素

3.新增父元素

元素.wrap(obj):为匹配元素添加父元素进行包裹 //在当前标签包裹一个父元素

4.新增兄弟元素：

元素.after(obj) 在匹配元素的后面添加兄弟元素

元素.before(obj)在匹配元素的前面添加兄弟元素

5.删除元素

元素.remove() 删除指定的匹配元素
元素.empty() 清空指定的匹配元素的内容 标签本身还在dom树上

6.修改元素

修改元素的html或文本 html()--->innerhtml text()---->innerTEXT
修改元素的属性：
元素.attr("属性名字") 读取匹配的元素的属性值
元素.attr("属性名","属性值")设置匹配元素的属性值
可以操作元素任何直接属性 //可以设置style css样式的边框 之后通过元素.attr("属性名","属性值")甚至来改变css样式可以操作html中没有定义的属性
.css()设置的内部样式
.addclass()设置内联样式---> classname="样式名"
removeclass
//外部样式：<link> 内部样式<head> 内联样式 在html内部

hasclass("classname") 判断匹配元素是否存在指定的类样式
toggleclass("classname") 切换样式
width() 获取匹配元素的高度 height（)获取匹配元素的高度

jquer中的常用事件“

和js一样也是用事件驱动执行机制
规律：
1.jQuery中的事件名事件js的事件名取出前缀“on”
2.jquer中事件被封装成方法
a.click(fuuction)（）{

//事件处理过程
}
b.dbclick(fuction(){ //双击事件

//处理过程

})

c.mouseover() 鼠标悬停

d.mouseout() 鼠标离开

事件冒泡：子元素冒泡到父元素标签的上面去了
阻止默认行为：return false;
keyuo(function(){})当按键时弹起时触发

例：

<img src="1138fbdeb48f8c5412bcb86a3a292df5e1fe7ff5.jpg" />

</div>
<input type="button" value="测试" />
<script type="text/javascript">

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

$("img").attr("src", "c7580255b319ebc4581f0bdc8226cffc1f1716fd.jpg");

})

</script>

</body>
</html>

例2：

#h {

height:900px;
width:670px;
border:1px solid;

}

$("img").attr("id","h");

例3：

$("img").toggle("hh");

例4：下拉菜单

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<style type="text/css">
* {

margin:0px;padding:0px;
}

body {

margin:40px;
}

div {

width:100px;
height:30px;
margin-bottom:3px;
background-color:red;
border:1px solid;
text-align:center;
cursor:pointer;
line-height:30px;

}
ul {

width:100px;
border:1px solid;

}
ul li {

list-style:none;
margin-bottom:5px;
text-align:center;
}
</style>
<div id="bd">选择城市</div>
<ul style="display:none">

<li>广东</li>
<li>深圳</li>
<li>上海</li>
<li>四川</li>

</ul>
<script src="Scripts/jquery-2.2.1.js"></script>
<script type="text/javascript">

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

$("ul").slideDown(500);
$("ul li").mouseover(function () {

$(this).css("background", "blue").siblings().css("background", "red");
return false;

})

$(document).click(function () {

$("ul").slideUp(500);

})

})

</script>
</body>
</html>

例5 文本域提交还能写多少字

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<script src="Scripts/jquery-2.2.1.js"></script>
<textarea cols="55" rows="23"></textarea>
<span>你还能输入<strong style="font-size:34px;color:red;">140</strong>字</span>
<script type="text/javascript">
$("textarea").keyup(function () {

var a = $(this).val().length
if (a < 140) {
$("strong").text(140 - a);
} else {

$("strong").text(0);

}
})
</script>

</body>
</html>

jquer 基础篇 dom操作的更多相关文章

  1. js基础篇(dom操作，字符串，this等)

    首先我们来看这样一道题 <div id='foo' class='aa bb cc'></div>写出如何判断此div中是否含有aa(注:aa成立,aaa不成立) 首先,我们一 ...

  2. python基础篇(文件操作)

    Python基础篇(文件操作) 一.初始文件操作 使用python来读写文件是非常简单的操作. 我们使用open()函数来打开一个文件, 获取到文件句柄. 然后通过文件句柄就可以进行各种各样的操作了. ...

  3. 【2017-03-28】JS基础、DOM操作

    一.JS基础 1.javascript功能 ⑴进行数据运算 ⑵控制浏览器功能 ⑶控制元素的属性.样式.内容 2.javascript位置和格式 可以放在html页的任意位置,也可以创建一个以js结尾的 ...

  4. Jquery基础之DOM操作

    转自:http://www.cnblogs.com/bro-ma/p/3063942.html JQuery中的DOM操作主要对包括:建[新建].增[添加].删[删除].改[修改].查[查找][像数据 ...

  5. JavaScript基础：DOM操作详解

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 JavaScript的组成 JavaScript基础分为三个部分: ...

  6. jquer基础篇二

    jquery中的过滤选择器: 1.通过标签的内容来进行过滤 :contains(’内容关键字‘) 例: $("input").click(function () { $(" ...

  7. 前端开发【第四篇: Dom操作】

    文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...

  8. HTML基础之DOM操作

    DOM(Document Object Model 文档对象模型) 一个web页面的展示,是由html标签组合成的一个页面,dom对象实际就是将html标签转换成了一个文档对象.可以通过dom对象中j ...

  9. DOM基础及DOM操作HTML

     文件对象模型(Document Object Model.简称fr=aladdin" target="_blank">DOM).是W3C组织推荐的处理可扩展标 ...

随机推荐

  1. JS正则检测密码强度

    今天遇到个需求,使用JS检测密码强度:密码长度最短为8,必须同时包含字母.数字.特殊符号. 代码如下: /*         * 检测密码复杂度         */         function ...

  2. inux中fork（）函数详解（原创！！实例讲解）

    转载自原创博客,欢迎继续转载 点击跳转到原文

  3. MySQL 事物控制和锁定语句

    一.MySQL支持对MyISAM和MEMORY存储引擎的表进行表级锁定,对InnoDB存储引擎的表进行行集锁定.默认情况下是自动获得. 二.LOCK TABLES 可以用于锁定当前线程获得的表,如果表 ...

  4. css pre标签

    浏览器:firfox49.0.2 在使用<pre>标签输出格式化文本的时候,遇到了一个小问题. 要在页面的底部输出两行文本,但是最后一行的文字总是距离屏幕的底部太大.下面图中的样子: 相关 ...

  5. windows7 安装PHP7 本地网站搭建

    2016年5月21日 18:21:12 星期六 PHP7用了vc14编译的, 因此windows要下载安装一个vc14的发行包, 只有16M 2016年6月1日 23:23:52 星期三 利用PHP自 ...

  6. [PHP][位转换积累]之pack和unpack

    一.前面的话 PHP的pack和unpack提供了为一系列数据打包(pack)和解包(unpack)成2进制流的功能,这个功能在面向字节的字符串处理和套接字的编程环境中尤为适用. 在了解这两个函数之前 ...

  7. unlink和close关系

    今天看到nginx用文件锁实现互斥的实现方案时,发现,unlink文件后还可需用fd,很是纳闷!于是搜索到此文,并自测了下,涨姿势了~分享给大家~ 原理: 每一个文件,都可以通过一个struct st ...

  8. mysql时间段内查询

    今天 select * from 表名 where to_days(时间字段名) = to_days(now()); 昨天 SELECT * FROM 表名 WHERE TO_DAYS( NOW( ) ...

  9. NET微信公众号开发-5.0微信支付(待测试)

    开发前准备. 1.0微信支付官方开发者文档 2.0官方demo下载 我们用c#所以选择.net版本 不过这个官方的demo根本跑步起来 3.0官方demo运行起来解决方案 4.0微信支付官方.net版 ...

  10. href使用 javascript:;与javascript:void(0)防跳到顶部

    有时候我们在编写js过程中,需要触发事件而不需要返回值,那么就可能需要这样的写法   href=”#”,包含了一个位置信息.默认的锚是#top,也就是网页的上端,当连续快速点击此链接时会导致浏览器巨慢 ...