jQuery

jQuery

  • jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。
  • jQuery的特点
    1. 链式编程：比如.show()和.html()可以连写成.show().html()。
    2. 隐式迭代：隐式 对应的是 显式。隐式迭代的意思是：在方法的内部进行循环遍历，而不用我们自己再进行循环，简化我们的操作，方便我们调用。
    3. 在使用jQuery的API时，都是方法调用，也就是说要加小括号()，小括号里面是相应的参数，参数不同，功能不同。
  • jQuery有三个大版本：
    1. 1.x版本：最新版为 v1.11.3
    2. 2.x版本：最新版为 v2.1.4（不再支持IE6、7、8）
    3. 3.x版本
  • jQuery操作DOM:节点操作(增删改查，克隆)，文本操作，属性操作（类操作，样式操作，值操作），事件绑定
  • 官网：http://jquery.com/
  • 官网API文档：http://api.jquery.com/
  • 汉化API文档：http://www.css88.com/jqapi-1.9/
  • jquery 在线手册 ：http://hemin.cn/jq/
  • 其他文档1：点击     其他文档2：点击>
  • jqueryUI 官网 ：https://jqueryui.com/
  • jqueryUI 中文网 ：http://www.jqueryui.org.cn/
  • 官网demo：https://www.oschina.net/project/tag/273/jquery
入口函数
js和jQuery实现相同功能

一、js中的DOM对象和jQuery对象比较

  • jQuery占用了两个变量：$ 和 jQuery console.log($);console.log(jQuery);打印的值一样，所以$代表的就是jQuery。
  • jQuery 就是把 DOM 对象重新包装了一下，让其具有了 jQuery 方法。
  • jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错
  • 约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$
  • jQuery对象 转为 DOM 对象：jquery对象[index](推荐) 或者 jquery对象.get(index)比如：$("#msg")[0].innerHTML
  • DOM 对象 转为 jQuery对象：$(js对象);
00


11


22


33


44

二、查找元素(选择器和筛选器)

1、基本选择器
    $("*")//通用选择器
    $("#id")//id选择器
    $(".class")//class选择器
    $("element")//标签选择器
    $(".class,p,div")//并集选择器
    $("div.c1")// 交集选择器 找到有含有c1类的div标签
2、层级选择器
    $(".outer div")//后代（子子孙孙）
    $(".outer>div")//子代（所有儿子）
    $(".outer+div")//找到所有紧挨在.outer后面的div
    $(".outer~div")//.outer之后所有的兄弟div
3、属性选择器
    $('[id="div1"]')
    $("[name!='newsletter']")
    $("[name^='news']")//找所有name属性以news开头的标签
    $("input[name*='man']")//找所有name属性中含有news的input标签
    $("input[id][name$='man']")//且的关系(找所有含id且属性name以man结尾的input标签)
4、表单选择器
    $("[type='text']") = $("input:text") = $(":text")   //注意只适用于input标签
5、表单对象属性
    $("input:enabled") $("input:disabled") $("input:checked") $("select option:selected")=$("option:selected")


1、基本筛选器
    $("li:first")
    $("li:last")
    $("li:even")//索引为偶数的
    $("li:odd")//索引为奇数的
    $("li:eq(2)")//等于
    $("li:gt(1)")//大于索引1的li元素
    $("li:lt(1)")
    :not(元素选择器)// 移除所有满足not条件的标签
    :has(元素选择器)// 根据含有某个后代筛选
2、过滤筛选器方法
    $("div").first() // 获取匹配的第一个元素
    $("div").last() // 获取匹配的最后一个元素
    $("div").eq(n) // 索引值等于指定值的元素，n是索引
    $("div").not() // 从匹配元素的集合中删除与指定表达式匹配的元素
    $("div").find("p") //后代选择器，在所有div标签中找后代的p标签
    $("div").filter(".c1")  // 交集选择器，从结果集中过滤出有c1样式类的
    $("p").filter(".selected, :first") //或的关系
    $("div").has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
    $("ul li").hasClass("test")
