第七章(3)

目录

  1. 布局
  2. js函数
  3. js序列化
  4. js转义
  5. js eval
  6. js 时间
  7. 作用域
  8. js 原型
  9. js 转换
  10. dom 查找元素
  11.  dom 样式操作
  12. dom 属性操作
  13. 动作 样式 结构 相互独立
  14. 事件
  15. 绑定事件第三种
  16. jquery 
  17. 示例

1布局

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         .c1{
 6         position: fixed;
 7         top:48px;
 8         bottom:0;
 9         left:0;
10         width:200px;
11         background-color: red;
12 
13         }
14         .c2{
15         position: fixed;
16         top: 48px;
17         bottom: 0;
18         left: 200px;
19         right: 0;
20         background-color: #FF9900;
21         overflow: auto;
22         }
23     </style>
24 </head>
25 <body style="margin:0 auto;">
26       <div style="height:48px;background-color:#dddddd;"></div>
27       <div class="c1"></div>
28       <div class="c2">
29           <div>test</div>
30           <div>test</div>
31       <div>
布局1
 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         .c1{
 6         position: absolute;
 7         top:48px;
 8         bottom:0;
 9         left:0;
10         width:200px;
11         background-color: red;
12 
13         }
14         .c2{
15         position: absolute;
16         top: 48px;
17         bottom: 0;
18         left: 200px;
19         right: 0;
20         background-color: #FF9900;
21         overflow: auto;
22         }
23     </style>
24 </head>
25 <body style="margin:0 auto;">
26       <div style="height:48px;background-color:#dddddd;"></div>
27       <div class="c1"></div>
28       <div class="c2">
29           <div>test</div>
30           <div>test</div>
31           <div>test</div>
32       <div>
布局2
 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <link rel="stylesheet" href="Font-Awesome-master/css/font-awesome.min.css"/>
 5     <style>
 6         .left{
 7         float:left;
 8         }
 9         .right{
10         float:right;
11         }
12         .c1{
13         height:48px;
14         background-color: #dddddd;
15         }
16         .c2{
17         padding-right:20px;
18         }
19         .c3{
20         display: inline-block;
21         padding: 4px; 7px;
22         background-color:red;
23         border-radius: 50%;
24         }
25     </style>
26 </head>
27 <body style="margin:0 auto;">
28        <div class="c1">
29            <div class="c2 right">
30                <i class="fa fa-envelope-o" aria-hidden="true"></i>
31            </div>
32            <div class="c2 right">
33                <i class="fa fa-commenting" aria-hidden="true"></i>
34                <span class="c3">5</span>
35            </div>
36        </div>
37 </body>
38 </html>
布局3

图标下载

http://fontawesome.io/icons/

2js函数

普通函数

  function func(){
     
   }

匿名函数

 function func(arg){
   
     return arg+1
   }
   
   steInterval("func()",5000);
   
   setInterval(function()){
       console.log(123);
   },5000)

自执行函数

自执行函数(创建函数并且自动执行)；
    function func(arg){
      console.log(arg);
    }
    func(1)
    
    (function(arg){
      console.log(arg);
    })(1)

3js序列化

JSON.stringify()  将对象转换为字符串
JSON.pares()      将字符串转换为对象类型

4js转义

客户端(cookie) => 服务端
将数据经过转义后，保存在cookie

url="https://www.sogou.com/web?query=理解"
encodeURI(url)
"https://www.sogou.com/web?query=%E7%90%86%E8%A7%A3"
decodeURI(url)
encodeURIComponent(url)

5js eval

python：
      val = eval(表达式)
            exec(执行代码)
            
       JavaSCript:
             eval

6js 时间

Date类

var d = new Date()

d.getxxx 获取
d.setXXX 设置



var d = new Date()
undefined
d
Sat Dec 30 2017 14:53:53 GMT+0800 (中国标准时间)
n = d.getMinutes() + 4
57
d.setMinutes(n)
1514617073984
d
Sat Dec 30 2017 14:57:53 GMT+0800 (中国标准时间)

