jQuery的入门以及选择器

一、了解jQuery以及其基本语法：

1.jQuery是什么？

js的类库（有很多js封装的方法，直接调用即可）

2.如何用jQuery去获取文本框的值？

例如：

$("#aa").val();

3.javascript的window.onload在jQuery里面如何表示？

二种方式

第一种：

$(document).ready(function(){});

第二种：

$(function(){})

4.jQuery里如何动态设置样式css的？单个属性和多个属性有什么区别？

单个属性：

$("div").css("键","值");

键例如：background/color

值例如：yellow(黄色)/red(红色)

多个属性：

$("div").css({"键":"值","键":"值"})；

例如同上；

5.jQuery的点击事件？失焦事件？该如何表示？

点击事件：

$("#btn").click(function(){})

失焦事件：

$("#btn").blur(function(){})

二、选择器

$("#aa")//id选择器
$(".bb")//类选择器
$("span")//标签选择器（元素选择器）

1:层级关系

例如1.1：匹配表单中所有的子级input元素

$("form > input")

1.2:匹配所有跟在label后面的元素

$("label + input")

1.3：找到所有与表单同辈的input元素

$("form ~ input")

2.过滤选择器

无序列表

<ul>
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>

</ul>

 $("ul>li:first").css("background","yellow");//第一个
 $("ul>li:last").css("background","yellow");//最后一个
 $("ul>li:eq(2)").css("background","yellow");//值如果为负数就是倒数第几个
 $("ul>li:even").css("background","yellow");//偶数下标奇数行
 $("ul>li:odd").css("background","yellow");//奇数下标 偶数行
        //找到除第一个和最后一个其他的li 
	 $("ul>li:lt(4):gt(0)").css("background","yellow");//注意先小再大

案例一：用jQuery实现表格隔行换色

表格：

<table border="1" width="50%" cellspacing="" cellpadding="">
            <tr>
                <td></td>
                <td></td>
            </tr><tr>
                <td></td>
                <td></td>
            </tr><tr>
                <td></td>
                <td></td>
            </tr><tr>
                <td></td>
                <td></td>
            </tr><tr>
                <td></td>
                <td></td>
            </tr>
        </table>

$("table tr:even").css("background","yellow");

3.表单选择器

例如：

<form action="" id="myForm">
            性别：<input type="radio" name="sex" value="男"/>男
                 <input type="radio" name="sex" value="女" />女<br>
            爱好：<input type="checkbox" value="打篮球">打篮球
                 <input type="checkbox" value="睡觉觉">睡觉觉
                 <input type="checkbox" value="干饭">干饭<br>
            地址：
            <select>
                <option value ="湖南省">湖南省</option>
                <option value ="广东省">广东省</option>
                <option value ="浙江省">浙江省</option>
            </select><br>
            <button type="button" id="ok">确定</button>
        </form>

如何拿到用户所选的值

$("#ok").click(function(){
					//拿性别
					var sex=$("#myForm input:radio:checked").val();
					console.info(sex);
					//拿爱好
					$("#myForm input:checkbox:checked").each(function(){
						console.info($(this).val());
					})
					//拿地址
					var address=$("#myForm select option:selected").val();
					alert(address);
				})
			})