黑马程序员_JQuery学习知识简单总结

最新推荐文章于 2022-11-05 11:08:04 发布

Jelly_Sucre

最新推荐文章于 2022-11-05 11:08:04 发布

阅读量685

点赞数 2

分类专栏：黑马程序员笔记。文章标签： DOM dom Dom html Html HTML javascript JavaScript jquery jQuery JQUERY Jquery JQuery

本文链接：https://blog.csdn.net/Jelly_Sucre/article/details/8200963

版权

黑马程序员笔记。专栏收录该内容

12 篇文章 0 订阅

订阅专栏

---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流！ ----------------------

JQuery不是独立出来的语言，它只是对JS进行的封装，JQuery本身就是一堆JavaScript函数。

使用JQuery的代码、编写JQuery的扩展插件等仍然用的是JavaScript的技术。

JQuery

普通JavaScript的缺点：每种控件的操作方式不统一，不同浏览器下有区别，要编写夸浏览器的程序非常麻烦，所以出现了很多JavaScript的封装库（Prototype、Dojo、ExtJS

JQuery等），这些库对JavaScript进行了封装，简化了开发。调用JQuery里边的一句函数，JQuery内部这个函数就会帮我们调用JavaScript中的几十句代码。

JQuery的优点：尺寸小、使用简单方便（Write Less，Do More 用最少的代码写最多的程序。链式编程（一直的点下去）、隐士迭代（对所有的处理都一样的，不论是1个还

1000个））

屏蔽浏览器差异，跨浏览器兼容性好（IE6.0+、火狐2+、Safari3.0+、Opera9.0+、Chrome）

插件丰富、开源、免费

调用方法：

在网页head中加<script src="../jquery-1.*.*.js" type="text/javascript"></script> ..为放jquery文件的相对路径 *是jquery的版本

调用JQuery库，前边要加$($就是一个函数)，意思就是讲Dom对象转换为JQuery对象

ready：注册事件的函数，和普通dom不一样，不需要再元素上标记on***类似的事件

$(document).ready(function () {

alert('加载完毕');

});

可以简写成 $(function() { alert('加载完毕') });

ready和onload类似，但是onload只能注册一次，后注册的onload事件则会取代先注册的，但是ready则可以多次注册，而且会全部执行

JQuery的ready和Dom的onload的区别：

onload是所有Dom元素创建完毕、图片、CSS等都加载完毕之后才会触发

ready则是Dom元素创建完毕后就触发（可以提高网页的相应速度）

jquery中也可以用$(window).load()来实现onload的事件调用

JQuery提供的函数

$.map(arr,fn) 对数组array中每个元素调用fn函数逐个进行处理，fn函数将处理返回，最后得到一个新数组

var arr=[3,5,9];

var arr2=$.map(arr,function(item){return item*2;});

alert('arr2');

注意：$.map不能处理（不是很绝对，很麻烦，没必要）Dictionary风格的数组

$.each(arr,fn)对数组array中每个元素调用fn函数进行处理，没有返回值

var arr3={"tom":"汤姆","jerry":"杰瑞","lily":"莉莉"};

$.each(arr3,function(key,value) { alert(key+"="+value); });

注意：如果是普通风格的数组，则key的值是序号,value的值就是数组的值

var arr4 = [12, 23, 32];

$.each(arr4, function (item) { alert(item); });

如果不写参数，函数里边用this，那个就是数组的值，对于Dictionary也是一样

var arr5 = [12, 23, 32];

$.each(arr5, function () { alert(this); });

或者

var arr6 = { "tom": "汤姆", "jerry": "杰瑞", "lily": "莉莉" };

$.each(arr6, function () { alert(this); });

