zoukankan      html  css  js  c++  java
  • 前端学习(十九)jquery(笔记)

    jquery:库,框架

        js,别人封装成的js

    官网:http://jquery.com/

    -----------------------------------
    1.7

    ----------
    jq 1.X 兼容ie6
    jq 2.x 兼容ie9+

    怎么来选择库:
        
        基于需求!
    ---------------------------------

    稳定版本!

    准备:
        库:
        帮助手册:

    -------------------------------------------------
    原生:
        window.onload=function(){}

        doucment.getElementById('box')

    jq:
        $(function(){
            
        })

        $('#box')

        hide()---display:none;
        show()---display:block;

        $('#box').addClass('active');添个加一个class

        $('#box').removeClass('active');删除class

        $('#btn').hover(function(){
            $('#box').show();---鼠标移入
        },function(){
            $('#box').hide();---鼠标移出    
        });


        $('#btn').toggle(function(){---点击显示隐藏!
            $('#box').show();
        },function(){
            $('#box').hide();    
        });


        $(function(){-----上滑下滑!
            $('#btn').hover(function(){
                $('#box').slideDown();
            },function(){
                $('#box').slideUp();    
            });
        })

        $(function(){----淡入淡出!
            $('#btn').hover(function(){
                $('#box').fadeIn();
            },function(){
                $('#box').fadeOut();    
            });
        })

    ----------------------------
    --

    结论:
        原生js:只用系统函数,自己写!

        jq:别人写好的函数!

    ----------------------------------------------    

    回调函数:
        前一个函数执行完毕以后,再开始执行的这个函数!


    ================================================
    jq选择器:

        $('#div1')  获取一个元素!

        $('.red') 获取一组class!

        $('#ul1 .red') 获取#ul1下面的一组class(red)--具有优先级!

        $('li') 标签来获取一组

        -----------------------------------------

        伪类选择器:
            $('li:first')  第一个li

            $('li:last')  最后一个li
            $('li:eq(3)') 第某一个li

            $('li:odd')  奇数
            $('li:even')  奇数

    ---------------------------------------------
    特殊:
    $('div:has(span)') ---根据标签里面包的span标签来获取这个标签div

    $('div:contains(智)')---根据标签里面的内容来获取这个div!

    -------------------------------------------------
    属性选择器:

        $('ul li input[type=text]')---通过input属性来获取一组input

    =================================================
    标签的内容:
        原生:
            普通:innerHTML
            表单:value

        jq:
            普通:html();
            表单:val();

    -----------------------------------------
     

  • 相关阅读:
    排列与组合
    C++构造函数虚函数例题
    排序
    Android相机是如何获取到图像的
    《Android进阶》之第七篇 NDK的使用
    递归相关题目
    华为模拟性格测试
    平衡二叉树
    Fragment回调接口应用间分享数据
    IOS中限制TextField中输入的类型以及长度
  • 原文地址:https://www.cnblogs.com/wxiaoyu/p/9579313.html
Copyright © 2011-2022 走看看