jQuery简单介绍及基本用法(选择器&DOM操作)

简介

　　jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

　　jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

简单来说jQuery就是一个JavaScript框架，简化js代码的编写，做到write less do more。

jQuery核心函数

页面加载函数 Jquery(callback)

作用: 页面加载完成后执行

意义: 弥补传统js window.onload的缺点: 如果一个页面出现两个, 后面的会把前面的onload函数覆盖掉

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
    // js 的页面加载函数
    // 缺点: 如果一个页面出现两个onload函数, 后面会把前面的覆盖掉, 因为js不存在 函数重载
//     window.onload = function(){
//         alert("js 的页面加载函数 11111111111 ...");
//     }
 
//     window.onload = function(){
//         alert("js 的页面加载函数 2222222 ...");
//     }
 
    // 页面加载完成后执行 下面两个都会执行
    jQuery(function(){
        alert("jQuery 的页面加载函数 11111111111 ...");
    });
 
    jQuery(function(){
        alert("jQuery 的页面加载函数 22222222222 ...");
    });
</script>

简写

$(function() {
    //页面加载完成后执行
})

将js对象转成jQuery对象

query对象是jquery所独有的，只有jquery对象才可以使用jquery的属性和方法。

　　dom对象无法调用jquery对象的属性和方法；

　　jquery对象也无法调用dom对象的属性和方法。

jquery对象和dom对象的相互转化：

　　注意：需要把jquery对象理解成是一个数组，并且第一个元素就是dom对象。

　　jquery对象 ----》 dom对象： jquery对象[0] 或者 jquery对象.get(0);

　　dom对象 ----》 jquery对象： $(dom对象)

开发规范约定：

　　var 变量名 = dom对象；

　　var $变量名 = jquery对象；

//将jQuery看做是一个数组, 第一个元素就是js对象
jQuery("#myDiv")[0].onclick = function() {
 
};
//只有jQuery对象才能调用jQuery的属性和方法
jQuery(document.getElementById("myDiv")).click(function() {
 
});

将html文本转换成jQuery标签对象

var $span = jQuery("<span>山东张学友</span>");
$span.click(function() {
 
})

jQuery选择器

注意：jQuery中的选择器筛选出来的结果都是符合筛选条件的一个数组（即使只有一个也会放在数组中），

使用id筛选只会筛选出第一个，并且取值赋值都是操作这一个，使用name或者其他筛选会有多个，但是都是放在数组中的；

所以在确定只有一个对象并且需要得到该对象的一些属性的时候，需要找到该数组的第一个，再使用其属性，比如：

//获取下拉框option的个数
$("#sel01")[0].length;
 
<select id="sel01">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

基本选择器

#id         根据id属性值获取标签对象(唯一)
element     根据标签名获取标签对象(多个)
.class        根据class属性值值获取标签对象(多个)
*             获取所有的标签对象
selector1,selector2,selectorN    既要 第一个, 也要 第二个 还要 第N个

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
        <script>
            $(function() {
                //根据id属性值获取标签对象(唯一)
                var _fooHtml = $("#foo").html();
 
                //根据标签名获取标签对象(多个)
                $("div").each(function() {
                    $(this).html("山东张学友" + $(this).html()); // 设置
                });
 
                //根据class属性值值获取标签对象(多个)
                $(".zy").each(function() {
                    $(this).html("zy" + $(this).html()); // 设置
                });
            });
        </script>
    </head>
 
    <body>
        <div>DIVAAAA</div>
        <div class="zy">DIVBBBB</div>
        <div>DIVCCCC</div>
        <div>DIVDDDD</div>
        <div class="zy">DIVEEEE</div>
        <div id="foo">DIVFFFF</div>
        <p>PAAAA</p>
        <p class="zy">PBBBB</p>
        <p>PCCCC</p>
    </body>
 
</html>

层级选择器

