层次选择器

DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>title>

<style type="text/css">

style>

<script src="js/jq/jquery-2.1.3.min.js" type="text/javascript" charset="utf-8">script>

<script type="text/javascript">

$(document).ready(function(){

$(document).click(function(){

// #div2 p :div2下的所有p子元素,包括孙子

// $("#div2 p").hide();

// #div2>p :直接子元素,只有儿子那一级

// $("#div2>p").hide();

// #div2+p : 紧邻的兄弟节点,只有一个

// $("#div2+p").css("color","gold");

// #div2~p :所有的兄弟节点

//jq要想改变css样式,用css()方法

// $("#div2~p").css("color","deeppink");

$("p:last").css("color","mediumspringgreen");

$("p:first").css("color","yellow");

$("div:not(#div1)").css("background-color","#00BFFF");

$("#div1 p:even").css("font-size","30px"); // even选择的下标是从0开始的,0认为是偶数

$("#div2 p:odd").css("text-shadow","3px 3px pink"); // even选择的下标是从0开始的,odd选择奇数

})

})

script>

head>

<body>

<div id="div1">

<p>p1p>

<p>p2p>

<p>p3p>

div>

<div id="div2">

<p>2下的p1p>

<div id="div3">

<p>被嵌套的p2p>

div>

<p>2下p3p>

div>

<p>兄弟p1p>

<p>兄弟p2p>

body>

html>

你可能感兴趣的:(JQuery)