zoukankan      html  css  js  c++  java
  • jQuery选择器

    引入方式

    <script src="jquery-3.4.1.js"></script>
    
    <script>
    
        jQuery代码
    <script>

    基本选择器

    $('.d_1'); 类选择器
    $('#d2'); id选择器
    $('div'); 标签选择器

    层级选择器

    $('div p'); 选中div标签内的p标签
    $('div .c1'); 选中div标签内的含有c1类的标签

    基本筛选器

    $('div:first'); 选中第一个div标签
    $('div:last'); 选中最后一个div标签
    $('div:eq(2)'); 选择索引为2的div标签
    $('div:has(span)'); 选择后代中包含span标签的div标签
    $('div:not(#d1)'); 选择id不为d1的div标签
    $('div:even'); 选中索引为偶数的div标签 $('div:odd'); 选中索引为奇数的div标签
    $('div:gt(2)'); 选中索引大于2的div标签
    $('div:lt(2)'); 选中索引小于2的div标签

    属性选择器

    $('[title]');
    $('[type=text]');
    $('[type!=text]');
    $('input[type=text]');

    表单筛选器

    $(':password');
    $(':text')

    表单属性

    $(':disabled'); 不可用的
    $(':checked'); 已选中的选择(单选/复选)框 $(':selected');已选中的下拉框 $(':enabled'); 可用的

    筛选器方法

    下方标签:同级
    $('#d2').next(); 选中id为d2的标签下方的一个同级标签 $('#d2').nextAll(); 选中id为d2标签下方所有的同级标签 返回一个列表,正序 $('#d2').nextUntil('#d4'); 选中id为d2标签下方到id为d4标签中的所有标签且不包含d4 返回一个列表,正序

    上方标签:同级
    $('#d2').prev(); 选中的id为d2的标签上方的一个同级标签
    $('#d2').prevAll(); 选中id为d2的标签上方的所有同级标签 返回一个列表,逆序
    $('#d2').prevUntil('#d'); 选中id为d2的标签上方的,与id为d标签之间的所有标签且不含d 返回一个列表,逆序

    向上查找:父级元素
    $('#d1').parent() 选中一个id为d1的标签上一级的父级标签
    $('#d1').parents() 选中所有id为d1的标签上一级的父级标签
    $('#d1').parentsUntil('body') 选中id为d1的标签之上到body标签之中包含的所有标签

    向下查找:子级标签
    $('#d2').children(); 选中id为d2的标签下所有的标签
    $('#d2').children('p'); 选中id为d2的标签下的p的标签

    同级查找:同级标签
    $('#d2').siblings(); 选择id为d2的标签同级的所有标签
    $('#d2').siblings('#d1'); 选择id为d2的标签同级的id为d1的标签


    find
    $('.c1').find('p') 找到c1后代的p标签 类似于后代选择器 .c1 p

    filter
    $('.c1').filter('.c2') 从满足有c1类的标签中筛选出有c2类的标签 类似于组合选择器 .c1.c2

    添加文本

    d1.text('xxx'); 为id为d1的标签添加文本
    d1[0].innerText='XXX'; 原生js添加文本

    设置点击事件

    $('.c1').click(function(){
        $(this).css('background','red')    
    })
  • 相关阅读:
    机器学习&数据挖掘笔记_16(常见面试之机器学习算法思想简单梳理)
    C++笔记(3):一些C++的基础知识点
    机器学习&数据挖掘笔记_15(关于凸优化的一些简单概念)
    机器学习&数据挖掘笔记_14(GMM-HMM语音识别简单理解)
    机器学习&数据挖掘笔记_13(用htk完成简单的孤立词识别)
    Deep learning:四十三(用Hessian Free方法训练Deep Network)
    机器学习&数据挖掘笔记_12(对Conjugate Gradient 优化的简单理解)
    Deep learning:四十二(Denoise Autoencoder简单理解)
    Deep learning:四十一(Dropout简单理解)
    算法设计和数据结构学习_6(单链表的递归逆序)
  • 原文地址:https://www.cnblogs.com/lttlpp61007188/p/10834147.html
Copyright © 2011-2022 走看看