jQuery学习笔记(三)

jQuery学习笔记(三)
1. 案例实现登陆界面验证：需求分析：当文本框字符为空时显示红色，不为空显示白色
     <head>

    <title>实º¦Ì现?的Ì?效¡ì果?是º?当Ì¡À文?本À?框¨°离¤?开a时º¡À背À3景¡ã色¦?为a红¨¬色¦?</title>

    <script src="js/jquery-1.4.2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $(":text").blur(function () {

                if ($(this).val().length <= 0) {

                    $(this).css("background", "red");

                }

                else {

                    $(this).css("background","white");

                }

            });

        });

    </script>

</head>

<body>

姓?名?:<input type="text" id="txtName" /><br />

密¨¹码?:<input type="text" id="txtPassword" /><br />

 <input type="button" value="登Ì?陆?" />

</body>

8．案例实现：动态添加球队需求分析：鼠标移到球队上时背景显示红色，单击将其添加到另一个元素中

<head>

    <title></title>

    <script src="js/jquery-1.4.2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $("#ul1 li").mouseover(function () {

                $(this).css("background", "red").siblings().css("background", "white");

            });

            $("#ul1 li").click(function () {

                var li = $(this).remove();

                $(this).css("background","white").appendTo("#ul2");

            });

        });

    </script>

</head>

<body>

<p>鼠º¨®标À¨º移°?上¦?去¨£¤背À3景¡ã变À?红¨¬，ê?点Ì?击¡Â添¬¨ª加¨®到Ì?另¢¨ª一°?个?列¢D表À¨ª中D</p>

<ul id="ul1" style="200px;float:left">

<li>中D国¨²队¨®</li>

<li>日¨?本À?队¨®</li>

<li>美¨¤国¨²队¨®</li>

<li>英®¡é国¨²队¨®</li>

</ul>

<ul id="ul2" style="float:left;200px"></ul>

</body>

9. 节点的操作：

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

包裹节点：wrap（）方法是将所有元素用指定的标签包裹起来

$(“b”).wrap(“<font color=”red”></font>”) 将粗体颜色设置为红色
1. 样式操作
获取样式attr(“class”)

设置样式attr(“class”,”myclass”)

追加样式addClass(“myclass”)()

移除样式 removeClass(“myclass”)

切换样式 toggleClass(“myClass”)

判断是否有样式 hasClass(“myclass”)

10. 案例实现：网页开关等效果等

<head>

    <title></title>

    <style type="text/css">

        .oldclass{background:red;}

        .newclass{font-size:40px}

     .night{background:black;}

    </style>

    <script src="js/jquery-1.4.2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

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

                $(document.body).toggleClass("night");

            });

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

                $("#test").addClass("newclass");

            });

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

                $("#test").removeClass("newclass");

            });

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

                $("#test").toggleClass("newclass");

            });

        });



    </script>

</head>
1. 案例实现：美女图片黑白照隔秒显示
<head>

    <title></title>

    <style type="text/css">

    .filter{filter:Gray;}

    </style>

    <script src="js/jquery-1.4.2.js" type="text/javascript"></script>

    <script type="text/javascript">

//        $(function () {

//            var toggle = function () { $("#test").toggleClass("filter"); };

//            setInterval("toggle()", 1000);

        //        });

        function toggle() {

            $("#test").toggleClass("filter");

        }

        setInterval("toggle()",1000);

    </script>

</head>

<body>

<div id="test">filter滤?镜¦Ì的Ì?使º1用®?<br />

<img src="136689109.jpg" />

</div>

<input type="button" value="改?变À?黑¨²白ã¡Á色¦?" id="changed"/>

</body>

12. 案例实现：单击表格行，单击的显示高亮，其余不显示样式

<head>

    <title></title>

    <style type="text/css">

    .infor{padding:5px;border:solid 1px red;}

    .myclass{background-color:red;}

    </style>

    <script src="js/jquery-1.4.2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $("table tr").click(function () {

                $(this).addClass("myclass").siblings().removeClass("myclass");

            });

        });

    </script>

</head>

<body>

<table class="infor">

<tbody>

<tr><th>学¡ì号?</th><th>姓名</th><th>成¨¦绩¡§</th></tr>

<tr><td>1009401</td><td>小罗</td><td>85</td></tr>

<tr><td>1009402</td><td>小王</td><td>88</td></tr>

<tr><td>1009403</td><td>小周¨</td><td>83</td></tr>

</tbody>

</table>

</body>
1. 案例实现：表格中的行单击时显示高亮，其余不显示高亮
<head>

    <title></title>

    <style type="text/css">

    .infor{padding:5px;border:solid 1px red;}

    .myclass{background-color:red;}

    </style>

    <script src="js/jquery-1.4.2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $("table tr").click(function () {

                $(this).addClass("myclass").siblings().removeClass("myclass");

            });

        });

    </script>

</head>

<body>

<table class="infor">

<tbody>

<tr><th>学¡ì号?</th><th>姓名</th><th>成绩</th></tr>

<tr><td>1009401</td><td>小罗</td><td>85</td></tr>