ancestor descendant         : 选择当前标签的后代标签(空格)
parent > child              : 选择当前标签的子标签(大于号 >)
prev + next                 : 选择当前标签的下一个弟弟标签(加号 +)
prev ~ siblings             : 选择当前标签的兄弟标签(符号 ~)

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
        <script>
            $(function() {
                // 1．将class属性值为alex的元素下所有a元素字体变为红色
                $(".alex a").css("color", "red");
                // 2．将class属性值为alex的元素下直接a元素字体变为蓝色
                $(".alex>a").css("color", "blue");
                // 3．将div元素后所有兄弟a元素，字体变为黄色，大小变为30px
                $("div~a").css({
                    "color": "yellow",
                    "font-size": "30px"
                });
            });
        </script>
    </head>
 
    <body>
        <div class="alex">
            <a>div link</a>
            <p>
                info
                <a>p link</a>
            </p>
        </div>
        <a>link</a>
        <p class="alex">
            <a>p link</a>
        </p>
        <a>link</a>
    </body>
 
</html>

属性过滤选择器

[attribute]             　　　　　　　 选择有某个属性的标签, 如: input[name] 选择有name属性的标签
[attribute=value]                    选择属性等于某个值的标签 如: input[name='username']
[attribute!=value]     　　　　　　　　选择属性不等于某个值的标签 如: input[name!='username']
[attribute^=value]    　　　　　　　　 选择属性以某个值开始的标签 如: input[name^='use']
[attribute$=value]     　　　　　　　　选择属性以某个值结束的标签 如: input[name$='name']
[attribute*=value]     　　　　　　　　选择属性含有某个值的标签 如: input[name*='user']
[attrSel1][attrSel2][attrSelN]      选择既有属性id,也有属性class, 如 input[id][class]

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
        <script>
            $(function() {
                // 1.设置所有含有id属性的div，字体颜色红色
                $("div[id]").css("color", "red");
                // 2.设置所有class属性值 含有alex元素背景色为黄色
                $("[class*='alex']").css("background", "yellow");
                // 3.对所有既有id又有class属性div元素，添加一个点击事件，打印div标签中内容
                $("div[id][class]").click(function() {
                    // alert(this.innerHTML); // js写法
                    alert($(this).html()); // jquery写法
                });
                // 4 获取属性name="hobby"的input标签, 打印value属性值
                $("input[name='hobby']").each(function() {
                    // alert(this.value); // js写法
                    alert($(this).val()); // jquery写法
                });
            });
        </script>
    </head>
 
    <body>
        <div>AAAA</div>
        <div id="mydiv" class="itcast1">BBBB</div>
        <div class="alex3">CCCC</div>
        <div id="mydiv2">DDDD</div>
        <div class="divclass">EEEE</div>
        <div id="xxx" class="alex3">FFFF</div>
        <p class="p-alex">PPPPPP</p>
 
        <input type="checkbox" name="hobby" value="高尔夫" /> 高尔夫
        <input type="checkbox" name="hobby" value="蹦极" /> 蹦极
        <input type="checkbox" name="hobby" value="足球" /> 足球
    </body>
</html>

基本过滤选择器

:first             选择第一个
:last              选择最后一个
:not(selector)     不选择指定的那个标签
:even              偶数
:odd               奇数
:eq(index)         选择指定下标的那个标签
:gt(index)         大于指定下标的标签
:lt(index)         小于指定下标的标签
:header            选择标签标签
:animated          选择执行动画效果的标签

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
        <script>
            $(function() {
                // 1．设置表格第一行，显示为红色
                $("tr:first").css("color", "red");
                // 2．设置表格除第一行以外 显示为蓝色
                $("tr:not(:first)").css("color", "blue")
                // 3．设置表格奇数行背景色 黄色
                $("tr:gt(0):odd").css("background", "yellow");
                // 4．设置表格偶数行背景色 绿色
                $("tr:gt(0):even").css("background", "green");
                // 5．设置页面中所有标题 显示为灰色
                $(":header").css("color", "gray");
                // 6．设置页面中正在执行动画效果div背景黄色，不执行动画div背景绿色
                $("div").click(function() {
                    $(this).slideUp("slow"); // 向上滑动
                    $("div:animated").css("background", "yellow"); // 正在执行动画效果div背景黄色
                });
                // 不执行动画div背景绿色
                $("div:not(:animated)").css("background", "green");
            });
        </script>
    </head>
 
    <body>
        <h1>表格信息</h1>
        <h2>这是一张商品表</h2>
        <table border="1" width="600">
            <tr>
                <th>商品编号</th>
                <th>商品名称</th>
                <th>售价</th>
                <th>数量</th>
            </tr>
            <tr>
                <td>001</td>
                <td>冰箱</td>
                <td>3000</td>
                <td>100</td>
            </tr>
            <tr>
                <td>002</td>
                <td>洗衣机</td>
                <td>2000</td>
                <td>50</td>
            </tr>
            <tr>
                <td>003</td>
                <td>热水器</td>
                <td>1500</td>
                <td>20</td>
            </tr>
            <tr>
                <td>004</td>
                <td>手机</td>
                <td>2188</td>
                <td>200</td>
            </tr>
        </table>
 
        <div>slideDown(speed, [callback]) 概述 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。 这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。 参数 speedString,Number三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000) callback (可选)FunctionFunction在动画完成时执行的函数</div>
        <div>fadeOut(speed, [callback]) 概述 通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。 这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。 参数 speedString,Number三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000) callback (可选)Function在动画完成时执行的函数</div>
    </body>
 
