码迷,mamicode.com
首页 > Web开发 > 详细

html+css

时间:2018-03-10 14:11:36      阅读:315      评论:0      收藏:0      [点我收藏+]

标签:app   hle   back   ntb   tom   script   body   gif   点击   

 一,html,css

1,cursor属性  有pointer move  hlep wait  等

2,background-color    background-image

3,float属性用来标签漂移,部署标签

]4,position标签

    fixed    固定定位相对于窗口

    relative   本身不起作用,一般和absolute结合使用

    absolute  绝对定位web page的位置,注意不是窗口。一般和relative使用,在其内部

5,利用position:fixed,可以css层叠样式,z-index属下指定最外层(层级关系)。结合透明对属性opacity可以做模态对话框。

二,js

1,变量声明   全局变量:name=‘123’    局部变量: var  name=‘123’

2,单行注释  //               多行注释  /*     */

3,由于代码上线会压缩,每行代码建议加 分号;

4,javascript 面向对象

技术分享图片
  function Foo(name,age) {

  this.Name = name;

  this.Age = age;

  this.Func = function(arg){

  return this.Name+arg;

  }

   }

  var obj = new Foo(‘xiao‘, 18);

  console.log(obj.Name);
View Code

5.dom  文档对象树

  document.getElementbyId   找标签

  innerText          innerHTML    获取值

 三.jquery

1,选择器   $(‘#n1‘) id选择器      $(‘.con‘).text(‘hello‘)   class 选择器并赋值文本‘hello’         $(‘div  .con‘) 找到div标签下的所有class=con的标签

$(‘n1‘).children()   找儿子     $(‘n1).find()找所有的    $(‘n1‘).siblings() 找同级别的兄弟标签

<div onclick=‘func(this);‘></div>

function(ths){$(ths).text}     this是一个特殊参数代指当前标签

 2.  $(‘n1‘).html  获取值    $(‘n1‘).html(‘xiaofeng‘) 设置值        

  $(‘n1‘).text
3,checkbox反选    

技术分享图片

View Code
4,返回顶部
技术分享图片
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .go-top{
 8             position: fixed;
 9             right:0px;
10             bottom: 0px;
11         }
12     </style>
13 </head>
14 <body>
15     <div style="height:5000px; background-color: #000066 ">ding</div>
16 
17     <div class="go-top">
18         <a  onclick="GoTop();">fanhui</a>
19     </div>
20     <script src="jquery-1.12.4.js"></script>
21     <script>
22         function GoTop() {
23             $(window).scrollTop(0);
24         }
25     </script>
26 </body>
27 </html>
View Code

5,为所有li标签绑定事件

技术分享图片
    <div style="height:5000px; background-color:#848484 ">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(li).click(function(){
            var temp = $(this).text();
            alert(temp);
        })
    </script>
View Code

6.当html文档树准备好了就执行script  ,需要将上面的代码放在这个大括号里面

$(function){}       //  尽量使用这种写法

7.  delegate  委托       -----只有点击标签的时候才绑定事件                             undelegate  从所有元素删除由 delegate() 方法添加的所有事件处理器:

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .go-top{
            position: fixed;
            right:0px;
            bottom: 0px;
        }
    </style>
</head>
<body>
    <div style="height:5000px; background-color:#848484 ">
        <input type="button" value="tianjia" onclick="Add();"/>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        function Add(){
            $(div).append(<li>888</li>);
        }
        $(function(){
            $(div).delegate(li,click,function(){
                var temp=$(this).text();
                alert(temp);
            })
        })
    </script>
</body>
</html>
View Code

 


















html+css

标签:app   hle   back   ntb   tom   script   body   gif   点击   

原文地址:https://www.cnblogs.com/xiaofeng0510/p/8534055.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!