6.20 jquery基础 选择器

===============基本选择器=================
    1.获取唯一id:$("#")
    $("#myid").css("color","blue");
    2.获取所有class:$(".")
    $(".class").css("color","yellow");
    3.获取所有元素:$("*")
    $("*").css("color","green");
    4.获取所有标签:$("标签")
    $("p").css("color","red");
    5.获取同时满足两个选择器的元素:$("选择器1选择器2")
   $("#id,.class").css("color","orange");
===============层叠选择器==================
    1.父元素中包含的所有元素:($"选择器1  选择器2")
     $("#second .second").css("color","red");
    2.父元素的子元素:($"选择器1>选择器2")
     $("#second>div").css("color","grey");
    3.相邻的下一个兄弟元素:$("选择器1+选择器2")
      $("h2+h3").css("color","orange");
    4.后面的所有兄弟元素
    $("#as1~div").css("color","orange");
================方法选择器==================
    1.符合条件的第一个元素
    $(".first:first").css("color","yellow");
    2.符合条件的最后一个元素
    $(".first:last").css("color","red");
    3.符合条件的索引为偶数的元素
    $(".first:even").css("color","red");
    4.符合条件的索引为奇数的元素
    $(".first:odd").css("color","green");   
    5.符合条件的索引值元素
       $(".first:eq(0)").css("color","greenyellow");
    6.符合条件的大于索引值的元素
       $(".first:gt(0)").css("color","blue");
    7.符合条件的小于索引值的元素    
     $(".first:lt(1)").css("color","green");
    8.获取满足第一个条件且不满(满足)足第二个条件(empty、checked...)的元素:$("选择器:条件")
    $("div:not(empty)").css("background","yellow");
    $("div:empty").css("background","green");
    9.所有标题元素
    $(":header").css("background","green");
    10.所有动画元素
    $(":animated").css("background","green");
    11.包含指定字符串的所有元素
    $("div:contains(‘child‘)").css("width","500px");
    12.所有带有匹配选择的元素
    $("h5,.child_child,#myid").css("background","green");
================属性选择器==================
    1.属性等于属性值的元素
    $("[href=‘#‘]");
    2.属性不等于属性值的元素
    $("[href!=‘#‘]");
    3.属性以属性值结尾的元素
    $("[href$=‘.jpg‘]");
    4.带有某属性的元素
    $("[href]");
================表单选择器==================
    1.所有input元素
    $(":input");
    2.通过input的类型选则元素
    $(":text");文字框
    $(":password");密码框
    $(":radio");单选框
    $(":checkbox");复选框
    $(":submit");提交按钮
    $(":buttom");普通按钮
    $(":reset");重置按钮
    $(":image");图片按钮
    $(":file");上传文件
    3.通过input的状态选则元素
    $(":endabled");所有激活的input元素
    $(":disable");所有禁用的input元素
    $(":selecte");所有被选取的input元素
    $(":checked");所有被选中的input元素

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../public/bootstrap.min.css"/>
    <script src="../public/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../public/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <p id="one">德国</p>
    <p class="first">巴西</p>
    <p class="first">葡萄牙</p>
    <p class="first">法国</p>
    <p class="first">西班牙</p>
    <div id="second">
        <div id="secondl">
            你好
        </div>
        <p class="second">葡萄牙</p>
        <p class="second">法国</p>
        <p class="second">西班牙</p>
    </div>
    <div id="third">
        <h1>巴西</h1>
        <h2>印度</h2>
        <h3>中国</h3>
    </div>
    <div id="forth">
        <div id="as1">巴西</div>
        <div id="as2">巴拿马</div>
        <div id="as3">巴比伦</div>
    </div>