3、查找筛选器方法
     查找子标签（找儿子）：         $("div").children(".test")
                                $("div").find("p") //后代选择器，在所有div标签中找后代的p标签

     向下查找兄弟标签（找弟弟）：    $(".test").next()
                                $(".test").nextAll()
                                $("#id").nextUntil("#i2") #直到找到id为i2的标签就结束查找，不包含它

     向上查找兄弟标签（找哥哥）：    $("div").prev()
                                $("div").prevAll()
                                $("#id").prevUntil("#i2")

     查找所有兄弟标签（找兄弟）：    $("div").siblings() // 兄弟们，不包含自己，.siblings('#id')，可以在添加选择器进行进一步筛选

     查找父标签（找祖辈）：         $(".test").parent()
                                $(".test").parents()// 查找当前元素的所有的父辈元素（爷爷辈、祖先辈都找到）
                                $("#id").parentsUntil('body')
                                // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止，这里直到body标签，不包含body标签，基本选择器都可以放到这里面使用。
4、返回（选取所有的p元素，查找并选取span子元素，然后再回过来选取p元素）
    $("p").find("span").end()

5.表单筛选器
    type筛选器
    :text
    :password
    :file
    :radio
    :checkbox
    :submit
    :reset
    :button

    其他属性筛选器
    :enabled
    :disabled
    :checked
    :selected
基本选择器 



    
    
    
    



    
    
  • 111
    • 
    
  • 222
    • 
    
  • 333
    • 
    
      
        
    1. aaa
      2. 
        
    2. bbb
      3. 
        
    3. ccc
      4.
层级选择器 


    
        
        
    
    
         

            
属性元素器

            
            
    
                
  • 分手应该体面
    • 
                
  • 分手应该体面
    • 
                
  • 分手应该体面
    • 
                
  • 分手应该体面
    •
属性选择器 


    
        
        基本过滤选择器
    
    
        
    
            
  • 哈哈哈哈，基本过滤选择器
    • 
            
  • 嘿嘿嘿
    • 
            
  • 天王盖地虎
    • 
            
  • 小鸡炖蘑菇
    •
基本筛选器 


    
        
        
    
    
         

            

                我是第一个span标签
                我是第二个span标签
                我是第三个span标签
            

            
        

        
    
            
  • 2
    • 
            
  • 3
    • 
            
  • 4
    • 
            
  • 5
    •
筛选器方法

三、jQuery绑定事件

1、页面载入
    $(document).ready(function(){}) =  $(function(){})　
2、事件绑定  //语法:标签对象.事件(函数)
    $("p").click(function(){})
3、事件委派
    $("").on(eve,[selector],[data],fn)  // 在选择元素上绑定一个或多个事件的事件处理函数。
    $("ul").on("click","li",func)  $("ul").off("click","li",func)
    $("p").on("click", function(){ alert( $(this).text());});
4、事件切换
    $(".test").hover(enter,out)
    hover事件：
        一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
        over:鼠标移到元素上要触发的函数
        out:鼠标移出元素要触发的函数
绑定事件:
bind(type,data,fn)
描述：为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数。

参数说明：
type (String) : 事件类型
data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象
fn ( Function) : 绑定到每个匹配元素的事件上面的处理函数

示例：当每个p标签被点击的时候，弹出其文本
$("p").bind("click", function(){
  alert( $(this).text() );
});

你可以在事件处理之前传递一些附加的数据。
function handler(event) {
//event.data 可以获取bind()方法的第二个参数的数据
  alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)


常见事件：
click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...}) //内容发生变化，input，select等
keyup(function(){...})
mouseover/mouseout
mouseenter/mouseleave
mouseover事件是如果该标签有子标签，那么移动到该标签或者移动到子标签时会连续触发，mouseenter事件不管有没有子标签都只触发一次，表示鼠标进入这个对象