7 作用域

  • JavaScript: 以函数作为作用域

  • 函数的作用域在函数未被调用之前，已经创建

  • 函数的作用域存在作用域链，并且也是在未被调用之前创建

xo = "alex"
"alex"
"alex"

function func(){
    var xo = ‘eric’;
    function inner(){
      console.log(xo);
    
   }
   return inner;
}
var ret = func()
ret()

8js原型

function Foo(){
  this.name = n;
}
# F00的原型
Foo.prototype = {
  'sayName': function(){
    console.log(this.name)
  }
}

obj1 = new Foo('we');
obj.satName()

obj2 = new Foo('wee');

9js转换

jquery对象[0]   => Dom对象
		Dom对象         => $(Dom对象)

10查找元素

获取ID
obj = document.getElementById('i1');

innerText 
获取标签内容
obj.innerText 
修改
obj.innerText = "张三"
obj.innerText = "<a herf='http://www.baidu.com'>百度</a>";

innerHTML
获取标签
obj.innerHTML 
修改
obj.innerHTML = "张三"
obj.innerHTML = "<a href='http://www.baidu.com'>百度</a>";

修改pinut内容

obj=document.getElementById('i2')
<input type="text" id="i2">
obj.value
""
obj.value = "abc"
"abc"

<select id="i3">
             <option value="11">上海1</option>
             <option value="12">上海2</option>
             <option value="13">上海3</option>
         </select>
         
  obj = document.getElementById('i3');
  obj.value
  obj.value = "13"

11dom 样式操作

obj= document.getElementById('i1');

obi.className = "c1 c2";

获取name
obj.className
obj.classList

添加样式
obj.classList.add('c3')

删除样式
obj.classList.remove('c2')

设置style值

obj= document.getElementById('i1');

obj.style.color = 'red';

obj.style.fontSize = '16px';
obj.style.backgroundColor = 'red';

12dom 属性操作

attributes        查看
getAttribute      设置
removeAttribute   删除

obj = document.getElementById("i1")

设置value
obj.setAttribute('value','nnnn');

obj

查看所有属性
obj.attributes

13动作 样式 结构 相互独立

作用域示例

<input id='i1' type='button' ondbclick='ClickOn(this)'>

<body>
    <table border="1" width="300px;">
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>1</td><td>2</td><td>3</td></tr>
    </table>
<script>
    var myTrs = document.getElementsByTagName("tr");
    var len = myTrs.length;
    for(var i=0;i<len;i++){
        myTrs[i].onmouseover = function(){
              this.style.backgroundColor = "red";
        }

         myTrs[i].onmouseout = function(){
              this.style.backgroundColor = "";
        }
    }
</script>
</body>

14事件

onabort	    图像加载被中断	
onblur	    元素失去焦点	
onchange	用户改变域的内容	
onclick	    鼠标点击某个对象	
ondblclick	鼠标双击某个对象	
onerror	    当加载文档或图像时发生某个错误	
onfocus	    元素获得焦点	
onkeydown	某个键盘的键被按下	
onkeypress	某个键盘的键被按下或按住	
onkeyup	    某个键盘的键被松开	
onload	    某个页面或图像被完成加载	
onmousedown	某个鼠标按键被按下	
onmousemove	鼠标被移动	
onmouseout	鼠标从某元素移开	
onmouseover	鼠标被移到某元素之上	
onmouseup	某个鼠标按键被松开	
onreset	    重置按钮被点击	
onresize	窗口或框架被调整尺寸	
onselect	文本被选定	
onsubmit	提交按钮被点击	
onunload	用户退出页面

15绑定事件第三种

mymain.addEventListener("click",function(){console.log("main")},true); 
true   捕捉模式(从上到下)
false  冒泡模式(从下到上)

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #main{
        background-color: red;
        width:300px;
        height:400px;
    }
        #content{
        background-color:pink;
        width:200px;
        height:300px;
        }
    </style>
</head>
<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")},true);
    mycontent.addEventListener("click",function(){console.log("content")},true);
