day16前端(Dom+Jquery)

JavaScirpt
   正则，字符串三个方法
　　(留后再讲)
DOM
   查找：
       直接查找
       间接查找
       --getElementById
       --getElementsByTagName

<!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"/><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>

<!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"><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){//console.log(event);if(event.keyCode == 27){HideModal();}}</script>
</body>
</html>

弹窗小练习

操作：
       值
           innerText
           innerHtml
           value
       class：
           className
           classList.add
           classList.remove
       样式：
           <input type='text' style="color:red;font-size:40px;"/>
           tag = .....
           tag.style.color = 'red';
           tag.style.fontSize = '40px';
       属性：
           <input id='i1' name='n1' alex='sb' type='text' style="color:red;font-size:40px;"/>
           setAttribute
           getAttribute
           removeAttribute

           ===>
               tabObj.checked = true
           ===>jQuery: 操作数据，prop(checked,true)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body><input id='i1' name='n1' alex='123' type='text' style="color:red;font-size:40px;"/><input type="checkbox" id="i2" />
</body>
</html>

标签属性定义

<!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="CancleAll()"/><input type="button" value="反选" onclick="ReverseAll()"/><table border="1"><thead><tr><th>序号</th><th>用户名</th><th>密码</th></tr></thead><tbody id="tb"><tr><td><input type="checkbox" id="test1" /></td><td>1</td><td>11</td></tr><tr><td><input type="checkbox" id="test2" /></td><td>2</td><td>22</td></tr><tr><td><input type="checkbox" id="test3"/></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 CancleAll() {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>

全选取消与反选

标签：
           创建标签：
               字符串
               对象
           将标签添加到HTML中
               字符串形式的标签：
                   p1.insertAdjacentHTML('beforeEnd',tag);
               对象形式的标签：
                   p1.insertAdjacentElement('afterBegin',document.createElement('p'))
                   xxx.insertBefore(tag,xxx[1])
       点赞：
           创建标签，定时器（大小，位置，透明度）
           1、this，当前触发事件的标签
           2、createElement
           3、appendChild
           4、setInterval创建定时器
               clearInterval删除定时器
           5、removeChild删除子标签

       定时器
           setTimeOut,clearTimeout
           setInterval,clearInter

       事件：
           1、this，当前触发事件的标签
           2、全局事件绑定   window.onKeyDown = function(){}
           3、event，包含事件相关内容
           4、默认事件
                   自定义优先：a,form
                      默认优先：checkbox

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>.item{padding: 50px;position: relative;}</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 => 当前触发事件的标签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>

点赞小练习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><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 = "";},5000);}</script>
</body>
</html>

单次定时器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>.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(){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>

鼠标滚轮操作

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><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
   模块，Dom和JavaScript，
       1.12.. --> ...
       2.x     --> IE9

   查找：
       选择器
           id选择器
           标签选择器
           类选择器
           组合
           层级 #i1 .c1

           $('input:eq(1),#i1 .item')

       筛选器
           $('#i1').find('.item')
           $('#i1').eq(1)

   操作：
       CSS
       属性
           $('#i1').html() # 获取html内容
           $('#i1').html("<span>123</span>") # 设置html内容

           text()

           val()

       文本操作
   事件：
       - 优化
       1、如何使用jQuery绑定
       2、当文档加载完毕后，自动执行
           $(function(){
               ...
           });
       3、延迟绑定
       4、return false;

扩展：
       JavaScirpt
           正则，字符串三个方法
       $.login
       Form表单验证（）
   Ajax：
       偷偷发请求

   -- jQuery循环

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>.hide{display: none;}.menu{width: 200px;height: 600px;border: 1px solid #dddddd;overflow: auto;}.menu .item .title{height: 40px;line-height: 40px;background-color: #2459a2;color: white;}</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></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="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>

隐藏菜单栏小练习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body><div><p><a onclick="Add(this);"> + </a><input type="text" /></p></div><script src="jquery-1.12.4.js"></script><script>function Add(ths){var p = $(ths).parent().clone();p.find('a').text(' - ');p.find('a').attr('onclick', 'Remove(this);');$(ths).parent().parent().append(p);}function Remove(ths){$(ths).parent().remove();}</script>
</body>
</html>

增加减少

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body><input type="button" onclick="Add();" /><ul><li>123</li><li>456</li><li>789</li></ul><script src="jquery-1.12.4.js"></script><script>$(function(){/*$('li').click(function () {alert($(this).text());});*/$("ul").delegate("li","click",function(){alert($(this).text());});});function Add(){var tag = document.createElement('li');tag.innerText = '666';$('ul').append(tag);}</script>
</body>
</html>

delegate

转载于:https://www.cnblogs.com/aaron-shen/p/5798170.html

day16前端(Dom+Jquery)相关推荐

jquery 在div追加文本_前端技术--JQuery
JQuery 一.引言 1.JQuery是一个基于javascript语言的框架 --- 是对js代码的合理封装 2.js缺点,jquery优点 1)js代码比较复杂 var tag = docum ...
jquery input值改变事件_前端技术--JQuery
JQuery 一.引言 1.JQuery是一个基于javascript语言的框架 --- 是对js代码的合理封装 2.js缺点,jquery优点 1)js代码比较复杂 var tag = docum ...
前端：jQuery笔记
前端:jQuery笔记此系列文章乃是学习jQuery的学习笔记. Asp.net MVC Comet推送摘要: 一.简介在Asp.net MVC实现的Comet推送的原理很简单. 服务器端:接收 ...
Web前端之jQuery 一
Web前端之jQuery 一 jQuery介绍和核心为什么要使用以及如何使用jQuery jQuery的入口函数 jQuery对象和js对象的转换 jQuery的选择器 jQuery的基本选择器层 ...
前端H5—jQuery精通-张晓飞-专题视频课程
前端H5-jQuery精通-1388人已学习课程介绍 jQuery是优秀, 使用广的JS函数库, 它能帮我们程序员简化DOM查询及DOM操作, 轻松实现动画效果.在世界前10000个 ...
如何使用前端DOM操作制作一个便签：
如何使用前端DOM操作制作一个便签: 当你看到这张要实现功能的图片时,不知道你现在的心情如何?反正我看到这张图片的时候心情就跟着张图片的背景颜色一样灰暗! 只要你在动手敲代码前想好各大功能应该要怎么实 ...
miniui mysql_三分钟介绍强大方便的前端框架Jquery MiniUI
原标题:三分钟介绍强大方便的前端框架Jquery MiniUI jQuery MiniUI - 专业WebUI控件库. 它能缩短开发时间,减少代码量,使开发者更专注于业务和服务端,轻松实现界面开发,带 ...
前端 js jQuery ajax实现文件流下载, 下载doc,xsl等文件内容乱码问题
问题描述: 前端通过jQuery ajax接受后端的文件流,前端下载文件后内容乱码后端代码: Header("Content-type: application/octet-stream& ...
前端：jQuery对象和dom对象的转换
jQuery对象转成DOM对象: var jv =$("#v") ; //jQuery对象 var v=jv[0]; //DOM对象 var v=jv.get(0); //DOM对 ...

day16前端(Dom+Jquery)

day16前端(Dom+Jquery)相关推荐

最新文章

热门文章