引入jQuery库

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <title>环境搭建</title>
</head>

标题

<p id=”imooc”></p>

我们要获取页面上这个id为imooc的p元素，然后给这个文本节点增加一段文字：“您好！通过慕课网学习jQuery才是最佳的途径”，并且让文字颜色变成红色。
jQuery的处理：

var $p = $('#imooc');
$p.html('您好！通过慕课网学习jQuery才是最佳的途径').css('color','red');

如何把jQuery对象转成DOM对象？

通过jQuery自带的get()方法

jQuery对象自身提供一个.get() 方法允许我们直接访问jQuery对象中相关的DOM节点，get方法中提供一个元素的索引：

var $div = $('div') //jQuery对象
var div = $div.get(0) //通过get方法，转化成DOM对象
div.style.color = 'red' //操作dom对象的属性

DOM对象转化成jQuery对象

HTML代码

<div>元素一</div>
<div>元素二</div>
<div>元素三</div>

JavaScript代码

var div = document.getElementsByTagName('div'); //dom对象
var $div = $(div); //jQuery对象
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置颜色

id选择器

${"#imooc"} //imooc 是ID的属性

类选择器

$( ".class" )

元素选择器

$("p")选取所有的<p>元素，可通过css方法直接赋予样式。

选择器之层级选择器

  • $( “parent > child” )
    子选择器：选择所有指定“parent”元素中指定的”child”的直接子元素。
  • $(“ancestor descendant”)
    后代选择器：选择给定的祖先元素的所有后代元素, 一个元素的后代可能是该元素的一个孩子，孙子，曾孙等
  • $(“prev + next”)
    相邻兄弟选择器：选择所有紧接在“prev”元素后的“next”元素
  • $(“prev ~ siblings”)
    一般兄弟选择器：匹配“prev”元素之后的所有 兄弟元素。具有相同的父元素，并匹配过滤“siblings”选择器
//子选择器
        //$('div > p') 选择所有div元素里面的子元素P,要求直接子元素是div.
        $('div > p').css("border", "1px groove red");
//后代选择器
        //$('div  p') 选择所有div元素里面的p元素
        $('div p').css("border", "1px groove red");
//相邻兄弟选择器
        //选取prev后面的第一个的div兄弟节点
        $('div + div').css("border", "3px groove blue");
//一般相邻选择器
        //选取prev后面的所有的div兄弟节点
        $('prev ~ div').css("border", "3px groove blue");

筛选选择器

//找到第一个div
    $(".div:first").css("color", "#CD00CD");
    //找到最后一个div
    $(".div:last").css("color", "#CD00CD");
        //:even 选择所引值为偶数的元素，从 0 开始计数
    $(".div:even").css("border", "3px groove red");
       //:odd 选择所引值为奇数的元素，从 0 开始计数
    $(".div:odd").css("border", "3px groove blue");
    //:eq
    //选择单个,aaron是个class属性
    $(".aaron:eq(2)").css("border", "3px groove blue");
        //:gt 选择匹配集合中所有索引值大于给定index参数的元素
    $(".aaron:gt(3)").css("border", "3px groove blue");
    //:lt 选择匹配集合中所有索引值小于给定index参数的元素
    //与:gt相反
    $(".aaron:lt(2)").css("color", "#CD00CD");

内容筛选器

//查找所有class='div'中DOM元素中包含"contains"的元素节点
        //并且设置颜色
        $(".div:contains(':contains')").css("color", "#CD00CD");
     //查找所有class='div'中DOM元素中包含"span"的元素节点
        //并且设置颜色，has针对元素，contains针对文本；
        $(".div:has(span)").css("color", "blue");
    //选择所有包含子元素或者文本的a元素
       //增加一个蓝色的边框
       $("a:parent").css("border", "3px groove blue");
     //找到a元素下面的所有空节点(没有子元素)
       //增加一段文本与边框
       $("a:empty").text(":empty").css("border", "3px groove red");
  • 附
<div class="left">
        <div class="aaron">
            <a>:parent</a>
        </div>
        <div class="aaron">
            <a>:parent</a>
        </div>
        <div class="aaron">
            <a>:parent</a>
        </div>
        <div class="aaron">
            <a></a>
        </div>
    </div>

可见性筛选选择器

$('#div1:visible')//显示id属性为div1的元素
$('#div2:hidden')//隐藏id属性为div2的元素

属性筛选选择器

//查找所有div中，属性name=p1的div元素
    $('div[name=p1]')
//查找所有div中，有属性p2的div元素
    $('div[p2]')
//查找所有div中，有属性name中的值只包含一个连字符“-”的div元素
     $('div[name|="-"]')
//查找所有div中，有属性name中的值包含一个连字符“空”和“a”的div元素
    $('div[name~="a"]')
//查找所有div中，属性name的值是用imooc开头的
    $('div[name^=imooc]')
//查找所有div中，属性name的值是用imooc结尾的
        $('div[name$=imooc]')     
//查找所有div中，有属性name中的值包含一个test字符串的div元素
       $('div[name*="test"]')  
//查找所有div中，有属性testattr中的值没有包含"true"的div
       $('div[testattr!="true"]')

子元素筛选器

//查找所有div中，有属性name中的值包含一个test字符串的div元素
$('.first-div a:first-child')
//查找class="first-div"下的最后一个a元素
//针对所有父级下的最后一个
//如果只有一个元素的话，last也是第一个元素       
$('.first-div a:last-child')
//查找class="first-div"下的只有一个子元素的a元素
$('.first-div a:only-child')
//查找class="last-div"下的第二个a元素
$('.last-div a:nth-child(2)')
//查找class="last-div"下的倒数第二个a元素
$('.last-div a:nth-last-child(2)')