zoukankan      html  css  js  c++  java
  • jQuery笔记

    jQuery 是一个 JavaScript 函数库

    jQuery 库包含以下特性:

    • HTML 元素选取
    • HTML 元素操作
    • CSS 操作
    • HTML 事件函数
    • JavaScript 特效和动画
    • HTML DOM 遍历和修改
    • AJAX
    • Utilities

    一、引入jQuery:

       可以到jQuery官网http://jquery.com/download 下载js文件;然后在html中引入;

         jQuery语法:

        $(selector).action( )

         $美元符号定义 jQuery选择符

        (selector)“查询”和“查找” HTML 元素

         jQuery 的 action( ) 执行对元素的操作

       示例:

          $(this).hide( ) - 隐藏当前元素

          $("p").hide( ) - 隐藏所有段落

          $(".test").hide( ) - 隐藏所有 class="test" 的所有元素

          $("#test").hide( ) - 隐藏所有 id="test" 的元素

      jQuery 元素选择器:

        jQuery 使用 CSS 选择器来选取 HTML 元素。

        $("p") 选取 <p> 元素。

        $("p.intro") 选取所有 class="intro" 的 <p> 元素。

        $("p#demo") 选取所有 id="demo" 的 <p> 元素。

      jQuery 属性选择器:

        jQuery 使用 XPath 表达式来选择带有给定属性的元素。

        $("[href]") 选取所有带有 href 属性的元素。

        $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

        $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

        $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

      jQuery 事件:

    $(document).ready(function) 将函数绑定到文档的就绪事件(当文档完成加载时)
    $(selector).click(function) 触发或将函数绑定到被选元素的点击事件
    $(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
    $(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
    $(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

    二、jQuery 效果:

      1.隐藏/显示

      语法:$(selector).hide(speed,callback);  
         $(selector).show(speed,callback);

            可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。

            可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

       语法:$(selector).toggle(speed,callback);   

            使用 toggle() 方法来切换 hide() 和 show() 方法。显示被隐藏的元素,并隐藏已显示的元素。

      2.淡入淡出

        fadeIn( )  淡入    语法:$(selector).fadeIn(speed,callback);

        fadeOut( )  淡出    语法:$(selector).fadeOut(speed,callback);

        fadeToggle( )  切换淡入淡出    语法:$(selector).fadeToggle(speed,callback);

        fadeTo( )  给定的不透明度(值介于 0 与 1 之间)    语法:$(selector).fadeTo(speed,callback);

      3.滑动

        slideDown( )  向下滑动元素    语法:$(selector).slideDown(speed,callback);

        slideUp( )  向上滑动元素    语法:$(selector).slideUp(speed,callback);

        slideToggle( )  切换向上向下滑动    语法:$(selector).slideToggle(speed,callback);

      4.动画

         animate( ) 方法用于创建自定义动画

        语法:$(selector).animate({params},speed,callback);

         提示:默认地,所有 HTML 元素都有一个静态位置,且无法移动。

            如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!

      5.stop( )
        语法:$(selector).stop(stopAll,goToEnd);

         stop( ) 方法用于停止动画或效果,在它们完成之前。

         stop( ) 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。

    
    

    三、jQuery HTML

      1.获取内容 

        text()设置或者返回所选元素的文本内容

        html()设置或返回所选元素的html内容(包含标签)

        val()设置或返回表单字段的值

      2.获取属性 

        attr()获取的是所选元素的直接属性

      3.添加方法

        append()在被选元素内的结尾添加  添加多个元素用 , 隔开

        prepend()在被选元素内的开头添加 添加多个元素用 , 隔开

        after()在被选元素之后插入内容  添加多个元素用 , 隔开

        before()在被选元素之前插入内容  添加多个元素用 , 隔开

      4.删除元素

        remove()删除被选元素(及其他的子元素) 删除的时候是彻底移除  还能接受参数进行过滤

        empty()删除被选元素的子元素   清空其子元素  本身不会清除

      5.获取并设置css类

        addclass()向被选元素添加一个多个类 中间用 , 隔开

        removeclass()删除一个多个类 中间用 , 隔开

        togglecalss()进行添加/删除类的切换

        caa()设置或返回样式属性 一个或多个  他与attr相似 但是attr是返回的直接属性 css是返回的是样式

      6.尺寸

        width() height()  不包括内边距 边框 外边距

        innerWidth() innerHeight()  包括内边距 不包括边框 和外边距

        outerWidth() outerHeight()  包括内边距和边框  不包括外边距

        outerWidth(true) outerHeight(true)  包括内边距和边框外边距

        $(document).height()/width()  设置文档宽高

        $(window).height()/width()  设置窗口宽高

    
    

    三、jQuery 遍历

      1.所有的父级

        parent()返回被选元素的直接父级(爸爸)

        parents()返回被选元素的所有的父级

        arentUntil()返回介于俩个被选元素的之间所有的父级元素 但是不包括parentsUntli("div")括号里面的

    
    

      2.所有的子级

        childen()返回被选元素的所有的子级

        find("div") 返回被选元素的所有div子级

        find("*") 返回被选元素的所有子级

    
    

      3.同胞 兄弟

          siblings() f返回被选元素的所有兄弟元素

          next() 返回被选元素的下一个兄弟元素

        nextAll()  返回被选元素跟随之后的所有兄弟元素

        nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素  不包括括号内的元素

        prev(), prevAll() & prevUntil() 方法 是上的意思 与next() nextAll() nextUntli()相反 它们返回的是前面的同胞元素(在 DOM 树中沿着同胞元素向后遍历,而不是向前)。

    
    

      4.过滤

        first()  返回被选元素的首个元素

        last()  返回被选元素的最后一个元素

        eq()  方法返回被选元素中带有指定索引号的元素。索引号从 0 开始,因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素(索引号 1)

     
  • 相关阅读:
    常规排序算法 : 冒泡排序
    console.log(([])?true:false); console.log(([]==false?true:false)); console.log(({}==false)?true:false)
    近况
    正向代理和反向代理
    Angular项目目录结构
    模块化Vs组件化
    模块化开发——高内聚低耦合
    20190608笔试题のCSS-属性继承
    20190527-JavaScriptの打怪升级旅行 { 语句 [ 声明 ,变量 ] }
    20190430-Bootstrapの组件
  • 原文地址:https://www.cnblogs.com/123456fyl/p/10300529.html
Copyright © 2011-2022 走看看