</html>

内容过滤选择器

:contains(text)     包含某个文本内容的标签
:empty              没有内容的标签
:has(selector)      包含指定内容的标签
:parent             查找有内容的标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
        <script>
            $(function() {
                // 1．设置含有文本内容 ”张学友” 的 div 的字体颜色为红色
                $("div:contains('张学友')").css("color", "red");
                // 2．设置没有子元素的div元素 文本内容 ”这是一个空DIV“
                $("div:empty").html("这是一个空DIV");
                // 3．设置包含p元素 的 div 背景色为黄色
                $("div:has(p)").css("background", "yellow");
                // 4．设置所有含有子元素的span字体为蓝色
                $("span:parent").css("color", "blue");
            });
        </script>
    </head>
 
    <body>
        <div>今天是个晴天</div>
        <div>山东张学友河北刘德华</div>
        <div>
            <span>JavaScript</span> 是网页开发中脚本技术
        </div>
        <div>Ajax 是异步的 JavaScript和 XML</div>
        <div>
            <p>jQuery</p>
            是 JavaScript一个 轻量级框架
        </div>
        <div></div>
    </body>
</html>

可见性过滤选择器

:hidden             选择隐藏的标签:1  <input type="hidden"  />   2 <标签 sytle="display:noe" .../>
:visible            选择可见的标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
        <script>
            $(function() {
                // 1．为表单中所有隐藏域  添加 class属性，值为alex
                $("form :hidden").addClass("alex");
 
                // 2．设置table所有 可见 tr 背景色 黄色
                $("tr:visible").css("background", "yellow");
 
                // 3．设置table所有 隐藏tr 字体颜色为红色，显示出来 ，并输出tr中文本值
                /*
                var _tr = $("tr:hidden").css("color", "red");
                var _tr2 = _tr.show();
                alert(_tr2.html());
                */
                alert($("tr:hidden").css("color", "red").show().html());
            });
        </script>
    </head>
 
    <body>
        <form>
            <input type="hidden" /> <input type="text" name="xxx" style="display: none;" />
        </form>
        <table>
            <tr>
                <td>洗衣机</td>
            </tr>
            <tr>
                <td>热水器</td>
            </tr>
            <tr style="display: none">
                <td>电冰箱</td>
            </tr>
        </table>
    </body>
</html>

子元素过滤选择器