</script>
</body>

16jquery

http://jquery.cuishifeng.cn/

http://www.oyksoft.com/soft/12273.html

1.id

<body>
   <div id="i1">test</div>

<script src="jquery.js"></script>
<script>
    $("#i1")
</script>

2.标签

$(".c1")
$("a")
$("#i1,a, .c1")

3.层级

$("#i1>a") 子孙
$("#i1 a") 儿子

4.属性

<a han="123">ttt</a>
$('[han="123"]')
$('[han]')

$("input[type='text']")
<input type="text">

5.基本

:first
:last
:eq()

筛选器

$(this).next()         下一个
$(this).prev()         上一个
$(this).parent()       父
$('#i1').children()    孩子
$('#i1').siblings()    兄弟
$('#i1').find('#i1')   子子孙孙中查找

$('#i1').pervALL()         查找所有上一个
$('#i1').prevUntil('#ii1') 查找上一个到ii1 

$('#i1').parents()         查找所有祖宗
$('#i1').parentsUntil(ii1)   查找所有祖宗到ii1

筛选
				
				
				$('#i1').next()
				$('#i1').nextAll()
				$('#i1').nextUntil('#ii1')
				
				<div>
					<a>asdf</a>
					<a>asdf</a>
					<a id='i1'>asdf</a>
					<a>asdf</a>
					<a id='ii1'>asdf</a>
					<a>asdf</a>
				</div>
				
				$('#i1').prev()
				$('#i1').prevAll()
				$('#i1').prevUntil('#ii1')
				
				
				$('#i1').parent()
				$('#i1').parents()
				$('#i1').parentsUntil()
				
				$('#i1').children()
				$('#i1').siblings()
				$('#i1').find()
				$('li:eq(1)')
				$('li').eq(1)
				first()
				last()
				hasClass(class)

		文本操作：
				$(..).text()           # 获取文本内容
				$(..).text(“<a>1</a>”) # 设置文本内容
				
				$(..).html()
				$(..).html("<a>1</a>")
				
				$(..).val()
				$(..).val(..)
		样式操作：
				addClass
				removeClass
				toggleClass
				
		属性操作：
				# 专门用于做自定义属性
				$(..).attr('n')
				$(..).attr('n','v')
				$(..).removeAttr('n')
				
				<input type='checkbox' id='i1'  />
				
				
				# 专门用于chekbox,radio
				$(..).prop('checked')
				$(..).prop('checked', true)
				
				PS: 
					index 获取索引位置
					
		文档处理：
				append
				prepend
				after
				before
				
				remove
				empty
				
				clone
		css处理
			
			$('t1').css('样式名称', '样式值')
			点赞：
				 - $('t1').append()
				 - $('t1').remove()
				 - setInterval
				 - 透明度 1 》 0
				 - position
				 - 字体大小，位置
		位置：
			$(window).scrollTop()  获取
			$(window).scrollTop(0) 设置
			scrollLeft([val])
			
			offset().left                 指定标签在html中的坐标
			offset().top                  指定标签在html中的坐标
			
			position() 	                  指定标签相对父标签(relative)标签的坐标
			<div style='relative'>
				<div>
					<div id='i1' style='position:absolute;height:80px;border:1px'></div>
				</div>
			</div>
			
			
			$('i1').height()           # 获取标签的高度 纯高度
			$('i1').innerHeight()      # 获取边框 + 纯高度 + ？
			$('i1').outerHeight()      # 获取边框 + 纯高度 + ？
			$('i1').outerHeight(true)  # 获取边框 + 纯高度 + ？
			
			# 纯高度，边框，外边距，内边距
			
		事件
			DOM： 三种绑定方式
				jQuery：
					$('.c1').click()
					$('.c1').....
					
					$('.c1').bind('click',function(){
						
					})
					
					$('.c1').unbind('click',function(){
						
					})
					
					*******************
					$('.c').delegate('a', 'click', function(){
					
					})
					$('.c').undelegate('a', 'click', function(){
					
					})
					
					$('.c1').on('click', function(){
					
					})
					$('.c1').off('click', function(){
					
					})
					
				阻止事件发生
					return false
					
				# 当页面框架加载完成之后，自动执行
				$(function(){
					
					$(...)
					
				})

