Day16 DOM &jQuery
一、本节主要内容
JavaScript
正则表达式
字符串操作的三个方法 DOM(知道就行，一般使用jQuery)
查找：
直接查找：
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合
间接查找：
parentNode //父节点
childNodes //所有子节点
firstChild //第一个子节点
lastChild //最后一个子节点
nextSibling //下一个兄弟节点
previousSibling //上一个兄弟节点 parentElement //父节点标签元素
children //所有子标签
firstElementChild //第一个子标签元素
lastElementChild //最后一个子标签元素
nextElementChild //下一个兄弟标签元素
previousElementSibling //上一个兄弟标签元素
操作：
t = document.getElementById('i2') jQuery
$("#i1")
模块，DOM和JavaScript class操作：
className
classList.add
classList.remove(cls) 样式修改：
<input type="text" style="color:red;font-size:40px" />
tag = ...
tag.style.color = 'white';
tag.style.fontSize = '200px'; 属性：
setAttribute
getAttribute
removeAttribute tabObj.checked = true
jQuery:操作数据，prop(checked.true) 创建标签：
（1）对象(优先使用)
var tag = document.createElement('a')
tag.innerText("smartisian")
tag.className = "c1"
tag.href = "http://t.tt" p1 = document.getElementById('d1');
p1.insertAdjacentElement('afterBegin', document.createElement('')); tag.innerText = 'test';
t1.insertBefore(tag,t1.children[0])
（2）字符串
var tag = "<a class="c1" href="http://t.tt">T3</a>" p1 = document.getElementById('d1');
p1.insertAdjacentHTML('beforeEnd',tag);
p1.insertAdjacentHTML('afterEnd',tag);
p1.insertAdjacentHTML('beforeBegin',tag);
p1.insertAdjacentHTML('afterBegin',tag);
p1.insertAdjacentText('afterBegin',tag); 点赞：
创建标签，定时器（大小、位置、透明度）
1、this当前触发事件的标签
2、createElement
3、appendChild
4、setInterval创建定时器
5、clearInterval删除定时器
6、removeChild删除子标签 定时器：
setTimeOut,clearTimeOut
setInterval 多次定时器
clearInterval 清除定时器 滚动条：
窗口滚动条
div的滚动条
overflow:auto
事件：
1、this当前事件
2、全局事件，window.onclick()、window.onKeyDown = function(){}
3、event，包含了事件相关内容
4、默认事件
自定义优先：a,form
onclick="return SubmitForm();
默认优先：checkbox 查找：
选择器
id选择器：#id
标签选择器
类选择器
组合选择器：#i1,#i2,#i3
层级选择器：#i1 .c1(在i1的子子孙孙里找class='c1') parent > child(孩子里找)
$('input:eq(1),#i1 .item')
筛选器
$('#i1').find('.item')
$('#i1').eq(1)
操作：
CSS
属性
$('#i1').html() #获取html内容
$('#i1').css('fontSize','18px')
tag.scrollTop = 0;(原来操作) $('#i1').scrollTop 文本操作
事件：
--优化
1、如何使用jQuery绑定事件
2、当文档加载完毕后，自动执行
$(function(){ });
3、延迟绑定
4、return false
扩展：
$.login
Form表单验证
Ajax：
偷偷的发请求 --jQuery循环
二、DOM
1、innerText
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i1">
<a>1</a>
<a>2</a>
<a>3</a>
</div>
<input type="text" id="i2" />
<!--innerText-->
<a id="i3" href="http://www.google.com">Goo<span>gle</span></a>
</body>
</html>
2、innerText & innerHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="i1" />
<!--innerText只获取文本内容-->
<!--innerHTML既获取文本内容又可以拿到span标签中的内容-->
<a id="i2" href="http://www.bing.com.cn">必应</a>
</body>
</html>
3、搜索框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搜索框</title>
</head>
<body>
<input id="i1" type="text" value="请输入关键字" onfocus="Focus();" onblur="Blur()" />
<input id="i2" type="text" value="请输入关键字" onfocus="Focus();" />
<script type="text/javascript">
function Focus() {
//console.log('Focus');
//获取标签，清空
var tag = document.getElementById('i1');
//判断框中是否为：请输入关键字
if(tag.value == "请输入关键字"){
tag.value = "";
}
}
function Blur() {
//console.log('Blur');
//移走时加上“请输入关键字”
var tag = document.getElementById('i1');
var val = tag.value;
//
if(val.trim().length == 0){
tag.value = "请输入关键字";
}
}
</script>
</body>
</html>
三、JavaScript
1、对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对话框</title>
<style>
.hide{
display: none !important;
}
.shade{
position: fixed;
top:0;
bottom: 0;
left:0;
right:0;
/*background-color: black;*/
/*opacity: 0.6;*/
background-color: rgba(0,0,0,.6);
z-index: 1000;
}
.modal{
height:200px;
width:400px;
background-color: white;
/*设置居中*/
position: fixed;
top:50%;
left:50%;
margin-left: -200px;
margin-top: -100px;
z-index: 1001;
}
</style>
</head>
<body>
<div style="height: 2000px;background-color: #dddddd;">
<input type="button" value="点我" onclick="ShowModal();" />
</div>
<div id="shade" class="shade hide"></div>
<div id="modal" class="modal hide">
<!--标签什么都不操作时，设置javascript:void(0)-->
<a href="javascript:void(0);" onclick="HideModal();">取消</a>
</div>
<script>
function ShowModal() {
var t1 = document.getElementById('shade');
var t2 = document.getElementById('modal');
t1.classList.remove('hide');
t2.classList.remove('hide');
}
function HideModal() {
var t1 = document.getElementById('shade');
var t2 = document.getElementById('modal');
t1.classList.add('hide');
t2.classList.add('hide');
}
window.onkeydown = function (event) {
if(event.keyCode == 27){
HideModal();
}
}
</script>
</body>
</html>
2、实现全选、取消、反选（第一种方法，会有问题）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="全选" onclick="CheckAll()" />
<input type="button" value="取消" onclick="CancelAll()" />
<input type="button" value="反选" onclick="ReverseAll()" />
<table border="1px">
<thead>
<tr>
<th>序号</th>
<th>用户名</th>
<th>密码</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox" /> </td>
<td>1</td>
<td>11</td>
</tr>
<tr>
<td><input type="checkbox" /> </td>
<td>2</td>
<td>22</td>
</tr>
<tr>
<td><input type="checkbox" /> </td>
<td>3</td>
<td>33</td>
</tr>
</tbody>
</table>
<script>
function CheckAll() {
var tb = document.getElementById('tb')
var trs = tb.children;
for(var i=0;i<trs.length;i++){
var current_tr = trs[i];
var ck = current_tr.firstElementChild.firstElementChild;
ck.setAttribute('checked','checked');
}
}
function CancelAll() {
var tb = document.getElementById('tb')
var trs = tb.children;
for(var i=0;i<trs.length;i++){
var current_tr = trs[i];
var ck = current_tr.firstElementChild.firstElementChild;
ck.removeAttribute('checked');
}
}
function ReverseAll() {
var tb = document.getElementById('tb')
var trs = tb.children;
for(var i=0;i<trs.length;i++){
var current_tr = trs[i];
var ck = current_tr.firstElementChild.firstElementChild;
if(ck.checked){
ck.checked = false;
ck.removeAttribute('checked');
}else{
ck.checked = true;
ck.setAttribute('checked','checked');
}
}
}
</script>
</body>
</html>
3、点赞
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点赞</title>
<style>
.item{
padding: 50px;
position: relative;
}
item span{
position: absolute;
top: 49px;
left: 71px;
opacity: 1;
font-size: 18px;
}
</style>
</head>
<body>
<div class="item">
<a onclick="Favor(this);">赞1</a>
</div>
<div class="item">
<a onclick="Favor(this);">赞2</a>
</div>
<div class="item">
<a onclick="Favor(this);">赞3</a>
</div>
<div class="item">
<a onclick="Favor(this);">赞4</a>
</div>
<script>
function Favor(ths) {
//ths=>this,当前触发事件的标签
//console.log(ths.parentElement);
var top = 49;
var left = 71;
var op = 1;
var fontSize = 18;
var tag=document.createElement('span');
tag.innerText = '+1';
tag.style.position = 'absolute';
tag.style.top = top + "px";
tag.style.left = left + "px";
tag.style.opacity = op;
tag.style.fontSize = fontSize + "px";
ths.parentElement.appendChild(tag);
var interval = setInterval(function () {
top -= 10;
left += 10;
fontSize += 5;
op -= 0.1; tag.style.top = top + "px";
tag.style.left = left + "px";
tag.style.opacity = op;
tag.style.fontSize = fontSize + "px";
if(op <= 0.2){
//删除定时器
clearInterval(interval);
ths.parentElement.removeChild(tag);
}
},50);
}
</script>
</body>
</html>
4、定时删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="status" style="color: red;"> </div>
<input type="submit" onclick="DeleteStatus();" value="删除" /> <script>
function DeleteStatus() {
var s = document.getElementById('status');
s.innerText = "删除成功";
setTimeout(function () {
s.innerText = "";
},3000);
}
</script>
</body>
</html>
5、返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.back{
position: fixed;
right: 20px;
bottom: 20px;
color: red;
}
.hide{
display: none;
}
</style>
</head>
<body onscroll="BodyScroll();">
<div style="height: 2000px;background-color: #dddddd;"></div>
<div id="back" class="back hide" onclick="BackTop();">返回顶部</div>
<script>
function BackTop() {
document.body.scrollTop = 0;
}
function BodyScroll() {
//console.log(1);
var s = document.body.scrollTop;
var t = document.getElementById('back'); if(s >= 100){
t.classList.remove('hide');
}else{
t.classList.add('hide');
} }
</script>
</body>
</html>
6、提交（第一种方式）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="f1">
<input type="text" />
<input type="submit" value="提交" />
<a onclick="Submit()">提交</a>
</form>
<script>
function Submit() {
var form = document.getElementById('f1');
form.submit();
}
</script>
</body>
</html>
7、跳转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/*
var ret = confirm('是否删除？');
console.log(ret);
*/
location.href = "http://www.baidu.com";
</script>
</body>
</html>
8、事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件</title>
</head>
<body>
<a href="http://www.baidu.com" onclick="ClickB();">百度</a> <form>
<input type="text" />
<input type="submit" onclick="ClickB();" />
</form> <input type="checkbox" onclick="ClickB();" /> <script>
function ClickB() {
alert(123);
}
</script>
</body>
</html>
9、提交（第二种方式）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="http://www.baidu.com">
<input type="text" id="username" />
<input type="submit" value="提交" onclick="return SubmitForm();" />
</form>
<script>
function SubmitForm() {
var user = document.getElementById('username');
if(user.value.length > 0){
//可以提交
return true;
}else{
//不可提交，提示错误
alert('用户名输入不能为空');
return false;
}
}
</script>
</body>
</html>
四、jQuery
1、第一个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
</style>
</head>
<body>
<div id="i1">
<div class="item">123</div>
<div class="item">
<div class="c1">
<a>百度</a>
</div>
</div>
</div>
<div id="i2"></div>
<script src="js/jquery-1.12.4.js"></script>
<script>
//jQuery.xxx
//$.xxx
$('#i1').addClass('hide');
</script>
</body>
</html>
2、左侧菜单（第一种方式）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左侧菜单</title>
<style>
.menu{
width: 200px;
height: 800px;
border: 1px solid #dddddd;
overflow: auto;
}
.menu .item .title{
height: 40px;
line-height: 40px;
background-color: #2459a2;
color: white;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="menu">
<div class="item">
<div class="title" onclick="ShowMenu(this);">菜单一</div>
<div class="body">
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
</div>
</div>
<div class="item">
<div class="title" onclick="ShowMenu(this);">菜单二</div>
<div class="body hide">
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
</div>
</div>
<div class="item">
<div class="title" onclick="ShowMenu(this);">菜单三</div>
<div class="body hide">
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script>
function ShowMenu(ths) {
//console.log(ths); //Dom中的标签对象
//$(ths) //Dom对象转换为jQuery标签对象（便利）
//$(ths)[0] //jQuery对象转换为DOM对象
$(ths).next().removeClass('hide');
$(ths).parent().siblings().find('.body').addClass('hide');
}
</script>
</body>
</html>
3、实现全选、取消、反选（第二种方法，推荐）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="全选" onclick="CheckAll()" />
<input type="button" value="取消" onclick="CancelAll()" />
<input type="button" value="反选" onclick="ReverseAll()" />
<table border="1px">
<thead>
<tr>
<th>序号</th>
<th>用户名</th>
<th>密码</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox" /> </td>
<td>1</td>
<td>11</td>
</tr>
<tr>
<td><input type="checkbox" /> </td>
<td>2</td>
<td>22</td>
</tr>
<tr>
<td><input type="checkbox" /> </td>
<td>3</td>
<td>33</td>
</tr>
</tbody>
</table>
<script src="js/jquery-1.12.4.js"></script>
<script>
function CheckAll() {
$('#tb input[type="checkbox"]').prop('checked',true);
}
function CancelAll() {
$('#tb input[type="checkbox"]').prop('checked',false);
}
function ReverseAll() {
$('#tb input[type="checkbox"]').each(function (i) {
//this当前标签
//$(this)当前标签的jQuery对象
if($(this).prop('checked')){
$(this).prop('checked',false);
}else{
$(this).prop('checked',true);
}
}); }
</script>
</body>
</html>
4、增加、减少输入框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<p>
<a onclick="Add(this);"> + </a>
<input type="text">
</p>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script>
function Add(ths) {
var p = $(ths).parent().clone();
p.find('a').text(' - ');
$(ths).parent().parent().append(p);
p.find('a').attr('onclick', 'Remove(this);');
}
function Remove(ths) {
$(ths).parent().remove();
}
</script>
</body>
</html>
5、左侧菜单（第二种方式）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左侧菜单</title>
<style>
.menu{
width: 200px;
height: 800px;
border: 1px solid #dddddd;
overflow: auto;
}
.menu .item .title{
height: 40px;
line-height: 40px;
background-color: #2459a2;
color: white;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="menu">
<div class="item">
<div class="title" onclick="ShowMenu(this);">菜单一</div>
<div class="body">
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
</div>
</div>
<div class="item">
<div class="title" onclick="ShowMenu(this);">菜单二</div>
<div class="body hide">
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
</div>
</div>
<div class="item">
<div class="title" onclick="ShowMenu(this);">菜单三</div>
<div class="body hide">
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
//当文档数加载完毕后，自动执行
$('.item .title').click(function () {
$(this).next().removeClass('hide');
$(this).parent().siblings().find('.body').addClass('hide');
});
}); /*绑定事件的另一种方式
$('.item .title').bind('click',function () {
$(this).next().removeClass('hide');
$(this).parent().siblings().find('.body').addClass('hide');
});
*/
</script>
</body>
</html>
6、延迟绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" onclick="Add();" />
<ul>
<li>123</li>
<li>456</li>
<li>789</li>
<li>000</li>
</ul>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
// $('li').click(function () {
// alert($(this).text());
// });
//延迟绑定，ul绑定数据的父标签
$('ul').delegate('li','click',function () {
alert($(this).text());
});
}); function Add() {
var tag = document.createElement('li');
tag.innerText = '666';
$('ul').append(tag);
}
</script>
</body>
</html>
Day16 DOM &jQuery的更多相关文章
- python2.0_s12_day13_javascript&Dom&jQuery
今天主要内容:JavaScriptDomjQuery http://www.cnblogs.com/wupeiqi/articles/5369773.html 今天主要内容大致了解:javascrip ...
- Python之Web前端Dom, jQuery
Python之Web前端: Dom jQuery ###Dom 一. 什么是Dom? 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它 ...
- javaScript DOM JQuery AJAX
http://www.cnblogs.com/wupeiqi/articles/5369773.html 一 JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript ...
- dom core,html dom,css dom,jquery 中的dom操作
前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...
- python_way day16 DOM
Python_way day16 1.Dom (找到html中的标签) 一.DOM 1.查找元素 直接查找 document.getElementById 根据ID获取一个标签 --->这里是 ...
- Python 一路走来 DOM & Jquery
DOM 查找: 直接查找 间接查找 —getElementById ...
- python运维开发(十六)----Dom&&jQuery
内容目录: Dom 查找 操作 事件 jQuery 查找 筛选 操作 事件 扩展 Dom 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它 ...
- Python学习笔记整理总结【web基础】【web/HTML/CSS/JavaScript/DOM/jQuery】
一.HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以 ...
- DOM jquery
DOM 文档对象模型(Document Object Model)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM ...
随机推荐
- 微信小程序资料集合
一:官方地址集合: 1:官方工具:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1476434678461 2: ...
- 仿写自己的一个加载语言包的L函数
<?php /** * [L 加载语言的L的方法] * @param [string] $key [语言键的名称] * @return [string] $value [取到的语言值] */ f ...
- HttpWebRequest抓数据遇到的问题
1.有些网站访问速度慢,而且这个网站的连接数(比如全球内衣,另外对于女生各种什么内衣不懂的也可以上去查看了解哈),因为没有即时的关闭,造成抓取页面数据的时候超时也严重. 解决:把相应的HttpWebR ...
- spring 最全MAVEN 依赖引入配置
<properties> <spring.version>4.1.6.RELEASE</spring.version> </properties> &l ...
- java接口相关例题
java接口相关习题 interface Graphics{ //接口里面只能用抽象方法 public abstract double area(); }//设置 平面类class Plan ...
- RichtextBox打印
附件http://files.cnblogs.com/xe2011/CSHARP_RichtextBox_PRINT.rar 打印 详情 http://support.microsoft.com/kb ...
- 【ThinkingInC++】65、使用delete void*可能会出错
/** * 书本:[ThinkingInC++] * 功能:使用delete void*可能会出错 * 时间:2014年10月5日14:31:43 * 作者:cutter_point */ #incl ...
- Nginx介绍 分类： Nginx 服务器搭建 2015-07-13 10:50 19人阅读 评论(0) 收藏
海量请求,高性能服务器. 对比Apache, Apache:稳定,开源,跨平台,重量级,不支持高度并发的web服务器. 由此,出现了Lighttpd与Nignx:轻量级,高性能. 发音:engine ...
- poj 3140 Contestants Division（树形dp? dfs计数+枚举）
本文出自 http://blog.csdn.net/shuangde800 ------------------------------------------------------------ ...
- 使用like时left outer join和inner join的区别
--select top 10000 * into #s from search set statistics time on set statistics io on select userId,c ...