通过返回false来取消默认的行为并阻止事件起泡。

$("form").bind("submit", function() { return false; })
或通过event.preventDefault() 方法阻止事件起泡

$("form").bind("submit", function(event){
  event.stopPropagation();
});



解绑事件：
unbind(type,fn);
描述：bind()的反向操作，从每一个匹配的元素中删除绑定的事件。
如果没有参数，则删除所有绑定的事件。
如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。

参数说明：
type (String) : (可选) 事件类型
fn(Function) : (可选) 要从每个匹配元素的事件中反绑定的事件处理函数

示例：把所有段落的所有事件取消绑定
$("p").unbind()

将段落的click事件取消绑定
$("p").unbind( "click" )
绑定解绑bind&unbind 
一次性事件:
one(type,data,fn)
描述：为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同

参数说明：
type (String) : 事件类型
data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象
fn (Function) : 绑定到每个匹配元素的事件上面的处理函数

示例：当所有段落被第一次点击的时候，显示所有其文本。
$("p").one("click", function(){
//只有第一次点击的时候才会触发，再次点击不会触发了
  alert( $(this).text() );
});
一次性事件one 



    
    Title



    
    
  • 1
    • 
    
  • 2
    • 
    
  • 3
    •
事件委托on&off 
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .test{
            width: 200px;
            height: 200px;
            background-color: wheat;
        }
    style>
head>
<body>


<div class="test">div>
body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js">script>
<script>
function enter(){
    console.log("enter")
}
function out(){
    console.log("out")
}
$(".test").hover(enter,out)

/*
$(".test").mouseenter(function(){
        console.log("enter")
});

$(".test").mouseleave(function(){
        console.log("leave")
    });
*/
script>
html>
事件切换 



  
  
  
  登录注册示例
表单验证 



    
    Title
    
    






    
    

        #
        姓名
        爱好
        操作
    

    
    
    

        
        金老板
        开车
        
            
        
    

    

        
        alex
        抽烟、喝酒、烫头
        
            
        
    

    

        
        苑昊（苑局）
        不洗头、不翻车、不要脸
表格操作

四、操作属性

1、属性
    $("").attr();  //对于HTML元素的自定义DOM属性，在处理时，使用attr方法。
    $("").removeAttr();
    $("").prop();  //对于HTML元素的固有属性，在处理时，使用prop方法。
    $("").removeProp();
    注意：
        //像checkbox，radio和select这样的元素，选中属性对应"checked"和"selected"，这些也属于固有属性
        //因此需要使用prop方法去操作才能获得正确的结果。
2、HTML代码/文本/值
    $("").html([val|fn])
    $("").text([val|fn])
    $("").val([val|fn|arr])  //val 表单控件value属性
3、CSS类
    $("").addClass(class|fn)
    $("").removeClass([class|fn])
    $('div').toggleClass('box') // 如果存在（不存在）就删除（添加）一个类。
4、CSS样式
    $("#c1").css({"color":"red","fontSize":"35px"})   $("p").css("color","red")
5、位置操作
    $("").offset([coordinates]) //相对当前视口的偏移,只对可见元素有效。
    $("").position()            //相对父元素的偏移,只对可见元素有效。
    $("").scrollTop([val])      //相对滚动条的偏移,此方法对可见和隐藏元素均有效。
    $("").scrollLeft([val])
6、尺寸操作
    内容 : 宽度(width)和高度(height)
    $("").height([val|fn])
    $("").width([val|fn])       //获取宽度 返回匹配元素中第一个元素的宽，一个没有单位的数值

    内容+padding : 宽度(innerWidth)和高度(innerHeight)
    $("").innerHeight()         //获取内部区域高度（包括补白、不包括边框）,此方法对可见和隐藏元素均有效。
    $("").innerWidth()

    内容+padding+border : 宽度(outerWidth)和高度(outerHeight)
    $("").outerHeight([soptions])   //获取外部高度（默认包括补白和边框）,设置为true时，计算边距margin在内,此方法对可见和隐藏元素均有效。
    $("").outerHeight(true) //获取内容+padding+border+margin的高
    $("").outerWidth([options])
    $("").outerWidth(true) //获取第一个匹配元素：内容+padding+border+margin的宽