17示例

 1 head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         .left{
 6         float:left;
 7         }
 8         .right{
 9         float:right;
10         }
11         .logo{
12         background-color: #787878;
13         height:48px;width:200px;
14         line-height:48px;
15         text-align:center;
16         }
17 
18         .user{
19         height:48px;
20         width:150px;
21         background-color: #009933;
22         position:relative;
23         }
24 
25         .c1{
26         position: absolute;
27         left:0;
28         width:200px;
29         top:48px;
30         bottom:0;
31         background-color:#FF9900;
32         }
33 
34         .c2{
35         position: absolute;
36         top:48px;
37         bottom:0;
38         right:0;
39         left:200px;
40         background-color: red;
41         overflow: auto;
42         z-index: 9;
43 
44         }
45         .user:hover{                              ####
46         background-color: #00CCCC;
47         }
48         .user .ww{                                ####
49         position:absolute;
50         background-color:#660066;
51         top:48px;right:50px;
52         z-index:20;
53         width:120px;
54         display: none;
55         }
56         .user .ww a{                              ####
57         display: block;
58         }
59 
60         .user:hover .ww{                         ####
61         display:block;
62         }
63     </style>
64 </head>
65 <body style="margin:0 auto;">
66       <div style="height:48px;background-color:#dddddd;">
67           <div class="logo left">
68               PHICOMM
69           </div>
70           <div class="user right">
71               <a>
72                   <img style="height:40px;width:40px;margin-top:4px;border-radius:50%;" src="h.png">
73               </a>
74               <div class="ww">
75                   <a>资料</a>
76                   <a>注销</a>
77               </div>
78           </div>
79       </div>
80       <div style="clear:both"></div>
81       <div class="c1"></div>
82       <div class="c2"></div>
83 
84 </body>
85 </html>
鼠标放到头像显示资料
 1 <body >
 2      <div style="width: 600px;margin: 0 auto;">
 3          <input id="i1" onfocus="Focus();" onblur="Blur();" type="text" value="请输入关键字">
 4      </div>
 5 
 6 <script>
 7     function Focus(){
 8         var tag = document.getElementById('i1');
 9         var val = tag.value;
10         if(val == "请输入关键字"){
11              tag.value = "";
12         }
13     }
14     function Blur(){
15           var tag = document.getElementById('i1');
16           var val = tag.value;
17           if(val.length == 0){
18                tag.value = "请输入关键字";
19           }
20     }
21 </script>
22 </body>
23 </html>
input框默认字
 1 <body >
 2      <input type="button" onclick="AddEle();" value="+" />
 3      <input type="button" onclick="AddEle2();" value="+" />
 4 <div id="i1">
 5     <p><input type="text" /></p>
 6 </div>
 7 <script>
 8     function AddEle(){
 9          var tag = "<p><input type='text' /></p>";
10          document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);
11     }
12 
13     function AddEle2(){
14 
15            var tag = document.createElement('input');
16            tag.setAttribute('type','text');
17            tag.style.fontSize = '16px';
18            tag.style.color = 'red';
19 
20            var p = document.createElement('p');
21            p.appendChild(tag);
22 
23            document.getElementById('i1').appendChild(p);
24     }
25 
26 </script>
27 </body>
添加input框
 1 任何标签通过dom都可以提交
 2 
 3 <body >
 4     <form id="f1" action="http://www.phicomm.com">
 5         <input type="text" />
 6         <input type="submit" value="提交"/>
 7         <a onclick="submitForm();">提交</a>
 8     </form>
 9 <script>
10     function submitForm(){
11        document.getElementById('f1').submit()
12     }
13 </script>
14 </body>
提交事件
var v = confirm('真的要删除吗？')  v:true false