</body>
</html>
<script type="text/javascript">
    //$("#one").css("color","blue");
    //$(".first").css("color","yellow");
    //$("*").css("color","green");
    //$("p").css("color","red");
    //$("#one,.first").css("color","orange");
    //$("#second p").css("color","red");
    //$("#second>div").css("c","grey");
    //$("h2+h3").css("color","orange");
    //$("#as1~div").css("color","orange");
     // $(".first:first").css("color","yellow");
    //  $(".first:last").css("color","red");
     // $(".first:even").css("color","red");
     // $(".first:odd").css("color","green");
     /*$(".first:eq(0)").css("color","greenyellow");
     $(".first:gt(0)").css("color","blue");
     $(".first:lt(1)").css("color","green");*/
     //$(".first:not(empty)").css("color","green");
     //$(".first:empty").css("color","yellow");
</script>

原文地址:https://www.cnblogs.com/sunhao1987/p/9204498.html

时间: 2024-11-02 06:07:19

6.20 jquery基础 选择器的相关文章

JQuery基础选择器

jQuery选择器类似css选择器,所以学习起来也更加容易1.基础选择器 1.All Selector("*") 描述:选择所有元素 语法:$("*") 注意:实践证明,由于使用*选择器获取的是全部元素,因此,有些浏览器将会比较缓慢,这个选择器也许谨慎使用 2.Class Selector(".class") 描述:选择给定样式类名的所有元素 语法:$(".class") 3.Element Selector("el

jQuery 基础选择器

#id选择器 jquery能使用CSS选择器来操作网页中的标签元素.如果你想要通过一个id号去查找一个元素,就可以使用如下格式的选择器: $("#my_id") 其中#my_id表示根据id选择器获取页面中指定的标签元素,且返回唯一一个元素. element选择器 jquery能根据元素名查找元素,格式如下 $("element") 其中element就是元素的名称,也就是通过其名称找到该元素. .class选择器 jquery能根据类别属性查找元素,格式如下 $(

2017-6-2 jQuery 基础 选择器

用代码练习: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="ser

jQuery基础(样式篇,DOM对象,选择器,属性样式)

1. $(document).ready 的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码,因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真正的的被加载完毕后才能正确的使用. $(document).ready(function() {   内容  }); 1.jQuery对象与DOM对象   jQuery对象与DOM对象是不一样的 普通处理,通过标准JavaScript处理: var p = document.getElementById

基础2.Jquery过滤选择器

                     1.基础选择器: 名称 说明 举例 #id 根据元素Id选择 $("divId") 选择ID为divId的元素 element 根据元素的名称选择, $("a") 选择所有<a>元素 .class 根据元素的css类选择 $(".bgRed") 选择所用CSS类为bgRed的元素 * 选择所有元素 $("*")选择页面所有元素 selector1, selector2, s

Jquery基础之选择器

选择器是JQuery的根基,在JQuery中对事件处理.选择遍历Dom.ajax操作都依赖选择器.JQuery选择器分为基本选择器.层次选择器.过滤选择器.表单选择器. 一.基本选择器 1.ID选择器$("#ID") 页面中每个ID是唯一的,ID选择器选择每个ID元素,如下方法如下:$("#ID");例:$("#tbxName")这个方法选择id=tbxName的页面元素.选择结果为单个元素. 2.类选择器$(".class"

jQuery基础,选择器

jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画设计和Ajax交互. jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口:具有高效灵活的cs

JQuery日期_5.20 JQuery对Sizzle选择器的扩展

代码很简单直接上源码 function winnow( elements, qualifier, not ) { //如果qualifier是函数 if ( jQuery.isFunction( qualifier ) ) { //not为true时,返回qualifier返回false的elements //not为false时,返回qualifier返回true的elements return jQuery.grep( elements, function( elem, i ) { /* j

jQuery 语法-选择器-事件(基础知识)

jQuery 语法 jQuery 语法是通过选取 HTML 元素的,并对元素执行某些操作 基础语法: $(selector).action() 美元符号定义 jQuery 选择符(selector)"查询"和"查找" HTML 元素 jQuery 的 action() 执行对元素的操作 实例: $(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有段落 $("p.test").hide() -