zoukankan      html  css  js  c++  java
  • jQuery基础一

    一、使用jQuery的原因:

    简单、开发效率高、不用浏览器的差异化

    jQuery是前端的一个类库(插件)

     

    二、使用方式

    1.下载:建议生产环境使用压缩版的jQuery

    2.导入:

    ① script导入本地的文件

    ② 使用CDN

    3.按照jQuery的语法使用即可,注意要先导入再使用

     

    三、jQuery的内容

    $ 是 jQuery的别名,属于同一个对象

    只有jQuery对象才能调用jQuery方法,DOM对象只能调用DOM方法

    1.查找标签

    2.操作标签

     

    四、查找标签

    查找后的结果是一个数组,需要通过索引取值

     

    1.基本选择器(CSS的选择器一样)

    //id选择器
    $('#i1')
    
    //标签选择器
    $('h2')
    
    //class选择器
    $('.c1')
    
    // 通用选择器
    $('*')
    
    // 组合选择器
    $('.c1,h2')

     

    2.层级选择器(CSS的选择器一样)

    // 后代选择器
    $('form input');
    
    //儿子选择器
    $('label>input');
    
    //毗邻选择器
    $('label+input');
    
    //弟弟选择器
    $('p2~li');

    3.基本筛选器

    :first // 第一个
    :last // 最后一个
    :eq(index)// 索引等于index的那个元素
    :even // 匹配所有索引值为偶数的元素,从 0 开始计数
    :odd // 匹配所有索引值为奇数的元素,从 0 开始计数
    :gt(index)// 匹配所有大于给定索引值的元素
    :lt(index)// 匹配所有小于给定索引值的元素
    :not(元素选择器)// 移除所有满足not条件的标签(过滤同样的标签)
    :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

    4.属性选择器

    [attribute]
    [attribute=value]// 属性等于
    [attribute!=value]// 属性不等于

    5.表单筛选器

    :text
    :password
    :file
    :radio
    :checkbox
    
    :submit
    :reset
    :button

    表单对象属性

    :enabled
    :disabled
    :checked
    :selected

    五、筛选器方法

    //下一个元素
    $("#id").next()                      //往下找一个
    $("#id").nextAll()                  //往下找全部
    $("#id").nextUntil("#i2")        //到id为i2的停止,不包括i2
    //上一个元素
    $("#id").prev()                       //往上找一个
    $("#id").prevAll()                   //往上找全部
    $("#id").prevUntil("#i2")        //往上找到id为i2停止,不包含i2
    //父亲元素
    $("#id").parent()
    $("#id").parents()  // 查找当前元素的所有的父辈元素
    $("#id").parentsUntil() // 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。
    //儿子和兄弟元素
    $("#id").children();// 儿子们
    $("#id").siblings();// 兄弟们
    //查找(从后代去找)
    $("div").find("p")
    
    相当于$("div p")
    //筛选(筛选当前标签)
    $("div").filter(".c1")
    
    相当于 $("div.c1")

    其他:

    .first() // 获取匹配的第一个元素
    .last() // 获取匹配的最后一个元素
    .not() // 从匹配元素的集合中删除与指定表达式匹配的元素
    .has() // 保留包含特定后代的元素,去掉那些不含有指定后代的元素。
    .eq() // 索引值等于指定值的元素
  • 相关阅读:
    从 0 → 1,学习Linux该这么开始!
    Web和移动开发的未来
    css-div中文字过多(内容超出div宽度)后自动换行
    js+css--单选按钮,自定义选中的颜色???(性别按钮,男女)
    css-按钮中有图片和文字,怎么才能让文字和图片都中??
    js-点出弹框后(除了点击窗口上的叉子),点其他地方能够关闭窗口???
    css-外面元素的高度,由里面的元素进行撑开(由内部的高度决定)
    js-将传来的数据排序,让(全部)这个小按钮小圈圈,始终排列在最前面
    echart--如何在折线图上添加矩形背景(可以借用bar柱状图的实现效果)
    echart-如何将x轴和y轴的原点进行重合???
  • 原文地址:https://www.cnblogs.com/st-st/p/9805802.html
Copyright © 2011-2022 走看看