:nth-child          匹配其父元素下的第N个子或奇偶元素
:first-child        匹配第一个子元素' first' 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素
:last-child         匹配最后一个子元素 ':last'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素
:only-child         如果某个元素是父元素中唯一的子元素，那将会被匹配

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
        <script>
            $(function() {
                // 1.在每个表格 下3的倍数行，字体颜色为红色
                $("tr:nth-child(3n)").css("color", "red");
                // 2.每个表格 奇数行 背景色 黄色
                $("tr:nth-child(odd)").css("background", "yellow");
                // 3.每个表格 偶数行 背景色 灰色
                $("tr:nth-child(even)").css("background", "gray");
                // 4.每个tr 只有一个td的  背景为 蓝色
                $("td:only-child").css("background", "blue");
            });
        </script>
    </head>
 
    <body>
        <table border="1" width="400" id="mytable">
            <tr><td>1</td><td>冰箱</td></tr>
            <tr><td>2</td><td>洗衣机</td></tr>
            <tr><td>3</td><td>热水器</td></tr>
            <tr><td>4</td><td>电饭锅</td></tr>
            <tr><td>5</td><td>电磁炉</td></tr>
            <tr><td>6</td><td>豆浆机</td></tr>
            <tr><td>7</td><td>微波炉</td></tr>
            <tr><td>8</td><td>电视</td></tr>
            <tr><td>9</td><td>空调</td></tr>
            <tr><td>10</td><td>收音机</td></tr>
            <tr><td>11</td><td>排油烟机</td></tr>
            <tr><td>12</td><td>加湿器</td></tr>
            <tr><td>13 电暖气</td></tr>
        </table>
    </body>
</html>

表单过滤选择器

:input         匹配所有 input, textarea, select 和 button 元素
:text          匹配所有的单行文本框
:password      匹配所有密码框
:radio         匹配所有单选框
:checkbox      匹配所有多选框
:submit        匹配提交按钮
:image         匹配图片标签
:reset         匹配重置按钮
:button        匹配按钮
:file          匹配 input type='file'的标签
:hidden        匹配隐藏的标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
        <script>
            //1．对所有text框和password框，添加离焦事件，校验输入内容不能为空
            $("input[name='username'], input[name='password']").blur(function() {
                var val = this.value;
                if(val == null || val.trim().length <= 0) {
                    alert(this.name + "不得为空!");
                }
            });
            //2．对button 添加 点击事件，提交form表单
            $(":button").click(function() {
                $("form").submit();
            });
        </script>
    </head>
 
    <body>
        <form action="login">
            用户名 <input type="text" name="username" /> <br/> 密码 <input type="password" name="password" /> <br/>
            <input type="button" value="提交" />
        </form>
    </body>
</html>

表单对象属性

:enabled         可用
:disabled        不可用
:checked         选中(单选和多选)
:selected        选中(下拉)

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
        <script>
            $(function() {
                //1: 只读和不可用标签的联系和区别
                // 联系: 只能看,不能修改
                // 区别:
                // 只读虽然不能修改,但是可以随表单一起提交
                // 不可用不仅不能修改, 还不能表单一起提交
                //2: 点击button 打印radio checkbox select 中选中项的值
                $(":button").click(function() {
                    // 性别
                    var sexVal = $("input[name='gender']:checked").val();
                    alert("性别: " + sexVal);
 
                    // 爱好
                    var hobbyStr = "";
                    $("input[name='hobby']:checked").each(function() {
                        var hobby = this.value; // js写法
                        hobbyStr += hobby + ",";
                    });
                    alert("爱好 : " + hobbyStr);
 
                    // 城市
                    var cityVal = $("select[name='city'] option:selected").val();
                    alert("城市:" + cityVal);
                });
            });
        </script>
    </head>
 
    <body>
        <form>
            用户名(只读): <input type="text" readonly="readonly" name="username" value="zhangsan" /> <br/>
            密码(不可用): <input type="text" disabled="disabled" name="123" value="123" /> <br/>
            性别
            <input type="radio" value="男" name="gender" />男
            <input type="radio" value="女" name="gender" />女 <br/>
            爱好
            <input type="checkbox" value="抽烟" name="hobby" /> 抽烟
            <input type="checkbox" value="喝酒" name="hobby" /> 喝酒
            <input type="checkbox" value="烫头" name="hobby" /> 烫头 <br/>
            城市
            <select name="city">
                <option value="">请选择</option>
                <option value="北京">北京</option>
                <option value="上海">上海</option>
                <option value="天津">天津</option>
            </select> <br/>
            <input type="button" value="打印" />
        </form>
    </body>
 
</html>

jQuery操作DOM

操作属性

