• jquery


    1、
    基本选择器:
    $(“#test”)选取id为test的元素---单个元素
    $(“.test”)选取所有class为test的元素---集合元素
    $(“p”)选取所有的<p>元素---集合元素
    $(“*”)选取所有的元素---集合元素
    $(“div,span,p.myClass”)选取所有<div>,<span>和拥有class为myClass的<p>标签的一级组元素---集合元素

    层次选择器:
    $(“div span”)选取<div>里的所有的<span>(可以选到子和孙所有元素)元素---集合元素
    $(“div>span”)选取<div>元素下元素名是<span>的子元素---集合元素
    $(“.one+div”)选取class为one的下一个<div>同辈元素---集合元素
    $(“#two~div”)选取id为two的元素后面的所有<div>同辈元素---集合元素

    基本过滤选择器:
    $(“div:first”)选取所有<div>元素中第1个<div>元素---单个元素
    $(“div:last”)选取所有<div>元素中最后一个<div>元素---单个元素
    $(“input:not(.myClass)”)选取class不是myClass的<input>元素---集合元素
    $(“input:even”)选取索引(索引从0开始,0算为偶数)是偶数的<input>元素---集合元素
    $(“input:odd”)选取索引(索引从0开始)是奇数的<input>元素---集合元素
    $(“input:eq(1)”)选取索引(索引从0开始)等于1的<input>元素---单个元素
    $(“input:gt(1)”)选取索引(索引从0开始)大于1的<input>元素---集合元素
    $(“input:it(1)”)选取索引(索引从0开始)小于1的<input>元素---集合元素

    内容过滤选择器:
    $(‘div:contains(“测试”)’)选取包含文本“测试”的<div>元素---集合元素
    $(“div:empty”)选取不包含子元素和文本的<div>空元素---集合元素
    $(“div:has(p)”)选取含有<p>元素的<div>元素---集合元素
    $(“div:parent”)选取拥有子元素或文本元素的<div>元素---集合元素

    属性过滤选择器:
    $(“div[id]”)选取拥有属性id的div元素---集合元素
    $(“div[title=test]”)选取属性title为“test”的<div>元素---集合元素
    $(“div[title!=test]”)选取属性title不等于“test”的<div>元素---集合元素
    $(“div[title^=test]”)选取属性title以“test”开始的<div>元素---集合元素
    $(“div[title$=test]”)选取属性title以“test”结束的<div>元素---集合元素
    $(“div[title*=test]”)选取属性title含有“test”的<div>元素---单个元素
    $(“div[id][title$=‘test’]”)选取拥有属性id,并且属性title以”test”结束的<div>元素---集合元素

    子元素过滤选择器:
    $(“div:nth-child(1)”) 选取所有div中,是其父标签的第一个子标签的div元素---集合元素

    【比较 $(“div:eq(0)”)选取第一个div元素】
    $(“ul li:first-child”)选取每个<ul>中第一个<li>元素---集合元素
    【比较
    $(“div:first”)选择所有div标签中的第一个元素】
    $(“ul li:last-child”)选取每个<ul>中最后一个<li>元素---集合元素
    【比较$(“div:last”)选择所有div标签中的最后一个元素】
    $(“ul li:only-child”)在<ul>中选取是惟一子元素的<li>元素---集合元素

    2.ready与onload的简单区别

     在html,css,js,图片,音视频等
    各种资源加载完之后才执行JS代码
    window.onload=function () {
    alert('先显示图片再执行alert11');
    }
    $(document).ready(function (){
    //     alert('先执行alert再显示图片222');
    // });
  • 相关阅读:
    2020软件工程作业04(2.0)
    2020软件工程作业03
    软件工程作业02
    2020软件工程作业02
    2020软件工程作业01
    2020软件工程个人作业06——软件工程实践总结作业
    2020软件工程作业05
    2020软件工程作业00——问题清单
    2020软件工程作业04
    2020软件工程作业02
  • 原文地址:https://www.cnblogs.com/SunShineM/p/6086800.html
Copyright © 2020-2023  润新知