普通的数组可以使用无参，dictionary风格最好用key，value

    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        var arr = [1, 3, 5];
        //对数组array中每个元素调用fn函数逐个进行处理，fn函数将处理返回，最后得到一个新数组
        var arr2 = $.map(arr, function (item) { return item * 2; });
        alert(arr2);

        //$.each(arr,fn)对数组array中每个元素调用fn函数进行处理，没有返回值
        var arr3={"tom":"汤姆","jerry":"杰瑞","lily":"莉莉"};
        $.each(arr3, function (key, value) { alert(key + "=" + value); });

        //如果是普通风格的数组，则key的值是序号,value的值就是数组的值
        var arr4 = [12, 23, 32];
        $.each(arr4, function (item) { alert(item); });

        //this表示取得当前元素的value
        //如果不写参数，函数里边用this，那个就是数组的值
        var arr5 = [12, 23, 32];
        $.each(arr5, function () { alert(this); });

        //如果不写参数，函数里边用this，那个就是数组的值,对于Dictionary也是一样
        var arr6 = { "tom": "汤姆", "jerry": "杰瑞", "lily": "莉莉" };
        $.each(arr6, function () { alert(this); });
    </script>

JQuery对象、Dom对象

JQuery对象就是通过JQuery包装Dom对象后产生的对象，Dom对戏那个要想通过JQuery进行操作，先要转换成JQuery对象

将Dom对象转换为JQuery对象的方法：$(dom对象)

将JQuery对象转换为Dom对象的方法：var Dom对象=JQuery对象[0] 或者 var Dom对象=JQuery对象.get(0)

$(function () { $("#div1").html("<a href='http://www.baidu.com'>百度</a>"); var conn = $(div1)[0]; alert(conn.innerHTML); });

alert($("#div1").html()); html方法里边写参数就是赋值，不写参数就是取值