attr(name|pro|key,val|fn)          设置或返回被选元素的属性值。
removeAttr(name)
prop(n|p|k,v|f)1.6+                获取在匹配的元素集中的第一个元素的属性值。(适用于单选 多选 下拉框)
removeProp(name)1.6+

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
        <script>
            $(function() {
                // 设置标签存在的属性
                $("#btn1").click(function() {
                    $("a").attr("href", "http://www.baidu.com");
                })
 
                // 设置标签不存在的属性
                $("#btn2").click(function() {
                    $("a").attr("meinv", "刘亦菲");
                })
 
                $("#btn3").click(function() {
                    $("input[name='sex']").each(function() {
                        var attrChecked = $(this).attr("checked"); // 获取单选的选中状态不合适
                        alert(this.checked + " ===== " + attrChecked);
                    });
                });
 
                $("#btn4").click(function() {
                    $("input[name='sex']").each(function() {
                        var propChecked = $(this).prop("checked");
                        alert(this.checked + " ===== " + propChecked);
                    });
                });
            });
        </script>
    </head>
 
    <body>
        <a>百度</a> <br/>
        <input type="button" id="btn1" value="设置标签存在的属性" /> <br/>
        <input type="button" id="btn2" value="设置标签不存在的属性" /> <br/>
        <hr/>
 
        <input type="radio" name="sex" value="女" />女
        <input type="radio" name="sex" value="男" checked="checked" />男 <br/>
        <input type="button" id="btn3" value="通过attr获取选中状态" /> <br/>
        <input type="button" id="btn4" value="通过prop获取选中状态" />
    </body>
 
</html>

设置样式

直接设置css样式:
    $("p").css("color")                      获取第一个段落的color值
    $("p").css("color","red")                将所有段落的字体设为红色
    $("p").css({color:"#ff0011", background:"blue"}) 将所有段落字体设置为红色,背景设置为蓝色
设置css类:
    addClass(class|fn)              增加class样式
    removeClass([class|fn])         删除class样式
    toggleClass(class|fn[,sw])      切换css样式: 有 去掉; 没有 增加

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .changeBackYellow {
                background: yellow;
            }
 
            .changeFontBlue {
                color: blue;
            }
        </style>
        <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
        <script>
            $(function() {
                $("#btn1").click(function() {
                    // 方式一
                    $("div").attr("style", "background:yellow");
 
                    // 方式二: 通过css
                    $("div").css("background", "yellow");
 
                    // 方式三: 增加class样式
                    $("div").addClass("changeBackYellow");
 
                    // 切换效果: 有 去掉; 没有 增加
                    $("div").toggleClass("changeBackYellow");
                });
 
                // 字体变蓝
                $("#btn2").click(function() {
                    // 方式一
                    $("div").attr("style", "color:blue");
 
                    // 方式二: 通过css
                    $("div").css("color", "blue");
 
                    // 方式三: 增加class样式
                    $("div").addClass("changeFontBlue");
 
                    // 切换效果: 有 去掉; 没有 增加
                    $("div").toggleClass("changeFontBlue");
                });
            });
        </script>
    </head>
 
    <body>
        <div>心情不错！</div>
        <input type="button" value="背景变黄" id="btn1" />
        <input type="button" value="字体变蓝" id="btn2" />
    </body>
 
</html>

获取标签内容和标签填写的值

读取和设置某个元素中HTML内容
    标签.html()         获取一个元素中html内容
    标签.html(val)     设置一个元素中html内容
    这个函数不能用于XML文档。但可以用于XHTML文档 
 
读取和设置某个元素中的文本内容
    标签.text()         获取一个元素中 文本内容
    标签.text(val)     设置一个元素中 文本内容
    该方法既可以用于 XHTML 也可以用于 XML 文档
 
