基础内容
DOM操作
javascript探讨
JQuery初识
DOM
innerText ==>获取仅文本
innerHtml ==>获取全部内容
1 <div id="aaa">dandy<span>aaa</span>taylor</div>
value
input value 获取当前标签的值
select 获取选中的value值 selectIndex
textarea 获取标签的值
tooltip:
placeholder ="请输入关键字" ==> html5里面可以直接看到input标签的提示字符。
onfocus; onblur 光标锁定，光标消失事件。
属性操作
setAttribute
getAttribute
removeAttribute
创建标签：
1 var tag = "<input type=‘button‘ />" 2 document.getElementById("aaa").insertAdjacentHTML("beforeEND",tag);
1 var tag = document.createElement(‘input‘) 2 tag.setAttribute(‘type‘,‘text‘) 3 document.getElementById(‘aaa‘).appendChild(tag)
其他功能
1 var conf = confirm("确定删除么？") 2 console.log(conf)
如果点击确认，则返回true；如果点击取消，则返回false.
location.href 获取当前url location.href = "" 重新定向 location.reload() 刷新
1 var obj = setInterval(function(){
2 console.log(1);
3 },1000)
4 clearInterval(obj)清空定时器
5
6 setTimeout("func()",5000) 邮箱删除提醒，删除邮件
Javascript
javascript的函数：
1、普通函数
function func(){
...
}
2、匿名函数
setInterval(function(){
...
},1000)
3、自执行函数
(function(arg){
console.log(arg);
})
序列化
JSON.stringify(li) ==> 数组转换成字符串
JSON.parse() ==> 字符串转换成对象
转义
encodeURL(url)
decodeURL(url)
客户端(cookie) ==> 服务器端
将数据经过转义后保存在cookie
eval
python:
val = eval(表达式)
exec(代码)
python里面eval后面写一个表达式，实际上是做不了的
javascript:
eval 是python的eval跟exec的合集
时间
date对象
创建时间对象
var d = new Date()
作用域：
python中是以函数作为作用域的:
1 def func(): 2 if 1==1: 3 name="dandy" 4 print(name)
其他语言以{}作为作用域
public void func()
{
if(1==1){
string name = "dandy"
}
console.write(name)
}//# 会报错的。
**********************javascript中以函数作为作用域（除了let）
**********************函数的作用域在函数未被调用前，就已经被创建
**********************函数的作用域存在作用域链并且也是在被调用前创建
1 obj = ‘text‘
2 function func(){
3 var obj = ‘dandy‘;
4 function inner(){
5 var obj = ‘renee‘;
6 console.log(obj)
7 }
8 inner() ==>所以这边调用贤惠在函数本身查找 obj, 没有的话去上层"dandy",没有的话再上层"text",再没有就报错。
9 }
1 所以下面这段代码
2 obj = ‘text‘
3 function func(){
4 var obj = ‘dandy‘;
5 function inner(){
6 console.log(obj)
7 }
8 return inner;
9 }
10 var ret = func()
11 ret() 的输出是dandy
12 ====================函数的作用域在函数未被调用前，就已经被创建
1 所以下面这段代码
2 obj = ‘text‘
3 function func(){
4 var obj = ‘dandy‘;
5 function inner(){
6 console.log(obj)
7 }
8 var obj = ‘renee‘;
9 return inner;
10 }
11 var ret = func()
12 ret() 的输出是renee
13 解释器解释的时候，内部代码不执行，只创建作用域，所以解释器从上到下解释(先作用域)。首先 var obj,然后func,inner,然后执行ret=func()，此时xo="alex",执行func时，obj=‘dandy‘,obj = ‘renee‘,最后执行inner,此时obj="renee"
*******************************javascript函数内部局部变量会提前申明
function func(){
console.log(xxoo);
var xxoo = "dandy"
}
func()
输出什么？
undefined
函数在生成作用域链的同时，会将所有的局部变量定义一下（不赋值）
词法分析：
切记词法分析：1、形式参数；2、局部变量；3、函数声明表达式；执行函数
javascript 面向对象
1 function foo(){
2 var name ="dandy";
3 }
4 foo()
5 相当于
6 function foo(){
7 var name ="dandy";
8 }
9 var obj = new Foo()
10 obj.name ==> "dandy"
那么再看下面这个案例代码
1 function Foo(n){
2 this.name = n;
3 }
4 var obj = new Foo("dandy")
这里的this就相当于python中的self。创建对象用new 函数();
1 function Foo(n){
2 this.name = ‘n‘
3 this.sayname = function(){
4 console.log(this.name);
5 }
6 }
7 var obj1 = new Foo("renee");
8 obj1.name;
9 obj1.sayname()
10
11 var obj2 = new Foo("renee");
12 obj2.name;
13 obj2.sayname()
14 javascript 会在内存中创建2个对象，重复;而且对象在内存中也是2个sayname();重复定义
1 原型
2 function Foo(n){
3 this.name = n;
4 }
5 # Foo 原型
6 Foo.prototype = {
7 ‘sayname‘:function(){
8 console.log(this.name)
9 }
10 }
11 obj1 = new Foo(‘dandy‘)
12
13 obj2 = new Foo(‘renee‘)
14 类里面没有重复定义原型，对象去类的原型去查找,这样避免了重复定义类
下面我们来讲一下DOM里面的this，大家先记住一句话，谁调用事件或者函数，this就指向谁
绑定事件的两种方式：
this 当前出发事件标签
a、第一种绑定方式
<input type=‘button‘ onclick = ‘clickon(this)‘>
b、第二种绑定方式
document.getElementById("id").onclick=function(){
this ==>被调用的标签对象
}
c、第三种绑定方式(click 绑定2个方法同时)
var mydiv = document.getElementById("id")
mydiv.addEventlistener("click",function(){console.log(‘aa‘)},false)
mydiv.addEventlistener("click",function(){console.log(‘bb‘)},false)
特别注意一下下面这张图
<body>
<div id="main">
<div id="content"></div>
</div>
<script>
var mymain = document.getElementById("main");
var mycontent = document.getElementById("content");
// mymain.addEventListener(‘click‘,function() {console.log("main")},false);
// mycontent.addEventListener(‘click‘,function() {console.log("content")},false);
mymain.addEventListener(‘click‘,function() {console.log("main")},true);
mycontent.addEventListener(‘click‘,function() {console.log("content")},true);
// false ==> 是一种冒泡方式
// true ==> 则是表示一种捕捉方式
</script>
</body>
1 this作用域
2 <body>
3 <table border="1" width="400px">
4 <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
5 <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
6 <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
7 <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
8 </table>
9 <script>
10 var objs = document.getElementsByTagName("tr");
11 for (var i = 0; i < objs.length; i++){
12 objs[i].onmouseover= function() {
13 this.style.backgroundColor = "red";
14 //objs[i].style.backgroundColor = "red"; 因为作用域的问题，所以不可以这样写 for循环先执行解析，i=0、1、2
15 //但是function还只是放在内存中没有执行
16 };
17 objs[i].onmouseout = function() {
18 this.style.backgroundColor = "";
19 }
20 }
21 </script>
22 </body>
对于position做页面的补充，跟overflow的联合使用，首先让我们假想这样一种场景，我们需要一个页面，有一个header一直存在在顶端，左边的菜单栏也是一直存在在页面，右边的正文内容则很长，也需要一个下拉框，不改变菜单跟header的情况下，自己滚动：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .pg-header{
8 background-color: #073763;
9 height: 50px;
10 width: 100%;
11 color: white;
12 }
13 .content{
14 position: fixed;
15 top: 50px;
16 bottom: 0;
17 left: 0;
18 width: 200px;
19 background-color: seagreen;
20 }
21 .main{
22 position: fixed;
23 top: 50px;
24 right:0;
25 bottom:0;
26 left: 200px;
27 background-color: brown;
28 overflow: auto;
29 }
30 </style>
31 </head>
32 <body style="margin: 0;">
33 <div class="pg-header">
34 Flex
35 </div>
36 <div class="content">菜单</div>
37 <div class="main">
38 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p>
39 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p>
40 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p>
41 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p>
42 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p>
43 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p>
44 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p>
45 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p>
46 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p>
47 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p>
48 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p>
49 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p>
50 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p>
51 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p>
52 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p>
53 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p>
54 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p>
55
56 </div>
57 </body>
58 </html>
此时，我们希望右边的可以不考虑菜单跟header的位置保持一直在前段，这时候我们可以看一下下面这段代码：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .pg-header{
8 background-color: #073763;
9 height: 50px;
10 width: 100%;
11 color: white;
12 }
13 .content{
14 position: absolute;
15 top: 50px;
16 bottom: 0;
17 left: 0;
18 width: 200px;
19 background-color: seagreen;
20 }
21 .main{
22 position: absolute;
23 top: 50px;
24 right:0;
25 bottom:0;
26 left: 200px;
27 background-color: brown;
28 /*overflow: auto;*/
29 }
30 </style>
31 </head>
32 <body style="margin: 0;">
33 <div class="pg-header">
34 Flex
35 </div>
36 <div class="content">菜单</div>
37 <div class="main">
38 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p>
39 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p>
40 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p>
41 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p>
42 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p>
43 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p>
44 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p>
45 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p>
46 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p>
47 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p>
48 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p>
49 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p>
50 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p>
51 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p>
52 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p>
53 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p>
54 <p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p><p>asdfas</p>
55
56 </div>
57
58 </body>
59 </html>
此时，请各位将上面的楼主注释掉的一行overflow恢复出来看看，品味一下。。
min-width 屏幕缩小，出现滚动条的最小宽度
border-radius: 50%标签变成圆形
Tooltips:
font-owesomesublime text3
JQuery
本来写到这边楼主很激动，冷静下来一看，好像jquery才是真的没什么可以将的东西;基本上jquery就是对于DOM的一些封装方法，就像前面我们写了一些DOM的案例一样封装起来就好。就像document.getElementById(“id”) 等于$("#id")一样，其实这就是对于前面那个方法的一个加强版的封装。简洁方便。
现在比较稳定的jquery版本应该是1.12，楼主随便百度了一个，就随意装了一个3.X的版本，其实作用差不多，1.12对于就版本的兼容性更好，而3.X则是对于html5更友好，都差不多。所以，简而言之，言而简之，jquery就相当于python里面的一个模块一样。至于怎么学习，想了下差不多就是案例吧。
首先，我们先设想下，如果有个input type为text，怎么让它开始有提示字，光标进入就消失;理性分析一波，应该是默认产生提示字，光标进去onfocus写事件清除文本框内容。失去的时候在判断有没有内容。
好，来写一下！
1 <body> 2 <input type="text" placeholder="请输入手机号" /> 3 </body>
效果：
你可能会惊叹一声，然后问我，jquery呢？ em.....别那么认真，现在开始。
先给大家一个网址：http://jquery.cuishifeng.cn/ 这是关于jquery的各种方法的调用说明。
选择器
直接找到某个或者某一类标签
1、id $("#id")
2、class $(".c1")
3、标签 $("a")
4、$("a,.c1, #i1") 组合抓取标签;
5、$("div a") 层级筛选器 $("#id>a") 只找children
筛选器
:first ==> $("a:first") 取第一个a
:last
:eq(1) ==> $("a:eq(2)") 去index为2的
:header ==> 匹配所有p1之类的头部标签
$(‘[dandy]‘) 获取具有dandy属性的标签
$(‘[dandy=‘123’]‘) 获取具有dandy属性，值为123的标签
$("input[type=‘text‘]") 获取所有input文本框标签，也可以写成$(":text")
$(":disabled") 获取所有不可编辑的标签
文本操作
$(..).text() # 获取文本内容
$(..).text(‘a’) # 文本赋值 包含html 不解析，直接当字符串处理
$(...).html() # 获取内容
$(...).html(‘<p>aaa</p>‘) # 赋值并解析html标签
$(..).val() 获取值 ==> val(‘aa‘) 赋值
样式操作
$(‘#i1‘).addClass(‘hide‘)
$(‘#i1‘).removeClass(‘hide‘)
$(‘#i1‘).toggleClass(‘hide‘) # 有hide就删除，没有就显示
案例
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .hide{
8 display: none;
9 }
10 </style>
11 </head>
12 <body>
13 <input id="b1" type="button" value="关灯" />
14 <div id="i1" class="hide"> aaa</div>
15
16 </body>
17 <script src="jqueryfile/jquery-3.2.1.js"></script>
18 <script>
19 $(‘#b1‘).click(function() {
20 $(‘#i1‘).toggleClass(‘hide‘)
21 });
22
23 </script>
24 </html>
属性操作
专门用于定义自定义属性
$(..).attr(‘type‘) # 属性查看
$(..).attr(‘name‘,‘dandy‘) #创建属性，设置属性值
$(..).removeAttr(‘type‘) # 删除属性
专门用于checkbox, radio
$(..).prop(‘checked‘) # 获取值
$(..).prop(‘checked‘, true) # 赋值
index获取索引位置
$(..).index()
$(..).append(temp) # 追加在最后
$(..).prepend(temp) #追加在最前面
$(..).after(temp) # 追加在对象后面
$(..).before(temp) # 在对象前面
$(‘#id‘).prependTo() # 整体对象移到目标标签
文档处理
$(..).eq(1).empty() # 清空标签内容
$(..).eq(1).remove() # 清空标签内容，删除标签
$(..).eq(1).clone() # 克隆一份标签
增加
DOM ==> var td = document.createElement(‘td‘)
td.innerHTML="用户输入的值"
css处理
$(‘#t1‘).css(‘样式名‘,‘样式值‘)
位置
scrollTop(val)、scrollLeft(val) 向上、向左移动
$(window).scrollTop() # 获取 $(window).scrollTop(0) # 返回顶部
offset 指定坐标在html中的坐标
offset().top()
position relative
offset 指定标签相对于父标签的位置坐标(一直找到上一个relative标签为止，不一定上父标签)
jQuery绑定事件
a、$(‘.c1‘).click(function(){})
b、$(‘.c2‘).bind(‘click‘,function(){})
$(‘.c2‘).unbind(‘click‘,function(){})
委托
c、$(‘.c1‘).delegete(‘a‘,‘click‘,function(){}) c1内部所有a标签绑定事件
c、$(‘.c1‘).undelegete(‘a‘,‘click‘,function(){}) c1内部所有a标签解绑事件
$(‘.c1‘).on(‘click‘,function(){})
$(".c1").off(‘click‘,function(){})
这里的委托事件跟其他绑定事件有一点不同，比如我们之前写过一个添加的表格，delegete的委托绑定会给后面新添加的tr也绑定事件。
阻止事件发生
return false;
1 <body>
2 <a id="a1" href="http://www.baidu.com">点我</a>
3 </body>
4 <script src="jquery-1.4.1.min.js">
5 </script>
6 <script>
7 $(‘#a1‘).click(function(){
8 return false;
9 })
10 </script>
1、页面框架加载完成后自动执行：
$(function(){
$(...)
})
2、当前页面所有元素全部加载完毕后执行
$(‘#id‘).click(function(){
....
})
jQuery的扩展
一、
$.extend({
‘renee‘:function(){
return ‘beauty‘
}
})
调用 $.dandy();
二、
$.fn.extend({
‘dandy‘, function(){
return ‘em‘
}
});
调用 $(‘.i1‘).dandy()
避免扩展包全局变量冲突
(function(){
var ...
})(jQuery).
具体实例一、简易菜单栏
一句话搞定：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .header{
8 width: 200px;
9 background-color: #073763;
10 }
11 .hide{
12 display: none;
13 }
14 </style>
15 </head>
16 <body>
17 <div style="height: 400px;width: 200px;">
18 <div class="item">
19 <div class="header">标题一</div>
20 <div class="content hide">内容</div>
21 </div>
22 <div class="item">
23 <div class="header">标题二</div>
24 <div class="content hide">内容</div>
25 </div>
26 <div class="item">
27 <div class="header">标题三</div>
28 <div class="content hide">内容</div>
29 </div>
30 <div class="item">
31 <div class="header">标题四</div>
32 <div class="content hide">内容</div>
33 </div>
34 </div>
35 <script src="jqueryfile/jquery-3.2.1.js"></script>
36 <script>
37 $(".header").click(function() {
38 //筛选器 上一个$(this).prev() $(this).parent() $(this).children() $(this).siblings()
39 // $(this).next().removeClass(‘hide‘);
40 // $(this).parent().siblings().find(‘.content‘).addClass(‘hide‘);
41
42 // 既然筛选器可以一直点下去，那么我们是不是可以有一个大胆的想法呢
43 // 是的，jquery支持链式编程
44 $(this).next().removeClass(‘hide‘).parent().siblings().find(‘.content‘).addClass(‘hide‘);
45 //this 是指活动对象header;next==>下一个标签对象;parent父标签;siblings 是指除本身之外的所有兄弟标签
46 })
47 </script>
48 </body>
49 </html>
具体实例二、反选、全选两句话搞定
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <input type="button" value="全选" onclick="checkAll()"/>
9 <input type="button" value="反选" onclick="reverseAll()" />
10 <input type="button" value="取消" onclick="cancelAll()" />
11 <table border="1px">
12 <thead>
13 <tr>
14 <th>选项</th><th>ip</th><th>port</th>
15 </tr>
16 </thead>
17 <tbody id="tb">
18 <tr>
19 <td><input type="checkbox"></td><td>1.1.1.1</td><td>21</td>
20 </tr>
21 <tr>
22 <td><input type="checkbox"></td><td>1.1.1.1</td><td>21</td>
23 </tr>
24 <tr>
25 <td><input type="checkbox"></td><td>1.1.1.1</td><td>21</td>
26 </tr>
27 <tr>
28 <td><input type="checkbox"></td><td>1.1.1.1</td><td>21</td>
29 </tr>
30 </tbody>
31 </table>
32 <script src="jqueryfile/jquery-3.2.1.js"> </script>
33 <script>
34 function checkAll() {
35 $("#tb :checkbox").prop("checked",true);
36 }
37 function cancelAll() {
38 $("#tb :checkbox").prop("checked",false);
39 }
40 function reverseAll() {
41 $("#tb :checkbox").each(function() {
42 //this 代指当前循环的元素,k下标
43 //DOM方法
44 // if(this.checked){
45 // this.checked = false
46 // } else {
47 // this.checked = true
48 // }
49 // jquery方式
50 // if($(this).prop(‘checked‘)){
51 // $(this).prop(‘checked‘,false);
52 // }else {
53 // $(this).prop(‘checked‘,true)
54 // }
55 // 三元运算 var v = 条件? 真值:假值 的方式实现
56 var v = $(this).prop(‘checked‘)?false:true;
57 $(this).prop(‘checked‘,v);
58
59
60 })
61 }
62 </script>
63 </body>
64 </html>
实例三、加上幕态化效果
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .cover{
8 position: fixed;
9 top:0;
10 left:0;
11 right:0;
12 bottom:0;
13 background-color: black;
14 opacity: 0.5;
15 z-index: 9;
16 }
17 .modal{
18 z-index: 10;
19 position: fixed;
20 top:50%;
21 left:50%;
22 width: 400px;
23 height: 250px;
24 background-color: antiquewhite;
25 margin-top: -100px;
26 margin-left: -200px;
27 }
28 .hide{
29 display: none;
30 }
31 </style>
32 </head>
33 <body>
34 <div class="cover hide"></div>
35
36 <div class="modal hide">
37 <input name="ip" type="text" placeholder="ip"/>
38 <input name="port" type="text" placeholder="port" />
39 <div>
40 <input type="button" value="确认" />
41 <input type="button" value="取消" onclick="cancelModel()"/>
42 </div>
43
44 </div>
45
46
47
48 <table border="1px">
49 <thead>
50 <tr>
51 <th><input type="button" value="添加" onclick="addModel()"/></th><th>ip</th><th>port</th><th colspan="2">操作</th>
52 </tr>
53 </thead>
54 <tbody id="tb">
55 <tr>
56 <td><input type="checkbox"></td><td>1.1.1.1</td><td>21</td><td><a class="edit">编辑</a></td><td>删除</td>
57 </tr>
58 <tr>
59 <td><input type="checkbox"></td><td>1.1.1.2</td><td>21</td><td><a class="edit">编辑</a></td><td>删除</td>
60 </tr>
61 <tr>
62 <td><input type="checkbox"></td><td>1.1.1.3</td><td>21</td><td><a class="edit">编辑</a></td><td>删除</td>
63 </tr>
64 <tr>
65 <td><input type="checkbox"></td><td>1.1.1.4</td><td>21</td><td><a class="edit">编辑</a></td><td>删除</td>
66 </tr>
67 </tbody>
68 </table>
69 <input type="button" value="全选" onclick="checkAll()"/>
70 <input type="button" value="反选" onclick="reverseAll()" />
71 <input type="button" value="取消" onclick="cancelAll()" />
72 <script src="jqueryfile/jquery-3.2.1.js"></script>
73 <script>
74 function checkAll() {
75 $("#tb :checkbox").prop("checked",true);
76 }
77 function cancelAll() {
78 $("#tb :checkbox").prop("checked",false);
79 }
80 function reverseAll() {
81 $("#tb :checkbox").each(function() {
82 //this 代指当前循环的元素,k下标
83 //DOM方法
84 // if(this.checked){
85 // this.checked = false
86 // } else {
87 // this.checked = true
88 // }
89 // jquery方式
90 // if($(this).prop(‘checked‘)){
91 // $(this).prop(‘checked‘,false);
92 // }else {
93 // $(this).prop(‘checked‘,true)
94 // }
95 // 三元运算 var v = 条件? 真值:假值 的方式实现
96 var v = $(this).prop(‘checked‘)?false:true;
97 $(this).prop(‘checked‘,v);
98 })
99 }
100 function addModel() {
101 $(‘.cover, .modal‘).removeClass(‘hide‘);
102 }
103 function cancelModel() {
104 $(‘.cover, .modal‘).addClass(‘hide‘);
105 $(‘.modal input[type="text"]‘).val("") //modal 里面 的文本框全部清空
106 }
107 $(‘.edit‘).click(function() { // 编辑 点击事件
108 $(‘.cover, .modal‘).removeClass(‘hide‘);
109 var tds = $(this).parent().prevAll();
110 var port = $(tds[0]).text(); // port所在的标签td
111 var ip = $(tds[1]).text(); // ip所在的标签
112 $(‘.modal input[name="ip"]‘).val(ip); // 赋值
113 $(‘.modal input[name="port"]‘).val(port);
114 })
115 </script>
116 </body>
117 </html>
实例四、幕态化 +自定义属性
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .cover {
8 position: fixed;
9 top: 0;
10 left: 0;
11 right: 0;
12 bottom: 0;
13 background-color: black;
14 opacity: 0.5;
15 z-index: 9;
16 }
17
18 .modal {
19 z-index: 10;
20 position: fixed;
21 top: 50%;
22 left: 50%;
23 width: 400px;
24 height: 250px;
25 background-color: antiquewhite;
26 margin-top: -100px;
27 margin-left: -200px;
28 }
29
30 .hide {
31 display: none;
32 }
33 </style>
34 </head>
35 <body>
36 <div class="cover hide"></div>
37
38 <div class="modal hide">
39 <input name="ip" type="text" placeholder="ip"/>
40 <input name="port" type="text" placeholder="port"/>
41 <input name="host" type="text" placeholder="host"/>
42 <div>
43 <input type="button" value="确认" onclick="confirmModel()"/>
44 <input type="button" value="取消" onclick="cancelModel()"/>
45 </div>
46
47 </div>
48
49
50 <table border="1px">
51 <thead>
52 <tr>
53 <th><input type="button" value="添加" onclick="addModel()"/></th>
54 <th>ip</th>
55 <th>port</th>
56 <th>host</th>
57 <th colspan="2">操作</th>
58 </tr>
59 </thead>
60 <tbody id="tb">
61 <tr>
62 <td class="check"><input type="checkbox"></td>
63 <td target="ip">1.1.1.1</td>
64 <td target="port">21</td>
65 <td target="host">21</td>
66 <td><a class="edit">编辑</a></td>
67 <td class="del">删除</td>
68 </tr>
69 <tr>
70 <td class="check"><input type="checkbox"></td>
71 <td target="ip">1.1.1.2</td>
72 <td target="port">21</td>
73 <td target="host">21</td>
74 <td><a class="edit">编辑</a></td>
75 <td class="del">删除</td>
76 </tr>
77 <tr>
78 <td class="check"><input type="checkbox"></td>
79 <td target="ip">1.1.1.3</td>
80 <td target="port">21</td>
81 <td target="host">21</td>
82 <td><a class="edit">编辑</a></td>
83 <td class="del">删除</td>
84 </tr>
85 <tr>
86 <td class="check"><input type="checkbox"></td>
87 <td target="ip">1.1.1.4</td>
88 <td target="port">21</td>
89 <td target="host">21</td>
90 <td><a class="edit">编辑</a></td>
91 <td class="del">删除</td>
92 </tr>
93 </tbody>
94 </table>
95 <input type="button" value="全选" onclick="checkAll()"/>
96 <input type="button" value="反选" onclick="reverseAll()"/>
97 <input type="button" value="取消" onclick="cancelAll()"/>
98 <script src="jqueryfile/jquery-3.2.1.js"></script>
99 <script>
100 function checkAll() {
101 $("#tb :checkbox").prop("checked", true);
102 }
103
104 function cancelAll() {
105 $("#tb :checkbox").prop("checked", false);
106 }
107
108 function reverseAll() {
109 $("#tb :checkbox").each(function () {
110 //this 代指当前循环的元素,k下标
111 //DOM方法
112 // if(this.checked){
113 // this.checked = false
114 // } else {
115 // this.checked = true
116 // }
117 // jquery方式
118 // if($(this).prop(‘checked‘)){
119 // $(this).prop(‘checked‘,false);
120 // }else {
121 // $(this).prop(‘checked‘,true)
122 // }
123 // 三元运算 var v = 条件? 真值:假值 的方式实现
124 var v = $(this).prop(‘checked‘) ? false : true;
125 $(this).prop(‘checked‘, v);
126 })
127 }
128
129 function addModel() {
130 $(‘.cover, .modal‘).removeClass(‘hide‘);
131 }
132
133 function cancelModel() {
134 $(‘.cover, .modal‘).addClass(‘hide‘);
135 $(‘.modal input[type="text"]‘).val("")
136 }
137
138 $(‘.edit‘).click(function () {
139 $(‘.cover, .modal‘).removeClass(‘hide‘);
140 var tds = $(this).parent().prevUntil(‘.check‘);
141 // var port = $(tds[0]).text();
142 // var ip = $(tds[1]).text();
143 // $(‘.modal input[name="ip"]‘).val(ip);
144 // $(‘.modal input[name="port"]‘).val(port);
145 console.log(tds);
146 tds.each(function(){
147 var attr = $(this).attr(‘target‘);
148 var text = $(this).text();
149 console.log(attr,text);
150 $(‘.modal input[name="‘+ attr + ‘"]‘).val(text);
151
152 })
153 });
154 $(‘.del‘).click(function() {
155 $(this).parent().remove()
156 });
157 function confirmModel() {
158 var tr = document.createElement(‘tr‘);
159 var td1 = document.createElement(‘td‘);
160 td1.innerHTML = ‘1.1.1.1‘;
161 var td2 = document.createElement(‘td‘);
162 td2.innerHTML = ‘23‘;
163 var td3 = document.createElement(‘td‘);
164 var td3_check = document.createElement(‘checkbox‘);
165 $(td3).append(td3_check);
166 $(tr).append(td3);
167 $(tr).append(td1);
168 $(tr).append(td2);
169 $(‘#tb‘).append(tr);
170 $(‘.cover, .modal‘).addClass(‘hide‘);
171
172 }
173 </script>
174 </body>
175 </html>
注意一下，这一次编辑是抓取文本内容赋值给text框的jquery语句
实例五、标签菜单栏
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .header{
8 width:100%;
9 height: 50px;
10 background-color: #073763;
11 }
12 .menu{
13 margin: 0 auto;
14 background-color: #6e6568;
15 width: 400px;
16 height:50px;
17 border: 1px solid blueviolet;
18 }
19 .menu .menu-item{
20 line-height: 49px;
21 float: left;
22 border: 1px solid dimgrey;
23 cursor: pointer;
24 padding:0 10px;
25 }
26 .content{
27 margin:0 auto;
28 width: 400px;
29 border: 1px solid saddlebrown;
30 height: 500px;
31 }
32 .active{
33 background-color: mediumseagreen;
34 }
35 .hide{
36 display: none;
37 }
38 </style>
39 </head>
40 <body style="margin: 0px;">
41 <div class=" header"></div>
42 <div class="menu">
43 <div class="menu-item active" a="1">菜单一</div>
44 <div class="menu-item" a="2">菜单二</div>
45 <div class="menu-item" a="3">菜单三</div>
46 <div style="clear:both;"></div>
47 </div>
48 <div class="content">
49 <div b="1">内容一</div>
50 <div class="hide" b="2">内容二</div>
51 <div class="hide"b="3">内容三</div>
52 </div>
53 <script src="jqueryfile/jquery-3.2.1.js"></script>
54 <script>
55 $(".menu-item").click(function() {
56 $(this).addClass("active").siblings().removeClass("active");
57 // 自定义属性获取
58 // $(".content").children(‘[b="‘+$(this).attr(‘a‘)+‘"]‘).removeClass("hide").siblings().addClass("hide");
59 // index获取
60 $(".content").children().eq($(this).index()).removeClass(‘hide‘).siblings().addClass(‘hide‘)
61 })
62 </script>
63 </body>
64 </html>
jquery事件
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <a onclick="clickOn()" href="http://www.baidu.com">走你</a>
9 <script>
10 function clickOn() {
11 alert(123);
12 }
13 </script>
14 <!--clickon事件先于标签本身的事件执行-->
15 <!--<a onclick="return clickOn()" href="http://www.baidu.com">走你</a>-->
16 <!--<script>-->
17 <!--function clickOn() {-->
18 <!--alert(123);-->
19 <!--return false-->
20 <!--}-->
21 <!--</script>-->
22 <!--如果事件返回 false则不执行本身的事件-->
23 <!--jquery里面也是一样 return false就可以了-->
24 </body>
25 </html>
表单提交
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <form action="s1.html" method="post">
9 <div><input type="text" /><input type="submit" value="提交" /></div>
10
11 </form>
12 <script src="jqueryfile/jquery-3.2.1.js"></script>
13 <script>
14 $(":submit").click(function() {
15 var v = $(this).prev().val();
16 if(v.length>0){
17 return true;
18 }else {
19 alert("请输入内容");
20 return false
21 }
22 })
23 </script>
24 </body>
25 </html>
表单提交的提示信息
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .error{
8 color:red;
9 }
10 </style>
11 </head>
12 <body class="i1">
13 <form action="s1.html" method="post">
14 <div><input type="text" /></div>
15 <div><input type="text" /></div>
16 <div><input type="text" /></div>
17 <div><input type="text" /></div>
18 <div><input type="password" /></div>
19 <div><input type="text" /></div>
20 <input type="submit" value="提交" />
21 </form>
22 <script src="jqueryfile/jquery-3.2.1.js"></script>
23 <script>
24 $(":submit").click(function() {
25 $(".error").remove();
26 var flag = true;
27
28 $(‘form‘).find("input[type=‘text‘],input[type=‘password‘]").each(function() {
29 var v = $(this).val();
30 if(v.length<=0){
31 flag = false;
32 var tag = document.createElement(‘span‘);
33 tag.innerHTML=‘必填‘;
34 tag.className = "error";
35 $(this).after(tag);
36 }
37 });
38 return flag
39 });
40
41
42 </script>
43 </body>
44 </html>
点赞效果
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .container{
8 width: 500px;
9 height: 50px;
10 border: 1px solid orangered;
11 }
12 .item{
13 position: relative;
14 padding: 10px;
15 width: 30px;
16 }
17 </style>
18 </head>
19 <body>
20 <div class="container">
21 <div class="item">
22 <span>赞</span>
23
24 </div>
25 </div>
26 <div class="container">
27 <div class="item">
28 <span>赞</span>
29 </div>
30 </div>
31 <div class="container">
32 <div class="item">
33 <span>赞</span>
34 </div>
35 </div>
36 <script src="jqueryfile/jquery-3.2.1.js"></script>
37 <script>
38 $(".item").click(function() {
39 addFavor(this)
40 })
41 function addFavor(self) {
42 var tag = document.createElement("span");
43 var fontsize = 10;
44 var top = 10;
45 var right = 6;
46 var opacity = 1;
47 $(tag).text("+1");
48 $(tag).css("color",‘grey‘);
49 $(tag).css("position",‘absolute‘);
50 $(tag).css("fontSize",fontsize+"px");
51 $(tag).css("right",right+"px");
52 $(tag).css("top",top+"px");
53 $(tag).css("opacity",opacity);
54 $(self).append(tag);
55
56 var obj = setInterval(function() {
57 fontsize = fontsize +5;
58 top = top - 7;
59 right = right -7;
60 opacity = opacity -0.15;
61 $(tag).css("fontSize",fontsize+"px");
62 $(tag).css("right",right+"px");
63 $(tag).css("top",top+"px");
64 $(tag).css("opacity",opacity);
65
66 if (opacity < 0){
67 clearInterval(obj);
68 $(tag).remove()
69 }
70 }, 50);
71
72
73 }
74 </script>
75 </body>
76 </html>
时间： 2024-10-11 04:04:06