$(function () { alert($("#div1").html("<a href="http://www.baidu.com">百度</a>")); });

$("#div1").html()就相当于Dom中：document.getElementById("div1").innerHTML;

$("#div1")得到的就是JQuery对象，JQuery对象和Dom对象都只能调用各自的对象的方法，在Dom中的innerHTML在JQuery中就是错的

JQuery方法

修改样式：$("#div1").css("background","red"); 将id为div1的标签背景设置为红色

$(function () { $("#div1").css("background", "red") });

获得样式：$("#div1").css("background");只要不传第二个参数的值就是获得样式

$(function () { alert($("#div1").css("background")); });

修改value： $(#div1).val("abc");

$(function () { $("#txt1").val(new Date()) });

获得value： $("#div1").val(); 只要不传值就是获得\

$(function () { alert($("#txt1").val()); });

类似的获得设置innerText、innerHTML .后边用text()和html()

$(function () { $("#div1").html("abc<font color='Yellow'>innerHTML</font>def") });

$(function () { alert($("#div1").html()) });

$(function () { alert($("#div1").text()) });

<head>
    <title></title>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
    <script type="text/javascript">
//        //html方法里边写参数就是赋值，不写参数就是取值
//        $(function () { alert($("#div1").text()); });
//        $(function () { alert($("#div1").html()); });
        //        $(function () { $("#div1").html("<a href='http://www.baidu.com'>百度</a>"); var conn = $(div1)[0]; alert(conn.innerHTML); });

        //修改样式：$("#div1").css("background","red"); 将id为div1的标签背景设置为红色
        $(function () { $("#div1").css("background", "red") });
        //获得样式：$("#div1").css("background");只要不传第二个参数的值就是获得样式
        $(function () { alert($("#div1").css("background")); });

        //修改value： $(#div1).val("abc");
        $(function () { $("#txt1").val(new Date()) });
        //获得value $("#div1").val(); 只要不传值就是获得
        $(function () { alert($("#txt1").val()); });

        //类似innerText、innerHTML  修改 获得
        $(function () { $("#div1").html("abc<font color='Yellow'>innerHTML</font>def") });
        $(function () { alert($("#div1").html()) });

        $(function () { alert($("#div1").text()) });
    </script>
</head>
<body>
<div id="div1">你现在<font color="Yellow">在哪里呢？</font></div>
<input type="text" id="txt1" />
</body>

JQuery选择器 * $("body *")取得body下得所有控件

1.JQuery选择器用于查找满足条件的元素

$("#控件id")来根据控件的id获得控件的jquery对象，相当于Dom中getElementById:

$("#"div1).html("<font color='red'>你好</font>")

$("TagName")来获得所有制定标签的jquery对象，相当于Dom中getElementsByTagName：

$(function(){

$("#btnClick").click(function(){

$("p").html("所有都是P的标签");

});

}); //相当于Dom中先获得id为btnClick的标签，然后给在的单击事件里获取所有标签为p的元素（getElementsByTagName）

2.CSS选择器，同时选择拥有样式的多个元素

<html>
<head>
    <title></title>
    <style type="text/css">
        .test
        {
            background-color:Red;
            color:Yellow;
        }
    </style>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $(".test").click(function () {
                alert("此为警告信息");
            });
        });
    </script>
</head>
<body>
<p>test1</p>
<div class="test">div1</div>
<p class="test">test2</p>
<input type="button" class="test" value="样式选择器" />
</body>
</html>

3.多条件选择器

$("p,div,span.menuitem"), 同时选择p标签、div标签和拥有menuitem样式的span标签元素

4.层次选择器

$("div li") 获取div下得（所有）li元素

$("div > li") 获取div下得直接li子元素

$(".menuitem + div")获取样式名为menuitem之后的（第一个）div元素

$(".menuitem ~ div")获取样式名为menuitem之后的（所有）div元素

注意：选择器表达式中的空格不能多不能少

JQuery的迭代

JQuery选择器返回的是一个对象数组，它是对数组中每个元素迭代调用方法，因此即使通过id选择的元素不存在也不会报错，如果要判断制定的id是否存在，可以再之前写：

if($("#btn1").length<=0){

alert("id为btn1的元素不存在！");

}

节点遍历

next()方法：用于获取节点之后（挨着的）的同辈元素（标签级别相同）

next(指定标签)方法：：用于获取指定节点之后（挨着的）的同辈元素

nextAll()方法：用于获取节点之后的所有同辈元素

nextAll(指定标签)方法：用于获取指定标签节点之后的所有同辈元素

siblings()方法：用于获取所有的同辈元素

siblings(指定标签)方法：用于获取指定标签所有的同辈元素

<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //$("div").click(function () { alert($(this).next().text()); });
            //$("div").click(function () { alert($(this).next("div").text()); });
            //$("div").click(function () { alert($(this).nextAll().text()); });
            //$("div").click(function () { alert($(this).nextAll("div").text()); });
            //$("div").click(function () { alert($(this).siblings().text()); });
            //$("div").click(function () { alert($(this).siblings("div").text()); });

            //点击那个，就将之后所有指定标签的背景变成红色
            //$("div").click(function () { $(this).nextAll("div").css("background","red") });

            //点击那个就将那个背景色变成红色，其他为白色
            //$("div").click(function () { $(this).css("color", "red"); $(this).siblings("div").css("color", "black") });
            $("div").click(function () { $(this).css("color", "red").siblings("div").css("color", "black") });

            //评分控件
            //$("tr > td").mouseover(function () { $(this).css("cursor", "pointer"); $(this).text("★"); $(this).nextAll().text("☆") });
            //可以不用每个都要$(this)... 直接在第一次之后接着.就行（链式编程，可以一直.下去）
            $("#table1 td").text("☆").mouseover(function () { $("#table1 td").css("cursor", "pointer").text("★"); $(this).nextAll().text("☆") });
        });
    </script>
</head>
<body>
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
<div>ddd</div>
<p>eee</p><br />
<table id="table1">
    <tr><td></td><td></td><td></td><td></td><td></td></tr>
</table>
</body>

基本过滤器

:first 选取第一个元素

$("div:first")选取第一个<div>

:last 选取最后一个元素

$("div:last")选取最后一个<div>

:not 选取不满足"选择器"条件的元素

$("input:not(.myClass)")选取样式名不是myClass的<input>

:even、:odd 选取索引是奇数、偶数的元素

$("input:even")选取索引是技术的<input>

:eq(索引序号)、:gt(索引序号)、:lt(索引序号) 选取索引等于、大于、小于索引序号的元素

$("input:lt(5)")选取索引小于5的<input> 注意：gt、lt联合使用时，lt的序列号是从gt选出元素之后从排的序列号开始的

:hander 选取所有的h1-h6的元素

$(":hander")

:animated 选取正在执行动画的元素

$("div:animated")选取正在执行动画的<div>

<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#table1 tr:first").css("fontSize", "30px");
            $("#table1 tr:last").css("color", "red");
            $("#table1 tr:gt(0):lt(3)").css("fontSize", "28px"); //lt(3)是从gt(0)出的新序列号中的序号
            $("#table1 tr:gt(0):even").css("background", "yellow"); //表头不参与，所以要从第gt(0)行正文开始算
            $("#table1 tr").click(function () {
                $("td", $(this)).css("background", "red"); //相对选择，指定在此table1下边的tr中的所有td，点击背景变红。相对定位只要在第二个参数中用$(),第二个参数为相对元素
             });
        });
    </script>