<tr><td>1009402</td><td>小王</td><td>88</td></tr>

<tr><td>1009403</td><td>小周</td><td>83</td></tr>

</tbody>

</table>

</body>

13. 案例实现：聚焦控件的高亮显示

<head>

    <title> </title>

    <style type="text/css">

    .color{background:red;}

    </style>

    <script src="js/jquery-1.4.2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $("input").focus(function () {

                $(this).addClass("color");

            });

            $("input").blur(function () {

                $(this).removeClass("color");

            });

        });

    </script>

</head>

<body>

<p>个人信息</p>

姓名<input type="text" id="textName" />

密码<input type="text" id="txtPassword" />

</body>
1. 案例实现：搜索框效果显示
   <head>

    <title></title>

    <style type="text/css">

     .newclass{border:solid 1px red;}

    </style>

    <script src="js/jquery-1.4.2.js" type="text/javascript"></script>

    <script type="text/javascript">

      $(function () {

            $("#research").focus(function () {

                $("#research").addClass("newclass").val("");

            });

            $("#research").blur(function () {

                var text = $("#research").val();

                if (text.length <= 0) {

                    $("#research").removeClass("newclass").val("请输入关键字");

                }

            });

        });

    </script>

</head>

<body>

<p>搜索框显示</p>

<input type="text" value="请输入关键字" id="research" /><input type="button" value=搜索一下"/>

</body>

代码实现2：

<head>

    <title>链式编程实现搜索框效果</title>

    <style type="text/css">

    .writing{color:Gray;}

    </style>

    <script src="js/jquery-1.4.2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $("#keyword").val("请输入关键字")

            .blur(function () {

                if ($("#keyword").val() == "") {

                    $("#keyword").val("请输入关键字").addClass("writing");

                }

            })

            .focus(function () {

                if ($("#keyword").val() == "请输入关键字") {

                    $("#keyword").val("").removeClass("writing");

                }

            });

        });

    </script>

</head>

<body>

<input type="text" id="keyword" />

</body>
1. RadioButton的操作
取得RadioButton的值

$(“input[name=gender].checked”).val()

<input type=”radio” name=”gender” value=”男” checked=”checked” id=”radio1”>男

<input type=”radio” name=”gender” value=”女” checked=”checked” id=”radio1”>女

<input type=”radio” name=”gender” value=”未知” checked=”checked” id=”radio1”>未知

设置RadioButton 的值

$(“input[name=gender]”).val([“女”]);

或者

$(“:radio[name=gender]”).val([“女”]);

注意：val中参数的[]不恩能够少

对RadioButton的选择技巧对于CheckBox和Select列表框也适用。除了可以使用val批量设置RadioButton、CheckBox等的选中以外，还可以设置checked属性来单独设置控件的选中状态

$(“btn1”).attr(“checked”,true);

案例练习：CheckBox的全选，全不选，反选
1. 事件
l         jQuery中的事件绑定：jQuery中调用事件其实是用这种方法：$(“#btn”).bind(“click”,function(){}),但是每次调用太麻烦，所以jQuery使用$(“#btn”).click(function(){})来进行简化

l         事件冒泡：jQuery中和JavaScript中一样是事件冒泡的。

l         如果想获得事件的相关信息，只要给响应的匿名函数增加一个参数：e，e代表的就是事件对象。调用事件对象的stopPropagation()方法终止冒泡。e.stopPropagation()

l         $(“tr”).click(function(e){alert(“tr被点击”);e.stopPropagation();}) //注意函数的参数是e

l         阻止默认行为：有的元素有默认行为，比如超链接点击后会转向新链接、提交按钮默认会提交表单。如果想阻止默认行为只要调用事件对象的preventDefault()方法此方法等同于window.event.returnValue=false   $(“a”).click(function(e){alert(“所有的超链接暂时全部禁止点击”);e.preventDefault();});

$(function () {

            $("#sm").click(function (e) {

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

                    alert("提交信息不能为空");

                    e.preventDefault();

                }

            });

        });

属性：pageX、pageY、target获得触发事件的元素与this的区别：this是获得当前触发事件，target获得最原始的冒泡事件的源。

l         鼠标事件

pageX pageY

案例实现：随鼠标移动的图片

<head>

    <title></title>

    <script src="js/jquery-1.4.2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $(document).mouseover(function (e) {

           $("#fly").css("left", e.pageX).css("top",e.pageY);

            });

        });

    </script>

</head>

<body>

<div id="fly" style="position:absolute"><img src="136689109.jpg" height="20" width="20"/></div>

</body>
相关阅读:
mongodb 简单的更新语句
 centos　安装ffmpeg　及h264编码打包
 mongodb $where查询
 javascript 上传进度条
 javascript 仿豆瓣读书笔记
 js监听浏览器剪贴板
 ffmpeg相关操作
 ffmpeg未整理好，有时间整理下
 fffmpeg 提取pcm
ffmpeg转MP4 moov头在前命令
原文地址：https://www.cnblogs.com/luodao1991/p/2824074.html