<body >
    <form id="f1">
        <input type="text" />
        <a onclick="submitForm();">删除</a>
    </form>
<script>
    function submitForm(){
           var v = confirm('真的要删除吗？')
           console.log(v);
    }

</script>
</body>
删除提示

重定向

location.href
location.href = ""  重定向 跳转
location.reload()   页面刷新
location.href = loaction.href

清楚定时

var ol = setInterval(function()){},5000)
clearInterval(ol);                 #清楚

var o2 = setTimeout(function(){},50000);  #执行一次秦楚
clearTimeout(o2);                         #清楚




<body >
     <div id="status"></div>
     <input type="button" value="删除" onclick="DeleteEle();"/>

<script>
    function DeleteEle(){
         document.getElementById('status').innerText = "已删除";
         setTimeout(function (){
                document.getElementById('status').innerText = "";
         }, 3000);
    }
</script>
</body>

多选 反选

  • $('#tb :checkbox').prop('checked'); 获取值

  • $('#tb :checkbox').prop('checked',true); 设置值

  • jquery方法内置循环：$('#tb:checkbox').xxx

  • $('#tb:checkbox').each(function(k){

    ​ k当前索引

    ​ this,DOM,当前循环的元素 $(this)

    })

    var v = 条件 ？真值：

 1 <body>
 2 
 3       <input type="button" value="全选" onclick="checkALL();" />
 4       <input type="button" value="取消" onclick="cancleALL()" />
 5       <input type="button" value="反选" onclick="reverseALL()" />
 6 
 7 
 8       <table border="1">
 9           <thead>
10                <tr>
11                    <th>选项</th>
12                    <th>IP</th>
13                    <th>PORT</th>
14                </tr>
15           </thead>
16           <tbody id="tb">
17              <tr>
18                  <td><input type="checkbox" /></td>
19                  <td>192.168.1.1</td>
20                  <td>80</td>
21              </tr>
22              <tr>
23                  <td><input type="checkbox" /></td>
24                  <td>192.168.1.1</td>
25                  <td>80</td>
26              </tr>
27              <tr>
28                  <td><input type="checkbox" /></td>
29                  <td>192.168.1.1</td>
30                  <td>80</td>
31              </tr>
32           </tbody>
33       </table>
34 
35 <script src="jquery.js"></script>
36 
37 <script>
38     function checkALL(){
39         $('#tb :checkbox').prop('checked',true);
40     }
41     function cancleALL(){
42         $('#tb :checkbox').prop('checked',false);
43     }
44     function reverseALL(){
45         $(':checkbox').each(function(k){
46             //this，代指当循环的每一个元素
47             // if(this.checked){
48             //     this.checked = false;
49             // }else{
50             //     this.checked = true;
51             // }
52 
53             // if($(this).prop('checked')){
54             //     $(this).prop('checked',false);
55             // }else{
56             //     $(this).prop('checked',true);
57             // }
58 
59             var v = $(this).prop('checked')?false:true;
60             $(this).prop('checked',v);
61 
62             })
63     }
64 </script>
多选 反选
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .header{
        background-color: black;
        color: wheat;
    }
       .content{
        min-height: 50px;
    }
        .hide{
            display: none
        }
    </style>


</head>
<body>
    <div style="height:400px;width:200px;border: 1px solid #dddddd">
        <div class="item">
            <div class="header">标题一</div>
            <div class="content">内容</div>
        </div>
        <div class="item">
            <div class="header">标题二</div>
            <div class="content hide">内容</div>
        </div>
        <div class="item">
            <div class="header">标题三</div>
            <div class="content hide">内容</div>
        </div>
    </div>
    <script src="jquery.js"></script>
<script>
    #绑定事件
    $('.header').click(function(){
        // $(this).next().removeClass('hide');
        // $(this).parent().siblings().find('.content').addClass('hide');

#链接式编程        $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide');
    })
