• jQuery与js例子


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <!--全选与反选按钮-->
    
        <input type="button" value="全选" onclick="checkAll();" />
        <input type="button" value="反选" onclick="reverseAll();" />
        <input type="button" value="取消"  onclick="cancleAll();"/>
    
        <table border="1">
            <thead>
                <tr>
                    <th>选项</th>
                    <th>IP</th>
                    <th>PORT</th>
                    <!--<td>编辑|删除</td>-->
                </tr>
            </thead>
            <tbody id="tb">
    
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1.1.1.1</td>
                    <td>80</td>
                    <td>编辑|删除</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1.1.1.1</td>
                    <td>80</td>
                    <td>编辑|删除</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1.1.1.1</td>
                    <td>80</td>
                    <td>编辑|删除</td>
    
                </tr>
            </tbody>
        </table>
    
        <script src="jquery-1.12.4.js"></script>    //引用jquery
    <!DOCTYPE html>
    <html lang="en">
    <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; 200px;border: 1px solid #dddddd">
            <div class="item">
                <div class="header">标题一</div>
                <div id="i1" class="content hide">内容</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-1.12.4.js"></script>
        <script>
            $('.header').click(function(){
                // 当前点击的标签 $(this)
                // 获取某个标签的下一个标签
                // 获取某个标签的父标签
                // 获取所有的兄弟标签
                // 添加样式和移除样式
                // $('.i1').addClass('hide')
                // $('#i1').removeClass('hide')
                // var v = $("this + div");
                // $("label + input")
                // console.log(v);
                //
                // $("afsldkfja;skjdf;aksdjf")
    
                // 筛选器
                /*
                $(this).next()      下一个
                $(this).prev()      上一个
                $(this).parent()    父
                $(this).children()  孩子
                $('#i1').siblings() 兄弟
                $('#i1').find('#i1') 子子孙孙中查找
                // . . .
                //
                $('#i1').addClass(..)
                $('#i1').removeClass(..)
                */
    
                // 链式编程
                // $(...).click(function(){
                //     this..
                // })
    
    
    //            $(this).next().removeClass('hide');
    //            $(this).parent().siblings().find('.content').addClass('hide')
    
                $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')
    
            })
        </script>
    </body>
    </html>
        <script>
            function checkAll() {
                $('#tb :checkbox').prop('checked',true);
            }
            function cancleAll() {
                $('#tb :checkbox').prop('checked',false);
            }
            function reverseAll() {
                $(':checkbox').each(function(k){
                    // this,代指当前循环的每一个元素
                    // Dom
                    /*
                    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);
                })
            }
        </script>
        <script>
            function checknoll() {
                $('#tb:checkbox').prop('checked',true)
    
            }
        </script>
    </body>
    </html>

     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')

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

    $(...)

    })

    jQuery扩展:
    - $.extend $.方法
    - $.fn.extend $(..).方法

    (function(){
    var status = 1;
    // 封装变量
    })(jQuery)


    二、操作元素

    ===》实例:

    作业:
    一:
    $('i1').height() # 获取标签的高度 纯高度
    $('i1').innerHeight() # 获取边框 + 纯高度 +
    $('i1').outerHeight() # 获取边框 + 纯高度 +
    $('i1').outerHeight(true) # 获取边框 + 纯高度 +

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

    二、所有实例敲一遍

    三、编辑框






  • 相关阅读:
    k8s使用
    7月3日课堂笔记
    7月6日课堂笔记
    画倒三角形
    6月29日课堂笔记
    understand试用笔记一阅读VS2010项目
    Spring Boot 入门(九)使用RabbitMQ
    Spring Boot 入门(十一)使用Schedule
    Spring Boot 入门(十三)使用Elasticsearch
    学习MySQL
  • 原文地址:https://www.cnblogs.com/1314520xh/p/8947953.html
Copyright © 2020-2023  润新知