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 ...
随机推荐
- Android 在广播接收器中弹出对话框
特别需要注意的几点如下: 需要设置AlertDialog的类型 WindowManager.LayoutParams.TYPE_SYSTEM_ALERT 2. 需要声明Window弹框的权限 < ...
- Yii2中request的使用方法
1.普通的get和pst请求 $request = Yii::$app->request; $get = $request->get(); // 等同于: $get = $_GET; $i ...
- GridControl 无数据时显示信息
图例: 主要代码如下: 说明:给GridView添加事件gv_CustomDrawEmptyForeground private void gv_CustomDrawEmptyForeground(o ...
- 50个Android开发技巧(24 处理ListView数据为空的情况)
在移动平台上为用户展示数据的一个经常用法是将数据填充进一个List内,而此时须要注意的一点就是: 原文地址:(http://blog.csdn.net/vector_yi/article/d ...
- [TypeScript] Generating Definition Files
TypeScript allows you to generate definition files for your own libraries. This lesson shows you how ...
- linux tar 压缩解压缩
解压 .tar.bz tar zxvf file.tar.gz .tar.gz2 tar jxvf file.tar.bz2 .bz gzip -d file.bz .gz2 bzip2 -d fil ...
- JavaScript入门(2)
一.JS输出内容--(document.write) document.write()可用于直接向HTML输出流写内容,即直接在网页中输出内容. 第一种:输出内容用" "括起来,直 ...
- JS手动创建标签
代码: <html> <head> <title>js标签属性的添加</title> <script > function setxxx() ...
- 黑马程序员- IO(Input- Output)（一）
------Java培训.Android培训.iOS培训..Net培训.期待与您交流! ------- API包: Java.io.* 缘来: java通过操作数据对象是通过流的方式来创建的 作用: ...
- Sql产生自动增长的编号
USE [DBName]GO/****** Object: StoredProcedure [dbo].[sp_GetNo] Script Date: 10/24/2013 19:26:44 ...