</script>
</body>
左侧菜单
  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         .modal{
 11             position: fixed;
 12             top: 50%;
 13             left: 50%;
 14             width: 500px;
 15             height: 400px;
 16             margin-left: -250px;
 17             margin-top: -250px;
 18             background-color: #eeeeee;
 19             z-index: 10;
 20         }
 21         .shadow{
 22             position: fixed;
 23             top: 0;
 24             left: 0;
 25             right: 0;
 26             bottom: 0;
 27             opacity: 0.6;
 28             background-color: black;
 29             z-index: 9;
 30         }
 31     </style>
 32 </head>
 33 <body>
 34     <a onclick="addElement();">添加</a>
 35 
 36     <table border="1" id="tb">
 37         <tr>
 38             <td target="hostname">192.168.1.1</td>
 39             <td target="port">80</td>
 40             <td target="ip">111</td>
 41             <td>
 42                 <a class="edit">编辑</a> | <a class="del">删除</a>
 43             </td>
 44         </tr>
 45         <tr>
 46             <td target="hostname">192.168.1.2</td>
 47             <td target="port">80</td>
 48             <td target="ip">211</td>
 49             <td>
 50                 <a class="edit">编辑</a> | <a class="del">删除</a>
 51             </td>
 52         </tr>
 53         <tr>
 54             <td target="hostname">192.168.1.3</td>
 55             <td target="port">80</td>
 56             <td target="ip">211</td>
 57             <td>
 58                 <a class="edit">编辑</a> | <a class="del">删除</a>
 59             </td>
 60         </tr>
 61     </table>
 62 
 63     <div class="modal hide">
 64         <div>
 65             <input name="hostname" type="text" />
 66             <input name="port" type="text" />
 67             <input name="ip" type="text" />
 68         </div>
 69 
 70         <div>
 71             <input type="button" value="取消" onclick="cancelModal();"/>
 72             <input type="button" value="确定" onclick="confirmModal();"/>
 73         </div>
 74     </div>
 75 
 76     <div class="shadow hide"></div>
 77 
 78     <script src="jquery.js"></script>
 79     <script>
 80         $('.del').click(function(){
 81             $(this).parent().parent().remove();
 82         });
 83 
 84         function confirmModal() {
 85             var tr = document.createElement('tr');
 86             var td1 = document.createElement('td');
 87             td1.innerHTML = "22.22.22.22";
 88             var td2 = document.createElement('td');
 89             td2.innerHTML = "8001";
 90 
 91             $(tr).append(td1);
 92             $(tr).append(td2);
 93 
 94             $('#tb').append(tr);
 95 
 96             $(".modal,.shadow").addClass('hide');
 97                 $('.modal input[type="text"]').each(function (){
 98                     var temp = ""
 99                 })
100         }
101 
102         function addElement(){
103             $(".modal,.shadow").removeClass('hide');
104         }
105         function cancelModal(){
106             $(".modal,.shadow").addClass('hide');
107             $('.modal input[type="text"]').val("");
108         }
109 
110         $('.edit').click(function(){
111             $(".modal,.shadow").removeClass('hide');
112             var tds = $(this).parent().prevAll();
113             tds.each(function(){
114                 var n = $(this).attr('target');
115                 // 获取td中的内容
116                 var text = $(this).text();
117                 var a1 = '.modal input[name="';
118                 var a2 = '"]';
119                 var temp = a1 + n + a2;
120                 $(temp).val(text);
121             });
122 
123             // var port = $(tds[0]).text();
124             // var host = $(tds[1]).text();
125             //
126             // $('.modal input[name="hostname"]').val(host);
127             // $('.modal input[name="port"]').val(port);
128              // 循环获取tds中内容
129             // 获取 <td>内容</td> 获取中间的内容
130             // 赋值给input标签中的value
131         });
132     </script>
133 </body>
134 </html>
添加 编辑 删除
 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         .hide{
 6             display: none;
 7         }
 8     </style>
 9 </head>
