zoukankan      html  css  js  c++  java
  • jquery01-基础使用

    一,jquery是什么
    1、jQuery是一个JavaScript函数库。(自己封装的库就太次了)
    2、特点("写的少,做的多")
    3、jQuery库包含以下功能:HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和HTML DOM 遍历和修改。
    二,jquery的引入
    1,下载到本地,直接引入
    <script src="jquery-1.10.2.min.js"></script> 
    
    2,从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>
    
    三,jquery入口函数
    1、所有 jQuery 函数位于一个 document ready 函数中:
    $(document).ready(function(){ 
    // 开始写 jQuery 代码... }
    );
    
    2、简洁写法(与以上写法效果相同):
    $(function(){ 
    // 开始写 jQuery 代码... 
    })
    
    四,jquery中元素的获取
    1,基础选择器
    名称 用法 描述
    ID选择器 $(“#id”); 获取指定ID的元素
    类选择器 $(“.class”); 获取同一类class的元素
    标签选择器 $(“div”); 获取同一类标签的所有元素
    并集选择器 $(“div,p,li”); 使用逗号分隔,只要符合条件之一就可。获取所有的div、p、li元素
    交集选择器(标签指定式选择器) $(“div.redClass”); 注意选择器1和选择器2之间没有空格,class为redClass的div元素,注意区分后代选择器。
    2,层级选择器
    名称 用法 描述
    子代选择器 $(“ul>li”); 使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素
    后代选择器 $(“ul li”); 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等
    3,过滤选择器
     用法 描述
    :eq(index) $(“li:eq(2)”).css(“color”, ”red”); 获取到的li元素中,选择索引号为2的元素,索引号index从0开始。
    :odd $(“li:odd”).css(“color”, ”red”); 获取到的li元素中,选择索引号为奇数的元素
    :even $(“li:even”).css(“color”, ”red”); 获取到的li元素中,选择索引号为偶数的元素
    4,筛选选择器
     用法 说明
    children(selector) $(“ul”).children(“li”) 相当于$(“ul>li”),子类选择器
    find(selector) $(“ul”).find(“li”); 相当于$(“ul li”),后代选择器
    siblings(selector)  $(“#first”).siblings(“li”); 查找兄弟节点,不包括自己本身。
    parent() $(“#first”).parent(); 查找父亲
    eq(index) $(“li”).eq(2); 相当于$(“li:eq(2)”),index从0开始
    next() $(“li”).next() 找下一个兄弟
    prev() $(“li”).prev() 找上一次兄弟
    Index() $(“li”).index() 获取当前的位置(索引)
    五,jquery中的事件
    1,点击事件
    click dblclick
    2,鼠标事件
    mouseover mouseout mousemove mouseenter mouseleave
    3,键盘事件
    keyup keydown keypress 
    4,框内事件
    blur focus 
    5,滚动事件
    scroll 
    六,jquery中的方法1
    1,抽屉动画方法
    slideUp slideDown  slideToggle
    2,渐变色方法
    fadeIn fadeOut fadeToggle 
    3,动画方法
    animate({})
    4.end方法
    end() 返回事件执行前的事件元素
    7,笔试题
    1.jQuery 入口函数与 JavaScript 入口函数的区别
     jQuery 的入口函数是在 html 所有标签(DOM)都加载之后,就会去执行。
     JavaScript 的 window.onload 事件是等到所有内容,包括外部图片之类的文件加载完后,才会执行。
    2.jQuery 库中的 $() 是什么?
    $()是一个函数的调用,$是函数名,参数不一样,功能不一样
    3. jQuery 里的 ID 选择器和 class 选择器有何不同?
    id选择器是一个元素
    class选择器是一个伪数组
    4. 网页上有 5 个 <div> 元素,如何使用 jQuery来选择它们?
    可以直接用标签选择器来获取所有div,如$("div")
    如果需要单独拿出某个div,可以通过$("div").eq(index)来获取
    如果需要拿到奇数或者偶数个div,可以通过$("div:odd")/$("div:even")来获取
  • 相关阅读:
    C++中的句柄类
    普林斯顿大学算法课 Algorithm Part I Week 3 自我总结
    普林斯顿大学算法课 Algorithm Part I Week 3 排序的应用 System Sorts
    普林斯顿大学算法课 Algorithm Part I Week 3 重复元素排序
    普林斯顿大学算法课 Algorithm Part I Week 3 求第K大数 Selection
    普林斯顿大学算法课 Algorithm Part I Week 3 快速排序 Quicksort
    普林斯顿大学算法课 Algorithm Part I Week 3 排序稳定性 Stability
    普林斯顿大学算法课 Algorithm Part I Week 3 比较器 Comparators
    普林斯顿大学算法课 Algorithm Part I Week 3 排序算法复杂度 Sorting Complexity
    普林斯顿大学算法课 Algorithm Part I Week 3 归并排序 Mergesort
  • 原文地址:https://www.cnblogs.com/adylz111/p/13433953.html
Copyright © 2011-2022 走看看