</head>
<body>
<table id="table1">
    <tr><td>姓名</td><td>成绩</td></tr>
    <tr><td>张三</td><td>90</td></tr>
    <tr><td>李四</td><td>90</td></tr>
    <tr><td>郝宇</td><td>90</td></tr>
    <tr><td>小军</td><td>90</td></tr>
    <tr><td>小杰</td><td>90</td></tr>
    <tr><td>平均分</td><td>90</td></tr>
</table>
</body>

属性过滤器

$("div[id]")选取有id属性的<div>

$("div[name=abc]")选取name属性为abc的<div>（JQuery中没有对getELementsByName进行封装）

$("div[title=test]")选取title属性为test的<div>

$("div[title!=test]")选取title属性不为test的<div>

表单对象选择器（过滤器）注意：(:)前后不能有空格

$("#form1:enabled")选取id为form1的表单内所有启用的元素

$("#form1:disabled")选取id为form1的表单内所有禁用的元素

$("input:checked")选取所有选中的元素（Radio、CheckBox）

$("select:selected")选取所有选中的选项的元素（下拉列表）

$(":input") 选取所有的<input>、<textarea>、<select>和<button>元素。

它和$("input")不一样，$("input")只获得<input>标签

$(":text") 选取所有的单行文本框相当于$("input:[type=text]")

$(":password")选取所有的密码框。

同理还有：

:radio、:checkBox、:submit、:image、:reset、:button、:file、:hidden

<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("input[name=names]").click(function () {
                var arr = new Array();
                $("input[name=names]:checked").each(function (key, value) { arr[key] = $(value).val() });
                $("#message").text("共选中" + arr.length + "项：" + arr.join(","));
            });
        });
    </script>
</head>
<body>
<input type="checkbox" name="names" value="zs" />张三
<input type="checkbox" name="names" value="ls" />李四
<input type="checkbox" name="names" value="ww" />王五
<p id="message"></p>
</body>

JQuery的Dom操作

使用html()方法读取或者设置元素的innerHTML

使用text()方法读取或者设置元素的innerText

使用attr()方法读取或者设置元素的属性（对于JQuery没有封装的属性用attr进行操作）

alert(@("a:first").attr("href")); 获取a标签的第一个超链接地址

$("a:first").attr("href","http://www.baidu.com"); 设置a标签的第一个超链接地址

removeAttr删除属性（注意删除不是清空）

动态创建Dom节点

方法：$(html字符串)，返回一个JQuery对象，然后调用append等方法将心创建的节点添加到Dom中：

var link = $("<a href='http://www.baidu.com'>百度</a>");

$("div:first").append(link);

$()创建的就是一个JQuery对象，可以完全进行操作

var link = $("<a href='http://www.baidu.com'>百度</a>");

link.text("度娘");

$("div:first").append(link);

append()方法用来在元素的末尾追加元素。

prepend()方法在元素的开始添加元素

