Jquery

jQuery

  http://jquery.cuishifeng.cn/

  模块 《=》类库

  DOM/BOM/JavaScript的类库

  版本：

      1.x  1.12

      2.x

      3.x

  转换：

      jquery对象[0]  => Dom对象

      Dom对象        => $(Dom对象)

  一、查找元素

      DOM

        10左右

      jQuery：

        选择器，直接找到某个或者某类标签

        1. id

            $('#id')

        2. class

            <div class='c1'></div>

            $(".c1")

        3. 标签

            <div id='i10' class='c1'>

              <a>f</a>

              <a>f</a>

            </div>

            <div class='c1'>

              <a>f</a>

            </div>

            <div class='c1'>

              <div class='c2'> </div>

            </div>

            $('a')

        4. 组合a

            <div id='i10' class='c1'>

              <a>f</a>

              <a>f</a>

            </div>

            <div class='c1'>

              <a>f</a>

            </div>

            <div class='c1'>

              <div class='c2'> </div>

            </div>

            $('a')

            $('.c2')

            $('a,.c2,#i10')

        5. 层级

            $('#i10 a') 子子孙孙

            $('#i10>a') 儿子

        6. 基本

            :first

            :last

            :eq()

        7. 属性

            $('[alex]')      具有alex属性的所有标签

            $('[alex="123"]') alex属性等于123的标签

            <input type='text'/>

            <input type='text'/>

            <input type='file'/>

            <input type='password'/>

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

            $(':text')

        实例：

            多选，反选，全选

            - 选择权

            -

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

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

            -

              jQuery方法内置循环： $('#tb:checkbox').xxxx

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

                  // k当前索引

                  // this，DOM，当前循环的元素 $(this)

              })

            - var v = 条件 ? 真值 : 假值

        筛选

            $('#i1').next()  下一个

            $('#i1').nextAll()  下边所有的

            $('#i1').nextUntil('#ii1') 直到找到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()  ##  input设置值

            $(..).val(..)

      样式操作：

            addClass

            removeClass

            toggleClass   开关   

        $('#i1').click(function(){

        $('.c1').toggleClass('hide');

        })

      属性操作：

            # 专门用于做自定义属性

            $(..).attr('n')     

            $(..).attr('n','v')       第一个是获取值，第二个是更新的值

            $(..).removeAttr('n')        删除

            <input type='checkbox' id='i1'  />

            # 专门用于chekbox,radio

            $(..).prop('checked')

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

            PS:

              index 获取索引位置

      文档处理：

            append  追加最下面 $('#u1').append(temp);

            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(){

              $(...)

            })

      jQuery扩展：

        - $.extend        $.方法

        - $.fn.extend    $(..).方法

        (function(){

            var status = 1;

            // 封装变量

        })(jQuery)

  二、操作元素

===》实例：

作业：

  一：

        $('i1').height()          # 获取标签的高度 纯高度

        $('i1').innerHeight()      # 获取边框 + 纯高度 + ？

        $('i1').outerHeight()      # 获取边框 + 纯高度 + ？

        $('i1').outerHeight(true)  # 获取边框 + 纯高度 + ？

        # 纯高度，边框，外边距，内边距

  二、所有实例敲一遍

  三、编辑框

例子  全选功能

if(this.checked){

    this.checked = false;

}else{

    this.checked = true;

}

if($(this).prop('checked')){

    $(this).prop('checked', false);

}else{

    $(this).prop('checked', true);

}

// 三元运算var v = 条件? 真值：假值

  var v = $(this).prop('checked')?false:true;

  $(this).prop('checked',v);

例子 点击标题

$(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')

获取当前标签的下一个，删除 hide样式  查找 兄弟  中   查找样式为 content的     添加 hide

.hide{

    display: none;

}

模态对话框

<style>

    .hide{

        display: none;

    }

    .modal{

        position: fixed;

        top: 50%;

        left: 50%;

        width: 500px;

        height: 400px;

        margin-left: -250px;

        margin-top: -250px;

        background-color: #eeeeee;

        z-index: 10;

    }

    .shadow{

        position: fixed;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        opacity: 0.6;

        background-color: black;

        z-index: 9;

    }

</style>

<script>

删除按钮

        $('.del').click(function () {

            $(this).parent().parent().remove();

        });

添加按钮

        function  confirmModal() {

            var tr = document.createElement('tr');

            var td1 = document.createElement('td');

            td1.innerHTML = "11.11.11.11";

            var td2 = document.createElement('td');

            td2.innerHTML = "8001";

            $(tr).append(td1);

            $(tr).append(td2);

            $('#tb').append(tr);

            $(".modal,.shadow").addClass('hide');

//            $('.modal input[type="text"]').each(function () {

//                // var temp = "<td>..."

//

//

//

//            })

        }

        function  addElement() {

            $(".modal,.shadow").removeClass('hide');

        }

        function cancelModal() {

            $(".modal,.shadow").addClass('hide');

            $('.modal input[type="text"]').val("");

        }

编辑按钮

        $('.edit').click(function(){

            $(".modal,.shadow").removeClass('hide');

            // this

            var tds = $(this).parent().prevAll();  所有的

            tds.each(function () {

                // 获取td的target属性值

                var n = $(this).attr('target');     ip

                // 获取td中的内容

                var text = $(this).text();         80

                var a1 = '.modal input[name="'; 

                var a2 = '"]';

                var temp = a1 + n + a2;  拼接  .modal input[name="ip"]

                $(temp).val(text);  $('.modal   input[name="ip"]')(80)   ##点开之后 进行设置的

            });

//            var port = $(tds[0]).text();

//            var host = $(tds[1]).text();

//

//            $('.modal input[name="hostname"]').val(host);

//            $('.modal input[name="port"]').val(port);

            // 循环获取tds中内容

            // 获取 <td>内容</td> 获取中间的内容

            // 赋值给input标签中的value

        });

    </script>

菜单切换

<script>

    $('.menu-item').click(function(){

        $(this).addClass('active').siblings().removeClass('active');

        var target = $(this).attr('a');

        $('.content').children("[b='"+ target+"']").removeClass('hide').siblings().addClass('hide');

    });

</script>

<script>

    $('.menu-item').click(function(){

        $(this).addClass('active').siblings().removeClass('active');

        $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');

    });

</script>

登录验证

$(function(){

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

    $(':submit').click(function () {

        $('.error').remove();

        var flag = true;

        $('#f1').find('input[type="text"],input[type="password"]').each(function () {

            var v = $(this).val();

            var n = $(this).attr('tex');

            if(v.length <= 0){

                flag = false;

                var tag = document.createElement('span');

                tag.className = "error";

                tag.innerHTML = n + "必填";

                $(this).after(tag);

                // return false;

            }

        });

        return flag;

});

});

扩展

<script>

    var v = $.wangsen();

    alert(v);

    $('#i1').css()

    $.ajax()

    jquery扩展

    $.fn.extend({

        "hanyang": function () {

            return 'db';

        }

    });

    var v = $('#i1').hanyang();

    alert(v);

    $.extend({

        'wangsen': function () {

            return 'sb';

        }

    });

    var v = $.wangsen();

    alert(v);

</script>