文本框、下拉列表框、单选框 选中的元素值
    标签.val()         获取文本框、下拉列表框、单选框 value值
    标签.val(val)     设置文本框、下拉列表框、单选框 value值

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
        <script>
            $(function() {
                // 1．<div><p>山东张学友</p></div>  获取div中 html和text 对比
                var _html = $("div").html(); //带有p标签
                var _text = $("div").text(); //不带标签
 
                // 2．单击pickBtn 使用val() 获得文本框、下拉框、单选框选中的value
                $("#pickBtn").click(function() {
                    // 用户名
                    var usernameVal = $("input[name='username']").val();
                    console.info("用户名  === " + usernameVal);
                    // 城市
                    var cityVal = $("select[name='city']").val();
                    console.info("城市 === " + cityVal);
                    // 爱好
                    var hobbyStr = "";
                    $("input[name='hobby']:checked").each(function() {
                        hobbyStr += this.value + ", ";
                    });
                    console.info("爱好 === " + hobbyStr);
                    // 性别
                    var sexVal = $("input[name='gender']:checked").val();
                    console.info("性别 === " + sexVal);
                });
 
                // 3．单击setBtn 通过 val() 设置单选框、下拉框的选中效果
                $("#setBtn").click(function() {
                    // 用户名
                    $("input[name='username']").val("梅西");
 
                    // 城市
                    $("select[name='city']").val("北京");
 
                    // 爱好(多个)
                    $("input[name='hobby']").val(["足球", "篮球", "乒乓球"]);
 
                    // 性别(将单选认为是特殊多选, 只能选择一个)
                    $("input[name='gender']").val(["男"]);
                });
            });
        </script>
    </head>
 
    <body>
        <div>
            <p>山东张学友</p>
        </div>
        <form>
            用户名 <input type="text" name="username" /> <br/>
            城市
            <select name="city">
                <option value="">请选择</option>
                <option value="北京">北京</option>
                <option value="上海">上海</option>
            </select><br/>
            爱好
            <input type="checkbox" name="hobby" value="足球" />足球
            <input type="checkbox" name="hobby" value="篮球" />篮球
            <input type="checkbox" name="hobby" value="乒乓球" />乒乓球
            <input type="checkbox" name="hobby" value="排球" />排球 <br/>
            性别
            <input type="radio" name="gender" value="男" />男
            <input type="radio" name="gender" value="女" />女 <br/>
            <input type="button" value="取值" id="pickBtn" />
            <input type="button" value="设值" id="setBtn" />
        </form>
    </body>
 
</html>

jQuery操作

创建元素
    使用工厂函数 jQuery(html, [ownerDocument])  --- jQuery可以写为$
    例如： $(“<div>你好，jQuery</div>”);
内部插入
    $node.append($newNode)向每个匹配的元素内部的结尾处追加结尾处
    $newNode.appendTo($node)将新元素追加到每个匹配元素内部的结尾处
    $node.prepend($newNode) 向每个匹配的元素内部的结尾处追加开始处
    $newNode.prependTo($node)将新元素追加到每个匹配元素内部的开始处
外部插入
    $node.after($newNode) 向每个匹配的元素的之后插入内容，是并列兄弟
    $newNode.insertAfter($node)  将新元素插入到每个匹配元素之后
    $node.before($newNode)  向每个匹配的元素的之前插入内容
    $newNode.insertBefore($node)  将新元素插入到每个匹配元素之前

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
        <script>
            $(function() {
                // 插入大专学历 （本科和高中之间）--- 外部插入
                var _dazhuan = "<option value='大专'>大专</option>";
                $("option[value='本科']").after(_dazhuan);
 
                // 插入幼儿园 （学历列表最后） --- 内部插入
                var _youeryuan = "<option value='幼儿园'>幼儿园</option>";
                $("#edu").append(_youeryuan)
            });
        </script>
    </head>
 
    <body>
        <!-- 选择学历 -->
        <select id="edu" name="edu">
            <option value="">请选择</option>
            <option value="本科">本科</option>
            <option value="高中">高中</option>
            <option value="中转">中专</option>
            <option value="小学">小学</option>
        </select>
    </body>
 
</html>

删除标签对象