属性操作:
attr() 设置属性值、者获取属性值
//获取值：attr()设置一个属性值的时候 只是获取值
$('div').attr('id')
$('div').attr('class')

//设置值
$('div').attr('class','box') //设置一个值
$('div').attr({name:'hahaha',class:'happy'}) //设置多个值

removeAttr() 移除属性
//删除单个属性
$('#box').removeAttr('name');
$('#box').removeAttr('class');

//删除多个属性
$('#box').removeAttr('name class');

prop()
// 查看属性
$(selector).prop(property)

// 设置属性
$(selector).prop(property,value)

// 设置多个属性
$(selector).prop({property:value, property:value,...})


$('input').attr('checked')
"checked"

$('input').prop('checked')
true

$('input').prop('cheched',false)  //设置取消选中


addClass添加类名
// 为每个匹配的元素添加指定的类名。
$('div').addClass("box");//追加一个
$('div').addClass("box box2");//追加多个


removeClass移除类名
// 从所有匹配的元素中删除全部或者指定的类。
$('div').removeClass('box')；//移除box类
$('div').removeClass();//移除全部的类


通过添加删除类，来实现元素的显示隐藏
var tag  = false;
$('span').click(function(){
if(tag){
    $('span').removeClass('active')
    tag=false;
}else{
    $('span').addClass('active')
    tag=true;
}
})


toggleClass类的切换
// 如果存在（不存在）就删除（添加）一个类。
$('div').toggleClass('box')

$('span').click(function(){
    //动态的切换class类名为active
    $(this).toggleClass('active')
})



val 表单控件value属性
// 获取值：用于表单控件中获取值，比如input textarea select等等
$(selector).val()

// 设置值：
$('input').val('设置了表单控件中的值')



css样式

// css(直接修改css的属性来修改样式)
$("div").css('color'); //获取

$("p").css("color", "red"); //设置
$("p").css({"color":"red","background-color":"yello"}); // 设置多个


盒子样式属性
内容 : 宽度(width)和高度(height)
// 宽度
.width() //获取宽度 返回匹配元素中第一个元素的宽，一个没有单位的数值
.width( value ) //设置宽度

//高度
.height() //获取高度 返回匹配元素中第一个元素的高，一个没有单位的数值
.height( value ) //设置高度


内容+padding : 宽度(innerWidth)和高度(innerHeight)
// 内部宽
.innerWidth() // 获取
.innerWidth(value);//设置

// 内部高
.innerHeight() // 获取
.innerHeight(value); //设置


内容+padding+border : 宽度(outerWidth)和高度(outerHeight)
// 外部宽
 .outerWidth() //获取第一个匹配元素 ：内容+padding+border的宽
 .outerWidth(true) //获取第一个匹配元素：内容+padding+border+margin的宽

 .outerWidth(value) //设置多个，调整的是“内容”的宽

//外部高
 .outerHeight() //第一个匹配元素：获取内容+padding+border的高
 .outerHeight(true) //第一个匹配元素：获取内容+padding+border+margin的高

 .outerHeight( value ) //设置多个，调整的是“内容”的高



滚动条距离属性

// 水平方向
.scrollLeft()      //获取
.scrollLeft( value )//设置

// 垂直方向
.scrollTop() //获取
.scrollTop( value ) //设置
操作属性 



    
    Title








   
    

        #
        姓名
        爱好
    

   
    
    

        
        金老板
        开车
    

    

        
        alex
        抽烟、喝酒、烫头
    

    

        
        苑昊（苑局）
        不洗头、不翻车、不要脸