10 <body>
11     <input type="checkbox" id="i2" />
12     <input id="i1" type="button" value="开关" />
13     <div class="c1 hide">test</div>
14 
15     <script src="jquery.js"></script>
16     <script>
17         $('#i1').click(function(){
18             // if($('.c1').hasClass('hide')){
19             //     $('.c1').removeClass('hide');
20             // }else{
21             //     $('.c1').addClass('hide');
22             // }
23            $('.c1').toggleClass('hide');
24         })
25     </script>
26 </body>
27 </html>
开关示例
 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         .hide{
 6             display: none;
 7         }
 8         .menu{
 9             height: 38px;
10             background-color: #eeeeee;
11             line-height: 38px;
12         }
13         .active{
14             background-color: brown;
15         }
16         .menu .menu-item{
17             float: left;
18             border-right: 1px solid red;
19             padding: 0 5px;
20             cursor: pointer;
21         }
22         .content{
23             min-height: 100px;
24             border: 1px solid #eeeeee;
25         }
26     </style>
27 </head>
28 <body>
29     <div style="width: 700px;margin:0 auto;">
30         <div class="menu">
31             <div class="menu-item active" >菜单一</div>
32             <div class="menu-item " >菜单二</div>
33             <div class="menu-item ">菜单三</div>
34         </div>
35         <div class="content">
36             <div >内容一</div>
37             <div class='hide' >内容二</div>
38             <div class='hide'>内容三</div>
39         </div>
40     </div>
41     <script src="jquery.js"></script>
42     <script>
43         $('.menu-item').click(function(){
44             $(this).addClass('active').siblings().removeClass('active');
45             $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');
46 
47         })
48     </script>
49 </body>
50 </html>
table 切换菜单
 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4 </head>
 5 <body>
 6     <input id="t1" type="text"/>
 7     <input id="a1" type="button" value="添加" />
 8     <input id="a2" type="button" value="删除" />
 9     <input id="a3" type="button" value="复制" />
10 
11     <ul id="u1">
12         <li>1</li>
13         <li>2</li>
14     </ul>
15 <script src="jquery.js"></script>
16     <script>
17         $('#a1').click(function(){
18             var v = $('#t1').val();
19             var temp = "<li>" + v + "</li>";
20             // $('#u1').append(temp);
21             // $('#u1').after(temp); 添加父下
22             // $('#u1').before(temp);添加父上
23         });
24 
25             $('#a2').click(function(){
26                 var index = $('#t1').val();
27                 // $('#u1 li').eq(index).remove(); 删除
28                // $('#u1 li').eq(index).empty();    只删除内容
29 
30             })；
31             //克隆
32             $('#a3').click(function(){
33                 var index = $('#t1').val();
34                 var v = $('#u1 li').eq(index).clone();
35                 $('#u1').append(v);
36             })
37             // $('ul li').click(function(){
38             //     var v = $(this).text();
39             //     alert(v);
40             // })
41             //
42             // $('ul li').bind('click',function(){
43             //     var v = $(this).text();
44             //     alert(v);
45             // })
46             //
47             // $('ul li').on('click',function(){
48             //     var v = $(this).text();
49             //     alert(v);
50             // })
51             // $('ul').delegate('li','click',function(){
52             //     var v = $(this).text();
53             //     alert(v);
54             // })
55     </script>
56 </body>
57 </html>
添加 删除 复制
 1 </head>
 2     <div class="container">
 3         <div class="item">
 4             <span>赞</span>
 5         </div>
 6     </div>
 7     <div class="container">
 8         <div class="item">
 9             <span>赞</span>
