jQuery-Day01 常用API-1

获取元素

<div class="box"></div>
<div class="nav">
	<p class="ppp">ppp</p>
</div>
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>
<script type="text/javascript">
		$(function(){
            console.log($("div"));
            //或者
            console.log($(".box"));
            //获取多个元素
            $(".nav,li");
            //获取交集元素
            $(".nav.ppp")
            //获取子代选择器
            $("ul>li");
            //获取后代选择器
            $("ul li");
		})
</script>

筛选选择器

	<div class="one">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <script>
        $(function(){
        	//获取ul中第一个li
            $('ul li:first').css('background','pink');
            //获取ul中最后一个li
            $('ul li:last').css('background','pink');
            //获取ul中索引为2的li
            $('ul li:eq(2)').css('background','red');
            //获取ul中索引为偶数的li
            $('ul li:even').css('background','blue');
            //获取ul中索引为奇数的li
            $('ul li:add').css('background','blue');
         })
	</script>

筛选方法

	<div class="one">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <div class="two"></div>
	<script>
        $(function(){
        	//获取li的父级,只有一个
        	$("li").parent();
        	//获取ul名为li的儿子（最近一级）
        	$("ul").children("li");
        	//获取ul名为li的后代
        	$("ul").find("li")
        	//获取.one的兄弟节点
        	$(".one").sibilings();
        	//获取ul中索引为2的li元素
        	$("li").eq(2);
        	//获取当前元素之前的哥哥
        	$("li").eq(2).prevAll();
        	//获取当前元素之后的弟弟
        	$("li").eq(2).nextAll();
        	//判断当前元素是否含有某个特定类
        	$(".one").hasClass("red");

			//mouse[down,enter,leave,out,over,up]同js一样
        })
	</script>

排他思想

	<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
    <script>
        $(function(){
        	//隐性迭代
            $('li').click(function(){
            	//将当前点击元素背景换成红色
                $(this).css('background','pink');
                //将除自身以外的所有名为li的兄弟元素背景颜色清空（隐性迭代）
                $(this).siblings('li').css('background','');
            })
        })
    </script>

样式操作

<script>
	$(function(){
		//如果css中值写了属性名，则返回值
		$("div").css('background');
		//写了属性名和属性值，则为修改。属性名必须加上引号
		$("div").css('background',"red");
		$("div").css('width',100px);
		//参数也可以为对象形式
		$("div").css({
			width:400,
			height:300,
			background:"red"
		})
	})
</script>