表格全选、反选示例 



    
    
    


     
    
         
  • 张三
    • 
         
  • 李四
    • 
         
  • 王五
    •
addClass示例 



    
    


    

            男
            
            女
            gay

            吃饭
            睡觉
            打豆豆
表单示例 



    
    Title

    


     

           
hello

           
hello

           
hello

           
hello

           
hello

           
hello

           
hello

           
hello

           
hello

           
hello

           
hello

           
hello

           
hello

           
hello

           
hello

           
hello

     

     

     
返回顶部
返回顶部

五、操作标签

文档标签操作:
1、创建一个标签对象
    $("
")
2、内部插入
    父元素.append(子元素) //追加
    子元素.appendTo(父元素) //追加
    父元素.prepend(子元素) // 前置添加
    子元素.prependTo(父元素) // 前置添加
3、外部插入
    兄弟元素.after(要插入的兄弟元素) // 在匹配的元素之后插入内容
    要插入的兄弟元素.inserAfter(兄弟元素) // 在匹配的元素之后插入内容
    兄弟元素.before(要插入的兄弟元素); // 在匹配的元素之前插入内容
    要插入的兄弟元素.inserBefore(兄弟元素); // 在匹配的元素之前插入内容
4、修改/替换
    $(selector).replaceWith(content); // selector被替换：将所有匹配的元素替换成指定的string、js对象、jquery对象。
    $('
哈哈哈
')replaceAll(selector);// selector被替换：将所有的匹配的元素替换成p标签。
5、删除
    $("").empty() // 清空选中元素中的所有后代节点
    $("").remove([expr]) //删除节点后，事件也会删除（简言之，删除了整个标签）
    $(selector).detach(); // 删除节点后，事件会保留
6、复制
    $("").clone([Even[,deepEven]])

标签内文本操作:
HTML代码/文本/值
    $("").html([val|fn])
    $("").text([val|fn])
    $("").val([val|fn|arr])
标签内文本操作:
    html 标签元素中所有的内容:

    //获取值：获取选中标签元素中所有的内容
    $('#box').html();

    //设置值：设置该元素的所有内容 会替换掉 标签中原来的内容
    $('#box').html('百度一下');

    text 标签元素的文本内容:

    //获取值：获取选中标签元素中的文本内容
    $('#box').text();

    //设置值：设置该所有的文本内容
    $('#box').text('百度一下');
    注意：text()方法接收的值为标签的时候 不会被渲染为标签元素 只会被当做值渲染到浏览器中




文档标签操作:

    之前js中咱们学习了js的DOM操作,也就是所谓的增删改查DOM操作。通过js的DOM的操作，大家也能发现，大量的繁琐代码实现我们想要的效果。那么jQuery的文档操作的API提供了便利的方法供我们操作我们的文档。

    看一个之前我们js操作DOM的例子：

    var oUl = document.getElementsByTagName('ul')[0];
    var oLi = document.createElement('li');
    oLi.innerHTML = '内容';
    oUl.appendChild(oLi);


插入标签
    append和appendTo

    //追加某元素，在父元素中添加新的子元素。子元素可以为：stirng | element（js对象） | jquery元素
    父元素.append(子元素)

    //追加到某元素，子元素添加到父元素
    子元素.appendTo(父元素)

    //append
    var oli = document.createElement('li');
    oli.innerHTML = '哈哈哈';
    $('ul').append('
  • 1233
    • ');
    $('ul').append(oli);
    $('ul').append($('#app'));

    //appendTo
    $('
  • 天王盖地虎
    • ').appendTo($('ul')).addClass('active')

    PS:如果追加的jquery对象原本在文档树中，那么这些元素将从原位置上消失。简言之，就是移动操作。


    prepend和prependTo

    // 前置添加， 添加到父元素的第一个位置
    父元素.prepend(子元素)；

    // 前置添加， 添加到父元素的第一个位置
    子元素.prependTo(父元素)；

    // prepand
    $('ul').prepend('
  • 我是第一个
    • ')
    // prependTo
    $('路飞学诚').prependTo('ul')


    after和insertAfter

    // 在匹配的元素之后插入内容
    兄弟元素.after(要插入的兄弟元素)；
    要插入的兄弟元素.inserAfter(兄弟元素)；


    $('ul').after('
    我是一个h3标题
    ')
    $('
    我是一个h2标题
    ').insertAfter('ul')


    before和insertBefore

    // 在匹配的元素之前插入内容
    兄弟元素.before(要插入的兄弟元素)；
    要插入的兄弟元素.inserBefore(兄弟元素)；

    //示例
    $('ul').before('
    我是一个h3标题
    ')
    $('
    我是一个h2标题
    ').insertBefore('ul')



删除标签 remove、detach和empty
    //删除节点后，事件也会删除（简言之，删除了整个标签）
    $(selector).remove();

    // 删除节点后，事件会保留
    $(selector).detach();

    // 清空选中元素中的所有后代节点
    $(selector).empty();

    // remove
    $('ul').remove();

    // detach
    var $btn = $('button').detach()
    $('ul').append($btn) //此时按钮能追加到ul中

    //empty
    $('ul').empty() //清空掉ul中的子元素，保留ul



修改标签 replaceWith和replaceAll
    // selector被替换：将所有匹配的元素替换成指定的string、js对象、jquery对象。
    $(selector).replaceWith(content);

    // selector被替换：将所有的匹配的元素替换成p标签。
    $('
    哈哈哈
    ')replaceAll(selector);

    // replaceWith
    $('h5').replaceWith('hello world') //将所有的h5标题替换为a标签
    $('h5').replaceWith($('#app')); //将所有h5标题标签替换成id为app的dom元素

    // replaceAll
    $('
    ').replaceAll('h4')


克隆标签 clone
    // 克隆匹配的DOM元素
    $(选择器).clone();

    $('button').click(function() {
     // 1.clone()：克隆匹配的DOM元素
     // 2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力)
      $(this).clone(true).insertAfter(this);
    })
    标签操作

    六、each循环

    • $.each(obj,fn)
    • $("").each(fn)
    • each扩展
    $.each(obj,fn) 
    

    111
    

    222
    

    333
    $("").each(fn) 
    


    
    Title


 

    111
    

    222
    

    333
    

    444
    

    555
    each扩展

    七、动画效果

    • jQuery提供的一组网页中常见的动画效果，这些动画是标准的、有规律的效果；同时还提供给我们了自定义动画的功能。
    显隐
    示例
    滑动
    示例
    淡入淡出
    示例
    自定义动画
    示例
    停止动画

    八、回调函数

    



Title


  
  
    helloworld helloworld helloworld

    九、扩展方法 (插件机制)

    1、jQuery.extend(object)

    • 扩展jQuery对象本身。
    • 用来在jQuery命名空间上增加新函数。

    2、jQuery.fn.extend(object)

    • 扩展jQuery元素集来提供新的方法（通常用来制作插件）
    


    
    Title

    十、实例练习

    左侧菜单　

    


    
    left_menu

    




    
    
    
        
    
            
    菜单一
    
            
    
                
    111
    
                
    111
    
                
    111
    
            
    
        
    
        
    
            
    菜单二
    
            
    
                
    222
    
                
    222
    
                
    222
    
            
    
        
    
        
    
            
    菜单三
    
            
    
                
    333
    
                
    333
    
                
    333

    Tab切换

    


    
    tab

    


      
    
          
      
              
    • 菜单一
      • 
              
    • 菜单二
      • 
              
    • 菜单三
      • 
          
    
          
    
              
    内容一
    
              
    内容二
    
              
    内容三

    table正反选

    


    
    Title




     
     
     
     
    
     
    
         
    
             
             111
             111
             111
             111
         
    
         
    
             
             222
             222
             222
             222
         
    
         
    
             
             333
             333
             333
             333
         
    
         
    
             
             444
             444
             444
             444

    模态对话框

    


    
    Title

    复制样式条

    


    
    Title

    注册验证

    


    
    Title

    拖动面板

    


    
    


    
    
        
    
            标题
        
    
        
    
            内容

    轮播图

    


    
    
    Title


    





      
    
          
      
              
      • 
              
      • 
              
      • 
              
      • 
              
      • 
              
      • 
          
    

          
      
              
              
              
              
              
              
          
    

          
     < 
    
          
     >

    表格编辑操作

    


    
    Title
    
    
    

    







    
    
    

        
    
            
    
                
            
    

            
    
                
    
                    姓名
                    年龄
                    部门
                    薪水
                    操作
                
    

                
    
                    张三
                    23
                    销售部
                    3000
                    
                        
                        
                        
                    
                
    

                 
    
                    李四
                    32
                    保安部
                    5000

    注册实例

    


    
    Title

    





    

    
    
    
    
    
    


    









    


    
        "utf-8">
        Index
        
    
    
        
    
            "button" onclick="fadeIn();"  value="加载条"/>
        
    
        
    "shade" class="modal-backdrop hide">
            
    class="modal">
                "./images/loading_32.gif"/>
    实例：加载 
    


"common.css" rel="stylesheet" />

    
    class='container'>
        
    class='tab-menu-box1'>
            
    class='menu'>
                
      'tab-menu-title'>
                    
    • class='current' content-to='1'>价格趋势
      • 
                    
    • '2'>市场分布
      • 
                    
    • '3'>其他
      • 
                
    
            
    

            
    'tab-menu-body' class='content'>
                
    '1'>content1
    
                
    '2' class='hide'>content2
    
                
    '3' class='hide'>content3
    实例：Tab菜单-html 
    
"en">

    "UTF-8">
    
    




    "height: 2000px;">
    


    "GoTop()" class="back hide">返回顶部
    实例：返回顶部 
    

    
        'utf-8' />
        
        
        
    
    
        
    'checklist'>
            'checkbox' value='1'/>篮球
            'checkbox' value='2'/>足球
            'checkbox' value='3'/>羽毛球
        
    
        'button' value='全选' id='selectAll' />
        'button' value='不选' id='unselectAll' />
        'button' value='反选' id='reverseAll' />
    实例：多选、反选和取消 
    

"en">
    "UTF-8">
    
    



    
    
    class="pg-body">
        
    class="wrap">
            
    class="catalog">
                
    class="catalog-item" auto-to="function1">第1张
    
                
    class="catalog-item" auto-to="function2">第2张
    
                
    class="catalog-item" auto-to="function3">第3张
    
            
    
            
    class="content">
                
    "function1" class="section">
                    
    第一章
    
                
    
                
    "function2" class="section">
                    
    第二章
    
                
    
                
    "function3" class="section">
                    
    第三章
    实例：滚动菜单 
    
"en">

    "UTF-8">
    


    
    
        
    "currentPosition" style="position: fixed;top: 0px;right: 0px;">
    
        
    
            
    class="chapter" style="height: 500px;">
                
    第一张
    
            
    

            
    class="chapter" style="height: 1500px;">
                
    第二张
    
            
    

            
    class="chapter" style="height: 30px;">
                
    第三张
    实例：滚动菜单 
    

"en">
    "UTF-8">
    


    
    "border: 1px solid #ddd;width: 600px;position: absolute;">
        
    "title" style="background-color: black;height: 40px;">
    
        
    "height: 300px;">
    实例：移动面板 
    
"en">

    "UTF-8">
    


"button" onclick="AjaxRequest()" value="跨域Ajax" />



    "container">
    实例：Ajax跨域
    Frontend

    相关

    标签