zoukankan      html  css  js  c++  java
  • 2019.1.21jQuery

    jQuery:

    jQuery 是一个 JavaScript 库。

    ======================引入====================

    <script src="js/JQuery.js"></script>

    jQuery 语法实例

    基础语法是:$(selector).action()

    • 美元符号定义 jQuery
    • 选择符(selector)“查询”和“查找” HTML 元素
    • jQuery 的 action() 执行对元素的操作
    $(this).hide()
    演示 jQuery 的 hide() 函数,隐藏当前的 HTML 元素。
    $("p").hide()
    演示 jQuery 的 hide() 函数,隐藏所有 <p> 元素。
    $(".test").hide()
    演示 jQuery 的 hide() 函数,隐藏所有 class="test" 的元素。
    $("#test").hide()
               演示 jQuery 的 hide() 函数,隐藏 id="test" 的元素。
    当引入放在<head></head>标签里:
    为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
    我们写上一个函数:
    $(document).ready(function(){
                      //在里面继续写内容,这是当文档全部加载就绪,运行jQuery
    })
    selector  选择器
    根据标签当作选择器  $("p") 选取 <p> 元素。
    根据class找到选择器  $(".p") 选取 <p> 元素。
    根据ID找到选择器    $("#p") 选取 <p> 元素。
    根据css选择器       $("p").css("background-color","red");    //所有P
    事件方法:
    $(document).ready(function)  将函数绑定到文档的就绪事件(当文档完成加载时)
    $(selector).click(function)    触发或将函数绑定到被选元素的点击事件
    $(selector).dblclick(function)    触发或将函数绑定到被选元素的双击事件
    $(selector).focus(function)      触发或将函数绑定到被选元素的获得焦点事件
    $(selector).mouseover(function)    触发或将函数绑定到被选元素的鼠标悬停事件
    ========================jQuery效果:====================
    显示隐藏: $(selector).hide(speed,callback);      //隐藏
          $(selector).show(speed,callback);      //显示
    切换:
          $(selector).toggle(speed,callback);        //切换
    淡入淡出:
          $(selector).fadeIn(speed,callback);         //淡入效果
          $(selector).adeOut(speed,callback);        //淡出效果
          $(selector).fadeToggle(speed,callback);      //切换
          $(selector).fadeTo(speed,opacity,callback);    //给定不透明度
    滑动:   $(selector).slideDown(speed,callback);      //向下滑动
          $(selector).slideUp(speed,callback);        //向上滑动
          $(selector).slideToggle(speed,callback);       //切换
    动画:
          $(selector).animate({params},speed,callback);      //创建自定义动画
    停止:
          $(selector).stop(stopAll,goToEnd);            //在动画或效果完成前对它们进行停止。
    回调函数:
          $(selector).hide(speed,callback);            //当动画 100% 完成后,即调用 Callback 函数。

    Chaining:链接

          $("#p1").css("color","red").slideUp(2000).slideDown(2000);
    ============================jQuery获取内容和属性==================
    • text() - 设置或返回所选元素的文本内容
    • html() - 设置或返回所选元素的内容(包括 HTML 标记)
    • val() - 设置或返回表单字段的值

    获取属性:attr()

    attr与css的区别 :attr是获取或设置元素的某个属性值,css是设置或获取元素style里面的属性的

     =====================添加新的元素/内容=================

    • append() - 在被选元素的结尾插入内容  
    • prepend() - 在被选元素的开头插入内容
    • after() - 在被选元素之后插入内容
    • before() - 在被选元素之前插入内容

    ========================删除元素/内容======================

    • remove() - 删除被选元素(及其子元素)       //方法也可接受一个参数,允许您对被删元素进行过滤。
    • empty() - 从被选元素中删除子元素

    ======================对css元素进行操作===================

    • addClass() - 向被选元素添加一个或多个类                 //添加多个类,中间用空格隔开
    • removeClass() - 从被选元素删除一个或多个类
    • toggleClass() - 对被选元素进行添加/删除类的切换操作
    • css() - 设置或返回样式属性

    css() 方法设置或返回被选元素的一个或多个样式属性。

    返回指定的 CSS 属性的值:

                  css("propertyname");      //返回首个匹配元素

    设置指定的 CSS 属性:

                  css("propertyname","value");      //将为所有匹配元素设置 值

    设置多个 CSS 属性:

                  css({"propertyname":"value","propertyname":"value",...});

    ===============================处理元素和浏览器窗口的尺寸====================

    • width()              //方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
    • height()
    • innerWidth()      //方法返回元素的宽度(包括内边距)。
    • innerHeight()
    • outerWidth()            //方法返回元素的宽度(包括内边距和边框)。
    • outerHeight()
    • outerWidth(true) 方法返回元素的宽度       (包括内边距、边框和外边距)。

    • outerHeight(true) 方法返回元素的高度      (包括内边距、边框和外边距)。

    ====================================向上遍历DOM树============================

    • parent()            //返回被选元素的直接父元素。
    • parents()           //返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)
    • parentsUntil()         //返回介于两个给定元素之间的所有祖先元素。(不包括最后一个)

    ===========================向下遍历==========================

    • children()          //返回被选元素的所有直接子元素。
    • find()                 //返回被选元素的后代元素,一路向下直到最后一个后代。(不包括最后一个)

    ============================同胞元素======================

    • siblings()                         //返回被选元素的所有同胞元素。
    • next()                               //返回被选元素的下一个同胞元素。
    • nextAll()                           //返回被选元素的所有跟随的同胞元素。
    • nextUntil()                        //返回介于两个给定参数之间的所有跟随的同胞元素。(不包括最后一个)
    • prev()
    • prevAll()
    • prevUntil()

    ==============================过滤==========================

    三个最基本的过滤方法是:first(), last() 和 eq(),它们允许您基于其在一组元素中的位置来选择一个特定的元素。

    其他过滤方法,比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

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

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

    eq() 方法返回被选元素中带有指定索引号的元素。

    filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。

    not() 方法返回不匹配标准的所有元素。

    提示:not() 方法与 filter() 相反。

    =================================.each()===========================

    对 jQuery 对象进行迭代,为每个匹配元素执行函数。

    each() 方法规定为每个匹配元素规定运行的函数。

    提示:返回 false 可用于及早停止循环。

    $(selector).each(function(index,element))    function(index,element)    为每个匹配元素规定运行的函数。

    index 选择器的index位置      element (当前元素,也可以使用“this”选择器)

    例子:

    <button>输出每个列表项的值</button>
    <ul>
    <li>Coffee</li>
    <li>Milk</li>
    <li>Soda</li>
    </ul>

    <script type="text/javascript">
    $(document).ready(function(){
    $("button").click(function(){
    $("li").each(function(){
    alert($(this).text())
    });
    });
    });
    </script>

  • 相关阅读:
    java并发编程(五)lock
    java并发编程(一)线程状态 & 线程中断 & 线程间的协作
    java基础之 clone
    java基础 小知识点汇总篇
    java并发编程(四) 线程池 & 任务执行、终止源码分析
    GC(一)内存管理与垃圾回收
    java并发编程(三)cpu cache & 缓存一致性
    java并发编程(八) CAS & Unsafe & atomic
    @PathVariable注解
    redis分布式锁
  • 原文地址:https://www.cnblogs.com/liuwei1/p/10300549.html
Copyright © 2011-2022 走看看