4--Jquery中的选择器(基本选择器)

选择器是Jquery框架的根基,在Jquery中对事件的处理。遍历DOM和ajax操作都依赖选择器。
Jquery选择器的有点:就是写法简洁。
$(“#username”)等价于:
domcument.getElementById(“username”);
$(“tagName”)等价于:
domcument.getElementsByTagName(“tagName”)
实例演示需要的HTML


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Jquery的选择器title>
    <script src="jquery-1.11.3.js">script>
    
   
    
    <script src="selector_filter.js">script>
    <style>
        div,span,p {
      
            width:140px;
            height:140px;
            margin:5px;
            background:#aaa;
            border:#000 1px solid;
            float:left;
            font-size:17px;
            font-family:Verdana;
        }
        div.mini {
      
            width:55px;
            height:55px;
            background-color: #aaa;
            font-size:12px;
        }
        div.hide {
      
            display:none;
        }
    style>
head>

<body>
    <div class="one" id="one" >
        id为one,class为one的div
        <div class="mini">class为minidiv>
    div>
    <div class="one"  id="two" title="test" >
        id为two,class为one,title为test的div.
        <div class="mini"  title="other">class为mini,title为otherdiv>
        <div class="mini"  title="test">class为mini,title为testdiv>
    div>
    <div class="one">
        <div class="mini">class为minidiv>
        <div class="mini">class为minidiv>
        <div class="mini">class为minidiv>
        <div class="mini">div>
    div>
    <div class="one">
        <div class="mini">class为minidiv>
        <div class="mini">class为minidiv>
        <div class="mini">class为minidiv>
        <div class="mini"  title="tesst">class为mini,title为tesstdiv>
    div>
    <div style="display:none;"  class="none">
        style的display为"none"的div
    div>

    <div class="hide">class为"hide"的divdiv>

    <div>
        包含input的type为"hidden"的div<input type="hidden" size="8"/>
    div>

    <span id="mover">正在执行动画的span元素.span>
body>
html>

基本选择器是Jquery中最常用选择器,也是最简单选器。它通过元素id、class和标签名来查找DOM元素。(类似CSS)

  1. #id(id选择器):用法$("#myDIV”);返回值是单个元素组成的集合。就是直接选择HTML中的id=”myDIV”的元素
    实例:改变id为one的元素的背景颜色为#FF0000
/*Id选择器:
*  语法:$("#id的值")
* */
$(function(){
     
    $("#one").css("background-color","#FF0000");
});
  1. Element(元素选择器):用法$(“元素名”):返回值,集合元素
    实例:改变元素名为
    的所有元素的背景为蓝色(blue)
/*元素选择器:
* 语法:$("元素名")
* */
$(function(){
     
    $("div").css("backgroundColor","blue");
});
  1. class(类选择器):用法$(“.myClass”),返回值 ,集合元素
    实例:改变class为mini的所有元素的背景为黄色(yellow)
/*类选择器:
* 语法:$(".类属性的值")
* */
$(function(){
     
    $(".mini").css("backgroundColor","yellow").css("color","red");
});
  1. 通配符选择器 * :用法$(“*”):返回值,集合元素,匹配所有元素。
    实例:改变所有元素的背景为#00FF33
/*通配符选择器:
* 语法:$("*")
* */
$(function(){
     
    $("*").css("backgroundColor","#00FF33");
});
  1. selector1,selector2,selector3…(组合选择器) 用法:$(“div,span,p.myCLass”)返回集合元素。
    实例:改变所有的元素和id为TWO的元素的背景为yellow
/*组合选择器:
* 语法:$("selector1,selector2,selectorN")
* */
$(function(){
     
    $("span,#two").css("backgroundColor","yellow");
})

实例效果这里全部省略。可以自行验证。
整个selector_base.js的代码如下:

/**
 * Jquery中的基本选择器
 */
/*Id选择器:
*  语法:$("#id的值")
* */
/*
$(function(){
    $("#one").css("background-color","#FF0000");
});
*/
/*元素选择器:
* 语法:$("元素名")
* */
/*
$(function(){
    $("div").css("backgroundColor","blue");
});
*/
/*类选择器:
* 语法:$(".类属性的值")
* */
/*$(function(){
    $(".mini").css("backgroundColor","yellow").css("color","red");
});*/
/*通配符选择器:
* 语法:$("*")
* */
/*$(function(){
    $("*").css("backgroundColor","#00FF33");
});*/
/*组合选择器:
* 语法:$("selector1,selector2,selectorN")
* */
$(function(){
     
    $("span,#two").css("backgroundColor","yellow");
})

你可能感兴趣的:(Jquery,css,js,jquery,html,javascript)