after() 方法在元素之后添加元素（兄弟）

before()方法在元素之前添加元素（兄弟）

删除节点 remove()

remove方法的返回值是被删除的节点对象，还可以继续使用被删除的节点

var lis=$("#ulSite li").remove();

$("#ulSite2").append(lis);

将节点清空 empty()

<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
        //动态加载网站
//            var link = $("<a href='http://www.baidu.com'>百度</a>");
//            $("div:first").append(link);
        });
        $(function () {
            //动态加载网站列表
//            var data = { "百度": "http://www.baidu.com", "谷歌": "http://www.google.com" };
//            $.each(data, function (key, value) {
//                var tr = $("<tr><td>" + key + "</td><td><a href=" + value + ">" + key + "</a></td></tr>");
//                $("#table1").append(tr);
//            });
        });
    </script>
</head>
<body>
<div></div>
<table id="table1"></table>
</body>

节点操作

替换节点：

$("br").replaceWith("<hr/>"); 将<br/节点替换为<hr/>

包裹节点：

$("b").wrap("<font color='red'></font>") 将所有的粗体字红色显示

<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#replace").click(function () {
                $("br").replaceWith("<hr />");
                $("p").wrap("<font color='red'></font>")
            });
        });
    </script>
</head>
<body>
qweqwqw<br />
的首付款了<br />
第三方<br />
热帖个<br />
<p>d321321</p>
<p>e31esfd</p>
<input type="button" value="replaceWith" id="replace" />
</body>

样式操作

获取样式：attr("class") 设置样式：attr("class","myclass") 追加样式：addClass("myclass") 移除样式：removeClass("myclass")

切换样式：toggleClass("myclass") 判断是否存在样式：hasClass("myclass")

给body设置body{filter:Gray;}可以让网页编程黑白显示（哀悼日灰白效果）（仅IE）

<head>
    <title></title>
    <style type="text/css">
        .class1{ background-color:Red; }
        .class2{ font-size:50px; }
        .class3{ color:Yellow;}
        .night{ background-color:Black;}
    </style>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnAdd").click(function () {
                $("#div1").addClass("class2");
            });
            $("#btnRemove").click(function () {
                $("#div1").removeClass("class2");
            });
            $("#btnToggle").click(function () {
                $("#div1").toggleClass("class3");
            });
            $("#btnLight").click(function () {
                $("body").toggleClass("night");
            });
        });
    </script>
</head>
<body>
<div id="div1" class="class1">你好</div>
<input type="button" value="添加样式" id="btnAdd" />
<input type="button" value="移除样式" id="btnRemove" />
<input type="button" value="切换样式" id="btnToggle" />
<input type="button" value="开关灯" id="btnLight" />
</body>

RadioButton操作

取得RadioButton的选中值

$("input[name=names]:checked").val()

<input checked="checked" name="names"type="radio" value="男" />男

<input checked="checked" name="names"type="radio" value="女" />女

<input checked="checked" name="names"type="radio" value="未知" />未知

设置RadioButton，CheckBox的选中值

$("input[name=names]").val(["女"]);

或者：

$(":radio[name=names]").val(["女"]); 注意：val中参数的[]不能省略

单独设置值用attr方法将checked属性设置为true

$(":checkbox[value=篮球]").attr("checked",true);

<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#getValue").click(function () {
                alert($(":radio[name=names]:checked").val());
            });
            $("#setValue").click(function () {
                //$(":radio[name=names]").val(["女"]);
                $("#test1").attr("checked", true);
            });
            $(":checkbox").val(["篮球", "足球"]);
        });
    </script>
</head>
<body>
<input name="names" type="radio" value="男" />男<br />
<input name="names" type="radio" value="女" />女<br />
<input id="test1" name="names" type="radio" value="未知" />未知<br />

<input type="checkbox" value="篮球" />篮球<br />
<input type="checkbox" value="足球" />足球<br />
<input type="checkbox" value="羽毛球" />羽毛球<br />

<input type="button" value="设值" id="setValue" />
<input type="button" value="取值" id="getValue" />
</body>

