• jQuery学习笔记(一)


    jQuery工厂函数

    jQuery的工厂函数算做是jQuery的一个入口,通过它既可以使用选择器,也可以包装DOM对象,还可以创建元素等功能。

    工厂函数的写法有两种:

    • 第一种是$( )
    • 第二种是jQuery( )

    这里的”$”符号就表示jQuery,是jQuery的一个约定。
    不仅如此,jQuery也建议通过jQuery获取的元素变量前都增加”$”符号。目前有很多JS库都效仿了jQuery的这种做法,当然也引起了多个使用””的JS库一起使用时的一些冲突,主要还是集中在”$”的使用权上。

    jQuery对象与DOM对象

    • DOM对象
      • 定义:是指通过DOM获取的元素。
    • jQuery对象
      • 定义:是通过包装DOM对象后产生的一种对象(jQuery自定义的全局对象)。
      • 可以说jQuery底层其实还是DOM对象。
      • 注意:jQuery是类数组对象,所以jQuery对象中可能包含多个DOM对象或一个DOM对象,这要看具体情况。
    • DOM对象转换为jQuery对象
      • DOM对象要想转换为jQuery对象,需要使用jQuery的工厂函数 $( ) 将其包裹,返回的就是对应的jQuery对象。
        // DOM对象
        var username = document.getElementById("username");
        // DOM对象转换为jQuery对象
        var $username = $(username);
        // 测试
        console.log($username.val());
        
    • jQuery对象转换为DOM对象
      • jQuery对象是数组对象。jQuery对象[索引值]可以直接转换为对应的DOM对象
        // jQuery对象
        var $user = $("#username");
        // 1. jQuery对象是数组对象
        var user1 = $user[0];
        // 测试
        console.log(user1.value);
        
      • jQuery提供了get(index)方法。jQuery对象.get(索引值)也可以转换为对应的DOM对象
        // jQuery对象
        var $user = $("#username");
        // 2. jQuery提供get(index)方法进行转换
        var user2 = $user.get(0);
        // 测试
        console.log(user2.value);

    jQuery选择器

    a) 基本选择器

    1. Id选择器
    2. 类选择器
    3. 元素选择器
    4. 通配符选择器 -- *
    5. 组合选择器 -- 选择器之间用逗号隔开,匹配并集结果

    b) 层级选择器

    1. parent child
    2. parent>child
    3. targetelem+next
    4. trgetelem~nextall

    c) 过滤选择器

    1. 基本过滤选择器

    * :first - 匹配第一个 -- first()函数

    * :last - 匹配最后一个 --  last()函数

    *:not() - 匹配指定规则之外

    *:even - 匹配偶数

    * :odd - 匹配奇数

    * :eq() - 索引值等于 -- 索引值从 0 开始

    * :gt() - 索引值大于

    * :lt() - 索引值小于

    * :header -- 匹配h1h2h3h4h5h6标题

    * :animated - 匹配动画 -- 只能匹配jQuery实现的动画效果

    1. 子元素过滤选择器

    * :nth-child() -- 1 开始

    * :first-child

    * :last-child

    * :only-child - 只有一个子元素

    1. 可见性过滤选择器

    * :hidden -- 匹配隐藏元素

    * :visible -- 匹配可见元素

    1. 属性过滤选择器

    * [attrName]

    * [attrName=value]

    * [attrName!=value]

    * [attrName^=value]

    * [attrName$=value]

    * [attrName*=value]

    *[selector1][selector2][selectorN]

    1. 内容过滤选择器

    * :contains(text) - 含有指定文本的元素

    * :empty - 不包含子元素或文本元素的元素

    * :parent - 包含子元素或文本元素的元素

    * :has(selector) - 包含匹配selector的父元素

    1. 表单对象属性过滤选择器

    * :enabled

    * :disabled

    * :checked

    * :selected

    d) 表单选择器

  • 相关阅读:
    编译安装php5 解决编译安装的php加载不了gd
    apache-php
    使用ab对网站进行压力测试
    正则表达式实例 -- 匹配Windows消息宏
    SDK 操作 list-view control 实例 -- 遍历进程
    malloc/free、new/delete 区别
    Python实例 -- 爬虫
    multimap实例 -- 添加、遍历数据
    CListCtrl 扩展风格设置方法---SetExtendedStyle和ModifyStyleEx
    创建指定大小的空文件
  • 原文地址:https://www.cnblogs.com/xlb-happymoment/p/6745445.html
Copyright © 2020-2023  润新知