$("").remove()  删除标签 并删除标签对应的事件
$("").detach()   删除标签 但是不删除标签对应的事件

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
        <script>
            $(function() {
                // 绑定事件
                $("#inner").click(function() {
                    //既会触发inner的click事件 也会触发outer的click事件(事件冒泡)
                    alert("点击内部的div ... ...");
                });
 
                $("#outer").click(function() {
                    alert("点击外部的div ... ...");
                });
 
                // 1 使用remove删除内部div标签, 再将删除标签 重新加入body 查看事件是否存在: 事件不存在
                var _inner = $("#inner").remove();
                $("body").append(_inner);
 
                // 2 使用detach删除标签, 再将删除标签 重新加入body 查看事件是否存在: 保留事件
                var _inner = $("#inner").detach();
                $("body").append(_inner);
 
                // 3 清空id='inner'的标签内容
                $("#inner").empty();
 
            });
        </script>
    </head>
 
    <body>
        <div id="outer" style="background:blue;width:300px;height:300px;">
            <div id="inner" style="background:red;width:150px;height:150px;">山东张学友!!!
    </body>
 
</html>

替换标签对象

替换：
replaceWith(content|fn)    将所有匹配的元素替换成指定的HTML或DOM元素。
replaceAll(selector)       用匹配的元素替换掉所有 selector匹配到的元素。
克隆：
clone([Even[,deepEven]])   克隆匹配的DOM元素并且选中这些克隆的副本。

replaceWith（把所有的段落标记替换成加粗的标记。）：
html代码：
<p>Hello</p><p>cruel</p><p>World</p>
jQuery代码：
$("p").replaceWith("<b>Paragraph. </b>");
结果：
<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>
 
replaceAll（把所有的段落标记替换成加粗标记）：
html代码：
<p>Hello</p><p>cruel</p><p>World</p>
jQuery代码：
$("<b>Paragraph. </b>").replaceAll("p");
结果：
<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>
 
clone：
1，克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有段落中。
html代码：
<b>Hello</b><p>, how are you?</p>
jQuery代码：
$("b").clone().prependTo("p");
结果：
<b>Hello</b><p><b>Hello</b>, how are you?</p>
2，创建一个按钮，他可以复制自己，并且他的副本也有同样功能。
html代码：
<button>Clone Me!</button>
jQuery代码：
$("button").click(function(){
  $(this).clone(true).insertAfter(this);
});

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
    div {
        padding : 10px;
        background-color : blue;
    }
 
    p {
        background-color : red;
    }
</style>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
    // 需求1:当点击btn1时,将外面的p标签 替换 里面的p标签
    $("#btn1").click(function(){
        // $(被替换的节点).replaceWith(新节点);
        $("#mydiv_p").replaceWith($("#myp"));
        // 问题: 替换产生了移动效果, 类似域 ctrl + x 剪切
        // 理想效果: 先复制,再粘贴
    });
    // 需求2:当点击btn2时,将外面的p标签 替换且克隆 里面的p标签
    $("#btn2").click(function(){
        // $(被替换的节点).replaceWith(新节点);
        // 问题: 替换产生了移动效果, 类似域 ctrl + x 剪切
        // 理想效果: 先复制,再粘贴
        // 克隆: $(被复制的标签).clone()    类似 : ctrl + c
        $("#mydiv_p").replaceWith($("#myp").clone());
 
    });
 
});
</script>
</head>
<body>
     <div id="mydiv">
        <p id="mydiv_p">AAAA</p>
    </div>
    <p id="myp">BBBB<a href="#">CCCC</a></p>
    <input type="button" id="btn1" value="替换"/>
    <input type="button" id="btn2" value="替换并克隆"/>
</body>
</html>

jQuery事件

blur([[data],fn])
change([[data],fn])
click([[data],fn])
dblclick([[data],fn])
error([[data],fn])
focus([[data],fn])
focusin([data],fn)
focusout([data],fn)
keydown([[data],fn])
keypress([[data],fn])
keyup([[data],fn])
mousedown([[data],fn])
mouseenter([[data],fn])
mouseleave([[data],fn])
mousemove([[data],fn])
mouseout([[data],fn])
mouseover([[data],fn])
mouseup([[data],fn])
resize([[data],fn])
scroll([[data],fn])
select([[data],fn])
submit([[data],fn])
unload([[data],fn])

事件相关用法及jQuery其他用法可以参考相关api。