事件

直接写事件调用的click方法其实是用bind方法创建的，如果每次写都很麻烦，所以JQuery内部自动将bind方法简化，可以直接用click方法 unbind("click") 移除事件

合成事件：hover(函数1，函数2) 当鼠标放在元素上时调用函数1，当鼠标离开元素的时候调用函数2。

相当于将mouseenter跟mouseleave合并在一起了（不经常用）

事件冒泡：JQuery中也想JavaScript一样有事件冒泡

$(function () {

$("#p1").click(function () { alert("p被点击了"); });

$("#td1").click(function () { alert("td被点击了"); });

$("#tr1").click(function () { alert("tr被点击了"); });

$("#t1").click(function () { alert("t被点击了"); });

});

方法：

终止冒泡：调用stopPropagetion() 只要在匿名函数中传一个参数（一般写e，也可以自己写），然后再函数体重调用e.stopPropagetion()方法就可以阻止该元素以上的冒泡

$("#tr1").click(function (e) { alert("tr被点击了"); e.stopPropagation(); });

如果在上一级跟下一级都有onclick事件，只向触发下一级的事件，就可以在此元素上加e.stopPropagetion()方法将其终止掉

阻止默认：preventDefault()方法相当于Dom中window.event.returnValue =false; 阻止其行为用法和终止冒泡类似

$(":submit").click(function (e) { if ($("#name").val().length <= 0) { alert('用户名不能为空'); e.preventDefault(); } });

</form>

<head>
    <title></title>
    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#p1").click(function (e) { alert("target源，this只是当前"); alert($(this).html()); alert($(e.target).html()); });
            $("#td1").click(function (e) { alert("冒泡出的事件this不是表示当前"); alert($(this).html()); alert($(e.target).html()); });
            $("#zb").click(function (e) { alert(e.pageX + ":" + e.pageY); });
            $("#one").one("click",function () {
                alert('one方法只能触发一次');
            });
            $("#until").bind("click", function () {
                alert('bind方法可以一直触发');
            });
        });
    </script>
</head>
<body>
<table id="t1"><tr id="tr1"><td id="td1"><p id="p1">事件冒泡</p></td></tr></table>
<input type="button" value="坐标" id="zb" />
<input type="button" value="一次性事件" id="one" />
<input type="button" value="一直触发事件" id="until" />
</body>

其他事件

属性：pageX、pageY(触发事件的X,Y坐标，相当于Dom中的clientX、clientY)、target（获得触发事件的元素,相当于Dom中srcElement）

which如果是鼠标事件获得按钮（1左键，2中键，3右键）

altKey、shiftKey、ctrlKey获得alt、shift、ctrl是否按下（bool值）

keyCode、charCode属性发生事件的keyCode(键盘码)、charCode(ASCII码)

<head>
    <title></title>
    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#p1").click(function (e) { alert("target源，this只是当前"); alert($(this).html()); alert($(e.target).html()); });
            $("#td1").click(function (e) { alert("冒泡出的事件this不是表示当前"); alert($(this).html()); alert($(e.target).html()); });
            $("#zb").click(function (e) { alert(e.pageX + ":" + e.pageY); });
        });
    </script>
</head>
<body>
<table id="t1"><tr id="tr1"><td id="td1"><p id="p1">事件冒泡</p></td></tr></table>
<input type="button" value="坐标" id="zb" />
</body>

动画

show()、hide()方法显示、隐藏元素。 toggle()方法可以在显示、隐藏之间切换

如果show、hide方法不带参数则是立即显示、立即隐藏，如果指定速度参数则会用指定的时间进行动态显示、隐藏（单位为毫秒）

也可以用内置的速度fast(200毫秒)、normal（400毫秒）、slow（600毫秒） JQuery动画函数中需要速度的地方一般也可以使用这三个值

        $(function () {
            $("#qh").click(function () {
                $("#div1").toggle();
            });
            $("#yc").click(function () {
                $("#div1").hide();
            });
            $("#xs").click(function () {
                $("#div1").show();
            });
        });
	<div id="div1">看了离开</div>
	<input type="button" value="隐藏" id="yc" />
	<input type="button" value="显示" id="xs" />
	<input type="button" value="切换" id="qh" />

