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

    jQuery的基本选择器

    	选择器的分类
    
    	<!--1.基本选择器
    		2.层级选择器
    		3.过滤选择器
    			3.1 基本过滤选择器
    			3.2 内容过滤选择器
    			3.3 可见性过滤选择器
    			3.4 子元素过滤选择器
    			3.5 表单对象属性过滤选择器
    		4.表单选择器
    

    1. 基本选择器

    			#id
    			element   根据给定的元素名匹配所有元素
    
    
    			.class  
    			*          改变所有元素的背景色 
    			selector,    将每一个选择器匹配到的元素合并后一起返回。
    
    
    	-->
    
    	
    </title>
    
    	<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
    

    #id HTML的代码如下:

    	<div id="notMe"><p>id="notMe"</p></div>
        <div id="myDiv">id="myDiv"</div>
    

    #id 用于搜索的,通过元素的 id 属性中给定的值

    jQuery 代码如下;

    <script type="text/javascript">
       $("#myDiv").css("color","red");
    </script>
    

    结果: id=“myDiv”字体变为红色

       [ <div id="myDiv">id="myDiv"</div> ]
    

    element HTML的代码如下:

    	<div>DIV1</div>
    	<div>DIV2</div>
    	<span>SPAN</span>
    

    element 一个用于搜索的元素。指向 DOM 节点的标签名。

    jQuery 代码如下;

    <script type="text/javascript">
      $("div").css({"font-size":"3em"});
    </script>
    

    结果:显示所有div,且字体为3em;

      [ <div>DIV1</div>, <div>DIV2</div> ]
    

    .class HTML的代码如下:

    	<div class="notMe">div class="notMe"</div>
    	<div class="myClass">div class="myClass"</div>
    	<span class="myClass">span class="myClass"</span>
    

    .class 根据给定的类匹配元素。

    jQuery 代码如下;

         $(".myClass").css("background","blue");
    

    结果:显示所有,myClass背景为蓝色;

    	[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]
    

    * HTML 代码如下:

    	<div>DIV</div>
    	<span>SPAN</span>
    	<p>P</p>
    

    * 匹配所有元素

    jQuery 代码如下;

        $("*").css("background","yellow");
    

    结果: body 背景为黄色

    jQuery 代码

        [ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]
    

    selector HTML 的代码如下:

    	<div>div</div>
    	<p class="myClass">p class="myClass"</p>
    	<span>span</span>
    	<p class="notMyClass">p class="notMyClass"</p>
    

    selector 将每一个选择器匹配到的元素合并后一起返回。

    jQuery 代码如下;

    	$("div,span,p.myClass")
    

    结果:注意元素合并用 , 表示;

        [ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]
    

  • 相关阅读:
    【Anagrams】 cpp
    【Count and Say】cpp
    【Roman To Integer】cpp
    【Integer To Roman】cpp
    【Valid Number】cpp
    重构之 实体与引用 逻辑实体 逻辑存在的形式 可引用逻辑实体 不可引用逻辑实体 散弹式修改
    Maven项目聚合 jar包锁定 依赖传递 私服
    Oracle学习2 视图 索引 sql编程 游标 存储过程 存储函数 触发器
    mysql案例~tcpdump的使用
    tidb架构~本地化安装
  • 原文地址:https://www.cnblogs.com/GJcaowei/p/6844917.html
Copyright © 2011-2022 走看看