10         </div>
11     </div>
12     <div class="container">
13         <div class="item">
14             <span>赞</span>
15         </div>
16     </div>
17     <div class="container">
18         <div class="item">
19             <span>赞</span>
20         </div>
21     </div>
22     <script src="jquery.js"></script>
23     <script>
24         $('.item').click(function(){
25             AddFavor(this);
26 
27         });
28         function AddFavor(self){
29             var fontSize = 15;
30             var top = 0;
31             var right = 0;
32             var opacity = 1;
33 
34             var tag = document.createElement('span');
35             $(tag).text('+1');
36             $(tag).css('color','green');
37             $(tag).css('position','absolute');
38             $(tag).css('fontSize',fontSize + 'px');
39             $(tag).css('right',right + "px");
40             $(tag).css('opacity',opacity);
41             $(self).append(tag);
42 
43             var obj = setInterval(function(){
44                 fontSize = fontSize + 10;
45                 top = top - 10;
46                 right = right - 10;
47                 opacity = opacity - 0.1;
48 
49                 $(tag).css('fontSize',fontSize + "px");
50                 $(tag).css('right',right + 'px');
51                 $(tag).css('top',top + 'px');
52                 $(tag).css('opacity',opacity);
53                 if(opacity < 0 ){
54                     clearInterval(obj);
55                     $(tag).remove();
56                 }
57             },40);
58         }
59     </script>
60 <body>
点赞

事件阻止

return true 执行后面 return false 不执行后面的

 1 <body>
 2     <a onclick="return ClickOn()" href="http://www.oldboyedu.com">go1</a>
 3     
 4     <a id="li" href="http://oldboyedu.com">go2</a>
 5     <script src="jquery.js"></script>
 6     <script>
 7         function ClickOn(){
 8             alert(123);
 9             return true;
10         }
11         $('#li').click(function(){
12             alert(456);
13             return false;
14         })
15     </script>
16 </body>
View Code

当页面所有元素加载完毕后，执行

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         .error{
 6             color: red;
 7         }
 8     </style>
 9 </head>
10 <body>
11     <form id="f1" action="s5.html" method="POST">
12         <div><input name="n1" tex ="用户名" type="text"/></div>
13         <div><input name="n2" tex="密码" type="password"/></div>
14         <div><input name="n3" tex ="邮箱" type="text"/></div>
15         <div><input name="n4" tex ="端口" type="text"/></div>
16         <div><input name="n5" tex ="IP" type="text"/></div>
17 
18         <input type="submit" value="提交"/>
19         <img src="...">
20     </form>
21     <script src="jquery.js"></script>
22     <script>
23         //当页面框加载完毕后，自动执行
24         // $(function(){
25         //     $.Login('#fl')
26         // });
27 
28         $(function(){
29             //当页面所有元素加载完毕后，执行
30             $(':submit').click(function(){
31                 $('.error').remove();
32                 var flag = true;
33                 $('#f1').find('input[type="text"],input[type="password"]').each(function(){
34                     var v = $(this).val();
35                     var n = $(this).attr('tex');
36                     if(v.length <=0){
37                         flag = false;
38                         var tag = document.createElement('span');
39                         tag.className = "error";
40                         tag.innerHTML = n + "必填";
41                         $(this).after(tag);
42                     }
43                 });
44                 return flag;
45             });
46         });
47 
48         // $(':submit').click(function(){
49         //     var v = $(this).prev().val();
50         //     if(v.length > 0){
51         //         return true;
52         //     }else{
53         //         alert('请输入内容');
54         //         return false
55         //     }
56         // })
57     </script>
58 </body>
View Code

jquery 扩展

 1 <body>
 2    <script src="jquery.js"></script>
 3    <script src="plugin1.js"></script>
 4     <script>
 5         var v = $.wangsen();
 6         alert(v);
 7         $.ajax()
 8         $.fn.extend({
 9             "hanyang": function(){
10                 return 'db';
11             }
12         });
13         var v = $('#i1').hanyang();
14         alert(v);
15 
16         $.extend({
17             'wangsen': function(){
18                 return 'sb';
19             }
20         });
21         var v = $.wangsen();
22         alert(v);
23     </script>
jquery扩展

plugin1

ststus = 1;

$.extend({
    'wangsen': function(){
        return 'sb';
    }
});

plugin2

(function (arg){
    var status = 1;
    arg.extend({
        'wangsen': function(){
            return 'sb';
        }
    });
})(jQuery);

　　

 

posted @ 2018-01-22 20:55  ༺༽秋水.无痕༼༻  阅读(202)  评论(0)  编辑  收藏  举报
……