JQuery插件：

JQuery cookie：

cookie就是保存在浏览器上的内容（就是一些数据），用户在这次浏览页面的时候向Cookie中保存文本内容，下次再访问的时候就可以取出上次保存（记忆）的内容。

cookie不是JQuery特有的概念，只不过JQueryCookie把它简化的更好用了而已。

Cookie需要浏览器的支持，浏览器的Cookie是可以禁用的如果禁用了Cookie就不能使用了，不过一般不考虑Cookie的情况。

Cookie的几个特征：

Cookie是与域名相关的，所有163.com不能读取baidu.com记录的Cookie，所有读取、设置的时候不用考虑域名Cookie的冲入

一个域名能写入的Cookie总尺寸是有限制的，一般就是几千字节，能写入的Cookie总条数一般也就几十条，超过以后浏览器自己会根据自己的策略移除一些Cookie

Cookie不是写入以后一定下次能读出来，浏览器可能会定期清除，用户也可能会手动清除

JQuery Cookie使用

使用方法：Cookie保存的就是键值对

1.添加jquery.cookie.js文件

2.设置值，$.cookie('名字','值')。cookie中保存的值都是文本

3.读取值，var v=$.cookie('名字')

alert($.cookie("用户名"));

$.cookie("用户名","tom"); 在同域名的另外一个页面中也能读取到

设置值的时候还可以设置第三个参数：$.cookie('名字','值',{expires:7,path:'/',domain:'baidu.com',secure:true})

expires表示要求浏览器保存Cookie几天（这只是对浏览器的建议，可能没到时间浏览器就自动清除了），如果不设定expires，那么在浏览器关闭以后就清除，options参数

哪个设置那个

domain表示这个域名下得含有baidu.com的子页面都可以访问此Cookie

//记录上次用户退出时的用户名、密码

<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery.cookie.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            if ($.cookie("UserName")) {
                $("#username").val($.cookie("UserName"));//将上次记录的用户名密码读取到页面
                $("#password").val($.cookie("Password"));
            }
            $("#login").click(function () {
                $.cookie("UserName", $("#username").val());//将用户登陆时的用户名，密码保存到Cookie中
                $.cookie("Password", $("#password").val());
            });
        });
    </script>
</head>
<body>
<label for="username">用户名：</label><input type="text" id="username" /><br />
<label for="password">密  码：</label><input type="password" id="password" /><br />
<input type="button" value="登陆" id="login" />
</body>

//记录用户上次退出时的背景颜色

<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery.cookie.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#tbColor td").css("cursor", "pointer").click(function () {
                var bgcolor = $(this).css("background-color");
                $("body").css("background-color", bgcolor);
                $.cookie("LastBgColor", bgcolor, { expires: 7 }); //{expires:7}设置保存数据7天，这样浏览器关闭就暂时不会清除Cookie了
            });
            if ($.cookie("LastBgColor")) {
                var bgcolor = $.cookie("LastBgColor");
                $("body").css("background", bgcolor);
            }
        });
    </script>
</head>
<body>
<table id="tbColor">
    <tr>
        <td style="background-color:Red">红色</td>
        <td style="background-color:Yellow">黄色</td>
        <td style="background-color:Green">绿色</td>
    </tr>
</table>
</body>

JQueryUI插件

度娘ing......

---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流！ ----------------------

详细请查看：http://edu.csdn.net/heima/

Jelly_Sucre

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
黑马程序员_JQuery学习知识简单总结

---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流！ ----------------------JQuery不是独立出来的语言，它只是对JS进行的封装，JQuery本身就是一堆JavaScript函数。使用JQuery的代码、编写JQuery的扩展插件等仍然用的是JavaScript的技术。JQuery
复制链接

扫一扫