JQuery课堂学习笔记

本文涉及的产品
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
简介: 版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/78412841 ...
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/78412841

第1课 JQuery技术简介

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://"

            + request.getServerName() + ":" + request.getServerPort()

            + path + "/";

%>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>">

 

<title>My JSP 'index.jsp' starting page</title>

 

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0">

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="This is my page">

<!--

    <link rel="stylesheet" type="text/css" href="styles.css">

    -->

 

<script type="text/javascript" src="js/jquery-1.8.3.js" charset="utf-8"></script>

 

<script type="text/javascript">

    $(function() {

        //alert("Jquery testing……………………")

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

            alert($("#un").val());

            $("div").click(function() {

                $(this).hide("");

            });

        });

    });

</script>

</head>

 

<body>

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

    <input type="button" id="btn" value="show" />

    <div>1212112我是一个中国人1212112我是一个中国人1212112我是一个中国人1212112我是一个中国人1212112我是一个中国人1212112我是一个中国人1212112我是一个中国人1212112我是一个中国人1212112我是一12112我是一个中国人1212112我是一个中国人1212112我是一个中国人1212112我是一个中国人1212112我是一个中国人1212112我是一个中国人1212112我是一12112我是一个中国人1212112我是一个中国人1212112我是一个中国人1212112我是一个中国人1212112我是一个中国人1212112我是一个中国人1212112我是一12112我是一个中国人1212112我是一个中国人1212112我是一</div>

</body>

</html>

第2课 JQueryReady

    //这里面是一个匿名函数

    $(document).ready(function (){

        alert("网页加载完毕");

    });

    

    //方法二

    $(document).ready(myready);

    function myready(){

        alert("文件加载完毕");

    }

 

<script type="text/javascript">

    $(function() {

        //alert("Jquery testing……………………")

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

            alert($("#un").val());

            $("div").click(function() {

                $(this).hide("");

            });

        });

    });

 

    //这里面是一个匿名函数

    //在所有的Dom元素加载完成后, 就会显示特效

    $(document).ready(function() {

        alert("网页加载完毕");

    });

 

    //方法二

    //可以实现页面较高的响应速度

    $(document).ready(myready);

    function myready() {

        //alert("文件加载完毕");

    }

 

    //js直接来

    window.onload = function() {

        alert("onload111");

    };

    

    //会自动把前面的响应事件覆盖掉

    //只有等网页都加载完毕了才会出现特效

    window.onload = function() {

        alert("onload222");

    };

 

    //把window也加载成为JQuery对象

    $(window).load(function() {

        alert("window onload have ready!");

    });

    //加载方式三,$()其实就是一个函数

    $(function() {

        alert("ready3333");

    });

</script>

第3课 JQuery内置函数

    //类似遍历元素, 对每个元素重新赋值, 再返回

    var array = [ 3, 4, 5 ];

    //对array中的每一个元素*2, 得到一个新数组

    var array2 = $.map(array, function(item) {

        return item * 2;

    });

    alert(array2);//6 8 10

 

    //定义一个JSon数据

    var dict = {

        "name1" : "zhansan",

        "name2" : "lisi"

    };

 

    //如果用for循环去便利, 会麻烦很多

    $.each(dict, function(key, value) {

        //可以遍历json数据

        alert("key: " + key + "value: " + value);

    });

 

    //用each对数组进行遍历

    var arr = [ 3, 4, 5 ];

    $.each(arr, function(key, value) {

        alert("key: " + key + "value: " + value);

    });

 

    //item指的是key(数组下标)

    $.each(arr, function(item) {

        alert("item: " + item); //0 1 2

    });

 

    //不加参数, 获取的数组的元素值

    $.each(arr, function() {

        alert(this); //3 4 5

    });

    

    //this指的是当前操作数据对象中的元素

    $.each(dict, function() {

        alert(this);

    });

    //【注意:】普通数组推荐用无参方法, 对于json数据实验key, value方式进行遍历即可

 

第4讲 JQuery对象、Dom对象

    $(function() {

        //$("#div1")把Dom对象转换成为JQuery对象,(取出HTML文件中的所有文字)

        var con = $("#div1").html();

        window.alert(con);

        //两种方法是等价的, document.getElementById("div1")获取到的是dom对象

        var con2 = document.getElementById("div1").innerText;

        window.alert(con2);

        window.alert(document.getElementById("div1").innerHTML);

 

        //注意jquery对象也不能调用dom方法

        alert($("#div1").innerHTML); //error

 

        //Jquery赋值

        $("#div1").html("<a href='http://www.baidu.com'>百度首页</a>");

        //让JQuery对象隐藏

        //$("#div1").hide("");

        //注意区分Array是JS本身的对象, 不是Dom对象, 因此无需将其转换为JQuery对象才能使用

        //将JQuery对象转换成为一个dom对象

        var jObj = $("#div1");

        //将dom对象转换成为JQuery对象

        var dObj = $(jObj)[0];

        var dObj2 = $(jObj).get(0);

 

        alert(jObj.html());

        //获取对象上的HTML源代码

        alert(dObj.innerHTML);

        //获取对象上的文本

        alert(dObj2.innerText);

 

        //修改JQuery对象样式

        $(function() {

        //修改元素的属性值

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

            //读取元素属性的值

            alert($("#div1").css("background-color"));

            $("#text").val(new Date().toLocaleString());

            alert($("#text").val());

            

            $("#div1").html("<a href='#'><font color=yellow size=5>"+new Date().toLocaleString()+"</font></a>");

            alert($("#div1").text);

            alert($("#div1").text());

        });

    

    });

 

第5讲 JQuery选择器

//JQuery选择器(id选择器 TagName选择器)

    //如果直接在这里就开始对p标签注册监听, 就不会出现效果,

    //【原因】程序自上而下执行, 执行到这里的时候, 还没有找到p标签对象(只有dom元素解析完毕的时候我才能找到p标签)

    //【解决方案】1.利用JQuery()来解决 2.把这一块的代码移植到p标签的下面即可 3.在dom中可以使用onload=initEvent()也可解决

    $("p").click(function() {

            alert("我是p标签!");

        }); //error

    function initEvent1(){

    //取出所有的p标签, 这也是一个隐式迭代, 给所有取出的p标签增加click事件响应

        $("p").click(function() {

            alert("我是p标签!");

        });

        var p =document.getElementsByTagName("p");

        alert(p.length);

    }

    

    //当页面加载完成ready之后, 对这些标签添加监听事件

    $(function() {

        $("p").click(function() {

            alert("我是p标签!"); //ok

        });

    });

    $("#div").html();

 

 

    //JQuery选择器(id选择器 TagName选择器)

    //如果直接在这里就开始对p标签注册监听, 就不会出现效果,

    //【原因】程序自上而下执行, 执行到这里的时候, 还没有找到p标签对象(只有dom元素解析完毕的时候我才能找到p标签)

    //【解决方案】1.利用JQuery()来解决 2.把这一块的代码移植到p标签的下面即可 3.在dom中可以使用onload=initEvent()也可解决

    $("p").click(function() {

        alert("我是p标签!");

    }); //error

    function initEvent1() {

        //取出所有的p标签, 这也是一个隐式迭代, 给所有取出的p标签增加click事件响应

        $("p").click(function() {

            alert("我是p标签!");

        });

        var p = document.getElementsByTagName("p");

        alert(p.length);

    }

 

    //当页面加载完成ready之后, 对这些标签添加监听事件

    $(function() {

        $("p").click(function() {

            alert("我是p标签!"); //ok

        });

    });

    //$("#div").html();

 

    //对所有的类选择器名称为test的标签增加click事件

    $(function() {

        //指定类选择器监听

        $(".test").click(function() {

            alert($(this).text());

        });

    });

//Jquery多条件选择器[注意选择器表达式中的空格不能多也不能少, 易错点!!]

    $(function() {

        $("p, div, span").click(function() {

            alert("p, dic, span选择器都被监听了!!!");

        });

 

    });

 

    //层次选择器

    $(function() {

    //获取div下面的所有li元素

        alert($("div li").length); //2

        //获取div下面的直接li子元素

        alert($("div > li").length); //1

        //获取样式名为test之后的第一个div元素

        alert($(".test + div").length); //0

        //获取样式名为test之后的所有div元素

        alert($(".test ~ div").length); //2

    });

 

# 对应ID选择器

. 对应class选择器

第6课 JQuery的隐式迭代

    //JQuery的隐式迭代, 不会报错(让页面尽可能少报错误!!)

    $(function() {

    //調錯技巧

        var elements = $("#btn1");

        if (elements.length <= 0) {

            alert("没有找到指定的按钮!!!");

            //退出该语句

            return;

        }

        /*$("#btn").mouseover(function() {

 

            alert("鼠标移动上来了!");

        });*/

else {

            elements.mouseover(function() {

 

                alert("鼠标移动上来了!");

            });

        }

    });

第7课 节点遍历

    //Jquery节点遍历

    $(function() {

        $("p").click(function() {

            //获取当前的dom节点,转为JQuery对象

            //获取下一个节点中的文本

            var text = $(this).next().text();

            alert("我正在节点遍历呢: " + text);

            //获取下一个p节点(紧挨着的第一个元素)

            var p = $(this).next("p").text();

            alert("获取下一个p节点" + p);

            alert("nextall() " + $(this).nextAll().text());

            alert("nextall() " + $(this).nextAll("p").text());

        });

    });

 

    /*

    $.each(dict, function(key, value) {

        //可以遍历json数据

        alert("key: " + key + "value: " + value);

    });

     */

 

    //点击一个节点, 其后的所有节点都变色

    $(function() {

        //获取所有的p元素

        $("p").click(function() {

            //获取所有的p节点,这个this指的是我当前点击的div

            var nodeP = $(this).nextAll("p");

 

            //开始遍历点击标签后面的所有节点

            $.each(nodeP, function() {

                alert("this is" + this.innerText);

                alert("this2 is" + $(this).text());

            });

            //开始用each进行遍历

            $.each(nodeP, function() {

                //此时的this指的就是元素【当前点击元素后面的div】

                //alert(nodeP.text()), 对每个div改变css样式;

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

            });

        });

    });

 

    //代码优化后1

    $(function() {

        $("p").click(function() {

            $.each($(this).nextAll("p"), function() {

                //$.each($(this)迭代会很麻烦

                $(this).css("color", "orange");

                $(this).css("font-size", "25");

            });

        });

    });

 

    //代码优化后2

    $(function() {

        $("p").click(function() {

            //此处无需利用each进行再次迭代, $(this).nextAll("p")这个方法中隐藏迭代了

            $(this).nextAll("p").css("background", "pink");

        });

    });

 

    //siblings测试:获取所有的同辈元素

    //点击一个元素, 自己变白, 其他元素变红

    $(function() {

        $("p").click(function() {

        //当前的元素变白

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

            //让其他所有的元素变pink(这里是自己的兄弟们都变色)

            $(this).siblings("p").css("background", "pink");

        });

    });

第8课 JQuery链式编程

    //JQuery链式编程

    $(function() {

        $("p").click(

                function() {

                    //链式编程

                    $(this).css("background", "white").siblings("p").css(

                            "background", "pink");

                });

    });

 

    //该功能实现点击那个那个变色

    $(function() {

        $("#rating td").html("<img src='images/star1.jpg' />").mouseover(

                function() {

                    //先把所有的

                    //$("#rating td").siblings("#rating td").html("<img src='images/star1.jpg' />");

                    //$(this).html("<img src='images/star2.jpg' />");

 

                });

 

    });

 

    //实现点击的图片之后的星星都变色

    $(function() {

        $("#rating td").html("<img src='images/star1.jpg' />").mouseover(

                function() {

                    //$("#rating td").html("<img src='images/star2.jpg' />");

                    //$(this).nextAll().html("<img src='images/star.jpg' />");

                });

 

    });

 

    $(function() {

        $("#rating td").html("<img src='images/star1.jpg' />").mouseover(

                function() {

                    $(this).siblings().html("<img src='images/star2.jpg' />");

                    

                    //这里存在的问题就是最后一个不行

                    $(this).nextAll().html("<img src='images/star1.jpg' />");

                });

    });

第9课 JQuery过滤选择器

$(function() {

        //第一行为大字体

        $("#table1 tr:first").css("font-size", "30px");

        //正文前三行大字体(gretter_than, less_than);lt(5)是从gt(0)中取出的新序列的编号

        $("#table1 tr:gt(0):lt(5)").css("font-size", "18px");

        //最后一行, 红色字体

        $("#table1 tr:last").css("color", "red");

 

        //奇數行变红(大于0的奇数行)【表头不算】, gt(0)用于去掉表头

        $("#table1 tr:gt(0):even").css("color", "blue");

        //偶数行变黄[中间的内容部分]

        $("#table1 tr:gt(0):lt(5):odd").css("color", "yellow");

    });

    //如果用Dom实现呢??

    $(function() {

        //var aa = document.getElementById("table1");

        var bb = document.getElementsByTagName("td");

        //alert(aa.length + " " + bb.length);

        for (var i = 0; i < bb.length; i++) {

            //alert(bb[i].innerText);

            //bb[i]相当于是所有的td对象

            if (bb[i].innerText == "80") {

                //bb[i].style.size = "10px";

                bb[i].innerText = "DOM测试中………………";

                bb[i].onclick = function() {

                    alert("我也注册监听了");

                };

                bb[i].onmouseover = function() {

                alert("鼠标注册监听事件成功!!!");

                };

            }

        }

    });

 

    $(function() {

        //div1的事件

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

            //相对于当前元素

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

        });

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

            //相对于当前元素,第二个参数传入了一个JQuery对象, 表示相对于这个对象为基准进行相对的选择

            $("ul", $(this).css("background", "yellow"));

        });

 

        //修改点击行td的背景色

        $("#table1 tr").click(function() {

            //设置我选择行的所有td的背景色

            $("td", $(this).css("background", "green"));

 

        });

    });

 

    //#表示按照id進行選擇, 如果什麼都不寫, 就按照tagName进行选择

<h1>基本过滤选择器</h1>

    <table id="table1"

        style="border:1px solid red; border-collapse: collapse;">

        <tr>

            <td>姓名</td>

            <td>成绩</td>

        </tr>

        <tr>

            <td>zhansan</td>

            <td>98</td>

        </tr>

        <tr>

            <td>lisi</td>

            <td>95</td>

        </tr>

        <tr>

            <td>wangwu</td>

            <td>87</td>

        </tr>

        <tr>

            <td>zhaosi</td>

            <td>79</td>

        </tr>

        <tr>

            <td>zhouzhu</td>

            <td>60</td>

        </tr>

        <tr>

            <td>平均分</td>

            <td>80</td>

        </tr>

    </table>

 

    <h2>相对定位</h2>

    <div style="border: 1px solid red">

        <div id="div1">

            <ul>

                <li>abcdefgh123456</li>

                <li>abcdefgh123456</li>

                <li>abcdefgh123456</li>

                <li>abcdefgh123456</li>

                <li>abcdefgh123456</li>

            </ul>

        </div>

    </div>

    <div style="border: 1px solid blue">

        <div id="div2">

            <ul>

                <li>abcdefgh123456</li>

                <li>abcdefgh123456</li>

                <li>abcdefgh123456</li>

                <li>abcdefgh123456</li>

                <li>abcdefgh123456</li>

            </ul>

        </div>

    </div>

 

    //#表示按照id進行選擇, 如果什麼都不寫, 就按照tagName进行选择

    $(function() {

 

        /*         $("input[value='show']").click(function() {

         //alert($("input:cheked").val()); //error

         $("input:checked").css("background-color", "red");

         }); */

        //alert("ok");

        $("input[value=show]").click(function() {

            //alert("ok");

            //注意input:checked之间不能有空格

            $("input:checked").css("background", "red");

            alert($("input:checked").val());

        });

    });

第10课 Each的使用

//Each的使用

    $(function() {

        $("input[name=names]").click(function() {

            var arr = new Array();

            //对选中的元素进行each遍历, 这里的value就是选中的文本框对象

            $("input[name=names]:checked").each(function(key, value) {

                arr[key] = $(value).val();

                //alert(key+" "+value); //注意key是从0开始的

            });

            //把数组元素取出来, 并用逗号隔开

            $("#name").text("您共选择了"+arr.length+"项:"+arr.join(","));

        });

    });

 

 

<input type="checkbox" value="北京" name="names" />北京

    <br />

    <input type="checkbox" value="北京" name="names" />北京

    <br />

    <input type="checkbox" value="北京" name="names" />北京

<p id="name"></p>

 

第11课 JQuery表单选择器

 

    //取出所有可以提交到服务器的表单

    $(function(){

        //获取所有的单行文本框

        var aa = $(":text");

        //获取所有的inout, textarea,select, button

        var bb = $(":input");

        var cc = $(":password");

        alert(cc.length);

        

 

        $("input[type=text]").click(function(){

        

            alert("text listening………………");

        });

        $(":input").click(function(){

            alert("input listening………………");

        });

    });

第12课 JQuery的Dom操作

    $(function() {

        $("a:first").attr("href", "http://www.baidu.com");

        $("a:eq(1)").attr("href", "http://www.baidu.com");

        $("a:eq(5)").attr("href", "http://www.baidu.com");

    });

 

    <a href="">图片1</a>

    <a href="">图片2</a>

    <a href="">图片3</a>

    <a href="">图片4</a>

    <a href="">图片5</a>

    <a href="">图片6</a>

$(function() {

        $("a:first").attr("href", "http://www.baidu.com");

        $("a:eq(1)").attr("href", "http://www.baidu.com");

        $("a:eq(5)").attr("href", "http://www.baidu.com");

    });

 

    //动态创建dom节点

    $(function() {

        //创建

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

        //添加到div(动态加载网站列表 , 动态分页)

        //$("div:last").append(link);

        var img = $("<br/><img src='images/star2.jpg'/>");

        //$("div:last").append(img);

        //$()创建的就是JQuery对象

        var input = $("<input type=text value='create node'/>");

        //$("div:last").append(input);

    });

 

    //动态创建表格

    $(function() {

        var data = {

            "baidu" : "http://www.baidu.com",

            "Sina" : "http://www.sina.com"

        };

 

        //动态加载数据并创建【动态加载网站列表, 动态无刷讯页面】

        $.each(data, function(key, value) {

            var tr = $("<tr><td>" + key + "</td><td><a href="+value+">" + key

                    + "</a></td></tr>");

            ;

            $("#table").append(tr);

            //$("#table").prepend(tr);

        });

    });

 

 

<h1>JQuery的Dom操作</h1>

    <a href="">图片1</a>

    <a href="">图片2</a>

    <a href="">图片3</a>

    <a href="">图片4</a>

    <a href="">图片5</a>

    <a href="">图片6</a>

 

    <h2>动态创建Dom节点</h2>

    <div style="border: 1px solid red; height: 200px;"></div>

    <table id="table"></table>

    <ul>

        <li>aaaaa</li>

        <li class="testitem">aaaaa</li>

        <li>aaaaa</li>

        <li>aaaaa</li>

        <li class="testitem">aaaaa</li>

    </ul>

    <ul id="test2">

        <li>bbbb</li>

    </ul>

 

    <input type="button" value="removeUL" id="remove" />

//实现点击按钮删除指定UL

    $(function() {

 

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

            //alert("ok");

            //书暗中ul中有testitem样式的元素

            var list = $("ul li.testitem").remove();

            //可以把移除的元素添加到新的节点上面,接在第二个IDtest2上面

            $("#test2").append(list);

        });

    });

 

    //权限管理界面

    $(function() {

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

            var items = $("select option:selected").remove();

            $("#select2").append(items);

        });

    });

 

 

<h2>权限管理界面</h2>

    <div style="float: left; border: 1px solid red; width: 250px;">

        <select multiple="multiple" style="float:left;">

            <option>添加</option>

            <option>修改</option>

            <option>查询</option>

            <option>删除</option>

            <option>打印</option>

        </select>

        <div style="float: left; width: 50px;">

            <input type="button" value=">" id="add" /> <br> <input

                type="button" value=">" /> <br>

        </div>

        <div style="float: left;width: 50px;">

            <select style="float:left;" multiple="multiple" id="select2"></select>

        </div>

    </div>

第13课 JQuery练习题

//计算器

    $(function() {

 

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

            //注意这里面不要使用$("#text1").value, 不要使用dom的方法在JQuery中去使用

            //使用JQuery的【方法】去获取他的数值

            //注意val是方法, 不是属性;$("#text1")是一个JQuery对象

            //【总结:】使用的时候注意看清楚对象是一个Dom对象还是一个JQuery对象即可!

            var num1 = $("#text1").val();

            num1 = parseInt(num1);

            var num2 = $("#text2").val();

            num2 = parseInt(num2);

            //错误说法    :JQuery如何将字符串转换成int???

            //可笑说法:JQuery要干掉JavaScript???

            //var result = $("#text1").val() + $("#text2").val(); error(默认会当做是字符串进行加减)

            var result = num1 + num2;

            $("#text3").val(result);

            //document.getElementById("text3").value = result; [JQuery与Dom混着用么偶问题, 但是尽量不要这么做!!!]

        });

    });

 

<h2>计算器</h2>

    <input type="text" id="text1" />+

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

    <input type="button" value="=" id="eq">

    <input type="text" id="text3">

    <br>

    <input type="button" value="开始计算">

 

//不用问在JQuery中如何使用JavaScript中的****

    //用户注册

    var leftSecond = 10;

    var intervalId ;

    $(function(){

    //可以使用attr来设置JQuery没有封装的属性

    //使得一个按钮变为不可以使用的状态

        $("#btnReg").attr("disabled", "true");

        intervalId = setInterval(countDown, 1000);

    });

    

    //给function抱一个 $()的意思是让他在把所有的dom元素加载完成的时候在执行

    //这是一个普通的函数

    

    function countDown(){

        if (leftSecond <= 0){

            $("#btnReg").val("同意");

            $("#btnReg").attr("disabled", false);

            //时间为0的时候就清空定时器

            clearInterval(intervalId);

            //退出循环

            return ;

        }

        else{

        //alert(leftSecond);

            leftSecond --;

            $("#btnReg").val("请仔细阅读"+leftSecond+"秒");

        }

    }

 

<h2>用户注册</h2>

    <textarea rows="20" cols="30"></textarea>

    <input type="button" id="btnReg" value="同意" />

 

    //发布帖子案例[无刷新评论]

    $(function(){

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

            var title = $("#title").val();

            var body = $("#textbody").val();

            var tr = $("<tr><td>"+title+"</td><td>"+body+"</td></tr>");

            $("#tbContent").append(tr);

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

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

        });

    });

 

<h2>无刷新评论</h2>

    <p>这是我的第一个帖子,哈哈!</p>

    <table id="tbContent">

        <tr>

            <td>匿名</td>

            <td>沙发</td>

        </tr>

    </table>

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

    <br />

    <textarea id="textbody" rows="30" cols="30"></textarea>

    <br />

    <input type="button" value="发表评论" id="btnPost" />

 

 

//文本框案例【如果文本框的内容为空就显示为红色, 有内容就显示为白色】

    $(function() {

        //获取所有的文本框[会触发鼠标焦点离开时的事件]

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

            //这个this指的是发生事件的文本框

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

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

            } else {

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

            }

 

        });

    });

 

    //篮球案例[鼠标移动上去就变色]

    $(function() {

        //链式编程

        $("#ul1 li").css("cursor", "pointer").mouseover(

                function() {

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

                            "background", "white");

                }).click(function() {

                //先去掉点击的空间样式, 然后在附加上去

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

        });

    });

 

 

第14课 节点操作

 

//标签替换案例

    $(function(){

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

        //把br标签替换为hr标签【可以实现批量添加操作】

            $("br").replaceWith("<hr/>");

        });

    });

 

    //标签替换案例

    $(function(){

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

        //把br标签替换为hr标签【可以实现批量添加操作】

            $("br").replaceWith("<hr/>");

            //把标签用另外一个便签包裹[让所有的p便签都让 font标签包裹起来]

            $("p").wrap("<font color='red' size='10px'></font>");

        });

    });

 

<h1 style="float: left; width: 1300px">节点操作</h1>

    <div style="border: 1px solid red; float: left;">

        <p>haha</p><br /><p>017</p><br />7<br />22

        <br/>

        <input type="button" value="标签替换测试" id="labeltest"/>

    </div>

 

第15课 样式操作

/* //给页面中的所有便签使用该样式

input{

    font-size: 20px;

}

body{

    filter:gray;

} */

.testitem {

    background: red;

    color: yellow;

}

 

.class1 {

    border: 5px solid red;

    float: left;

    background: red;

    width: 20px;

    height: 50px;

}

 

.class2 {

    font-size: 20px;

    border: 5px solid red;

    float: left;

    background: yellow;

    width: 20px;

    height: 50px;

}

 

.day {

    background: white;

    filter: gray;

}

 

.night {

    background: black;

}

 

 

//标签替换案例

    $(function() {

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

            //把br标签替换为hr标签【可以实现批量添加操作】

            $("br").replaceWith("<hr/>");

            //把标签用另外一个便签包裹[让所有的p便签都让 font标签包裹起来]

            $("p").wrap("<font color='red' size='10px'></font>");

        });

    });

 

    //动态增加样式【网页开关灯效果】---》》并不会影响其他样式

    $(function() {

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

            //对div5添加class样式

            $("#div5").addClass("class1");

            //修改样式

            //$("#div5").addClass("class2");

 

        });

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

            //移除样式[有样式就删除, 没有该样式就添加]

            $("#div5").toggleClass("class1");

        });

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

            //移除样式

            $("#div5").removeClass("class1");

        });

    });

 

//开关灯效果

    $(function() {

 

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

            //网页默认为白色, 有就创建黑色, 否则就删除

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

            if ($(document.body).hasClass("day")) {

                $(document.body).removeClass("day");

                alert("删除白天class成功!");

            } else {

                alert("未发现白天的类!");

            }

        });

    });

    

    $(function() {

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

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

        });

    });

 

//点击表格行, 被点击的高亮显示

    $(function() {

        $("table tr").click(

                function() {

                    $(this).addClass("tablecolor").siblings().css("cursor",

                            "pointer").removeClass("tablecolor");

                });

    });

 

//聚焦的控件高亮的显示

    $(function() {

        //取得body下面的所有控件

        $("body *").click(

                function() {

                    $(this).addClass("tablecolor").siblings().css("cursor",

                            "pointer").removeClass("tablecolor");

                });

    });

 

【软件补充】IECollection该软件可以实现几乎所有版本的不同IE浏览器版本

 

//搜索框案例

    $(function() {

        $("#keyword").val("请输入关键词").addClass("waiting").blur(function() {

            //焦点离开的时候

            if ($(this).val() == "") {

                $("#keyword").val("请输入关键词").addClass("waiting");

            }

        }).focus(function() {

    //聚焦的时候

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

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

            }

        });

    });

 

第16课 Radiobutton的操作

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

            //alert("haha");

            //设置默认选中的Radio, 注意val中的[]也不能少

            $(":radio[name=sex]").val([ "male" ]);

            //alert($(":radio[name=sex]:checked").val());

            alert("ok");

 

            //对checkbox的选中

            $(":checkbox").val([ "北京", "上海" ]);

            //选中特定的一个项[单独设定广州]

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

        });

    });

//全选, 不选, 反选

    $(function() {

        //alert("ok");

        //有:回去找他的标签, 没有:是去找他自己的子标签

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

            alert("ok");

            $(":checkbox").attr("checked", true);

        });

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

            $(":checkbox").attr("checked", false);

        });

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

            $(":checkbox").each(function() {

                //对他的每个状态取反

                $(this).attr("checked", !($(this).attr("checked")));

 

            });

        });

    });

 

第17课 JQuery事件

    //JQuery事件

    $(function() {

        /*

            $("#action").mouseover(function() {

                $(this).text("客官来了");

            });

            $("#action").mouseleave(function() {

                $(this).text("大爷慢走");

            });

         */

        //事件的合成

        $("#action").hover(function() {

            $(this).text("大爷来了!");

 

        }, function() {

            $(this).text("大爷慢走哈!");

        });

    });

 

    //事件冒泡

    $(function() {

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

            alert("p");

        });

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

            alert("tr");

        });

        

        //阻止事件冒泡, e表示的就是这个window.event对象

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

            alert("td");

            //组织事件继续往上冒泡

            e.stopPropagation();

        });

    });

 

    //JQuery事件2

    $(function() {

        $("a").click(function(e) {

            alert("link have stopped!");

            //会取消超链接的跳转

            e.preventDefault();

        });

    });

    //空数据禁止提交

    $(function() {

        $(":submit").click(function(e) {

            var len = $("#submitText").val().length;

            if (len <= 0) {

                alert("用户名不能为空!!!");

                //会阻止表单的提交

                e.preventDefault();

            }

        });

    });

    //JQuery其他事件

    $(function(){

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

            alert(e.pageX+" "+e.pageY);

            alert($(e.html()));

            alert($(e.target()).html());

        });

        //target指的就是冒泡的事件源

        //this指的是当前触发该事件 的那个对象

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

            alert($(e.html()));

            alert($(e.target()).html());

        });

        //注意keycode和charcode, 小键盘的keyCode和主键盘的keyCode不一样; charCode(两者的ASCII码是一样的)

    });

    //一次性事件

    $(function(){

        $("#btnonce").one("click", function(){

            alert("我是一个一次性事件");

        });

    });

//事件的绑定

$("#btnonce").bind("click", function(){

            alert("hahahhaha");

        });

第18课 JQuery鼠标

//JQuery鼠标(跟着鼠标飞的图片)

    $(function(){

    //注意body知识元素的显示范围, document是整个文档

    //$("body").mousemove(function(e){

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

            //要让图片移动, 首先必须要把图片设置为绝对定位

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

        });

    });

 

<img src="images/star2.jpg" id="img2" style="position: absolute;"/>

 

<script type="text/javascript">

    var data = {

        "images/0011.jpg" : [ "images/001.jpg", "风景1", "风景很美" ],

        "images/0022.jpg" : [ "images/002.jpg", "风景2", "风景很美" ],

        "images/0033.jpg" : [ "images/003.jpg", "风景3", "风景很美" ]

    };

    //图片解析

    $(function() {

        $.each(data, function(key, value) {

            //alert(key + " ;" + value);

            //先取出小图片的路径

            var smallImage = $("<img src="+key+" />");

            smallImage.attr("imgpath", value[0]);

            smallImage.attr("imgname", value[1]);

            smallImage.attr("imgintro", value[2]);

 

            //对每一个小图片设置鼠标监听事件

            smallImage.mouseover(function(e) {

                //设置大图的详细信息

                $("#detailImg").attr("src", $(this).attr("imgpath"));

                $("#detailHeight").text($(this).attr("imgname"));

                $("#detailNmae").text($(this).attr("imgintro"));

                //设置样式

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

                        "display", "");

            });

            $("body").append(smallImage);

            

            });

            

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

                $("#details").css("display", "none");

        });

    });

</script>

 

</head>

 

<body>

    <h1>图片解析图</h1>

 

    <div style="display: none; positon: absolute;" id="details">

        <img id="detailImg" src="" />

        <p id="detailHeight"></p>

        <p id="detailNmae"></p>

        <p>

            <input type="button" value="关闭" onclick="hideDetails()" id="hideDetail"/>

        </p>

    </div>

 

</body>

</html>

 

 

 

【正宗代码】

<style type="text/css">

body{

    pading:0;

    margin:0;

    height:1000px;

}

#box {

    position: absolute;

    top: 50px;

    left: 130px;

    display: none;

}

 

li {

    width: 250px;

    height: 130px;

    margin: 20px;

    border: 1px solid gray;

}

</style>

<script type="text/javascript" src="js/jquery-1.8.3.js" charset="utf-8"></script>

<script type="text/javascript" src="js/jquery.cookie.js" charset="utf-8"></script>

 

<script type="text/javascript">

    $(function() {

        $("ul li").each(function() {

            //alert("ok");

            //对每一个li标签设置监听事件

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

                //alert($(this).children('a').attr("href"));

                var pic = $(this).children('a').attr("href");

                //alert(pic);

                var box = "<div id='box'><img src='"+pic+"' /></div>";

                $("#box").css("top", e.pageY + 10).css("left", e.pagex + 10);

                //添加元素到body

                $("body").append(box);

                //显示控件

                $("#box").show("slow");

            }).mousemove(function(e) {

                $("#box").css("top", e.pageY + 10).css("left", e.pageX + 10);

            }).mouseout(function() {

                $("#box").remove();

            });

        });

    });

    $(document).mousemove(function() {

 

    });

</script>

</head>

 

<body>

    <div id="box" style="">

        <img src="images/001.jpg" />

    </div>

    <ul>

        <li><a href="images/001.jpg"><img src="images/0011.jpg" /></a></li>

        <li><a href="images/002.jpg"><img src="images/0022.jpg" /></a></li>

        <li><a href="images/003.jpg"><img src="images/0033.jpg" /></a></li>

        <li><a href="images/004.jpg"><img src="images/0044.jpg" /></a></li>

    </ul>

</body>

</html>

第19课 动画及QQ风格空间案例

 

    //制作QQ滚动版界面

    $(function() {

        //给偶数行添加body这种样式

        $("#qq li:odd").addClass("body");

        //奇数行添加header这种样式

        $("#qq li:even").addClass("header").click(

                function() {

                    //$(this).next("li.body").show("slow").siblings("li.body").hide("slow");

                    $(this).next("li.body").show("slow").siblings("li.body")

                            .hide("slow");

                });

        //刚进来时候的效果【在这里可以模拟点击元素】

        $("#qq li:first").click();

    });

 

 

【易错点】

 

    //动态创建元素易错点

    $(function(){

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

        //只有append之后才会放入该超链接到界面上面

        $("body").append(link);

        //$("#link1").text("Google")必须放在append(创建到界面上以后, 我才可以去操作这个)

        $("#link1").text("Google");

    });

 

 

 

【方案二】

<style type="text/css">

.ul {

    display: none;

}

 

li {

    list-style: none;

    font-size: 20px;

}

 

.list .sub {

    display: none;

}

 

#nav {

    background: #69F;

    width: 200px;

    height: 350px;

}

 

/* 思路: 主要是看有没有list这个class类, 如果有, 就显示; 没有就关闭 */

#nav .list span.open {

    display: block;

    background: url(images/open.jpg) no-repeat;

}

 

#nav span {

    display: block;

    background: url(images/close.jpg) no-repeat;

}

</style>

<script type="text/javascript" src="js/jquery-1.8.3.js" charset="utf-8"></script>

<script type="text/javascript" src="js/jquery.cookie.js" charset="utf-8"></script>

 

<script type="text/javascript">

    $(function() {

        $("#nav li:has('ul')").click(function() {

            //alert($(this).html());    

            //$(this).css("cursor", "pointer").toggleClass("list");

            //根据一级菜单是否含有list这个类, 来控制显示和隐藏

            //alert($(this).hasClass("list"));

            if ($(this).hasClass("list")) {

                //删除自己的类

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

                //给同级的增加class

                $(this).siblings().addClass("list");

            } else {

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

            }

        });

    });

</script>

</head>

 

<body>

    <ul id="nav">

        <li class="list"><span class="open">国内事件</span>

            <ul class="sub">

                <li>11111</li>

                <li>11111</li>

                <li>11111</li>

            </ul></li>

        <li class="list"><span class="open">国外事件</span>

            <ul class="sub">

                <li>11111</li>

                <li>11111</li>

                <li>11111</li>

            </ul></li>

        <li class="list"><span class="open">其他事件</span>

            <ul class="sub">

                <li>11111</li>

                <li>11111</li>

                <li>11111</li>

            </ul></li>

    </ul>

</body>

</html>

第20课 利用JQuery操作Cookie

Cookie是存储在浏览器中的数据

    //JQuery cookie的使用

    //实现点击登录按钮后利用cookie记住用户名的功能

    $(function() {

        //alert("Cookie: "+$.cookie("用户名"));

        //写入数据到cooke

        //$.cookie("用户名", "WWW.XXX.COM");

        if ($.cookie("username")) {

            $("#username").val($.cookie("username"));

            alert("cookie read from file succeed!!!");

        }

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

            if ($.cookie("username")==null) {

                $.cookie("username", $("#username").val());

                //同时也可以设定网站cookie的保存时间

                alert("cookie write to file succeed!!!");

            }

 

        });

    });

 

 

    //自定义网站的背景色

    $(function() {

        //先从cookie中取出

        var color = $.cookie("color");

        //alert(color);

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

 

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

            //开始写入cookie

            $.cookie("color", "red");

 

        });

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

 

            $("body").css("background", "green");

            //开始写入cookie

            $.cookie("color", "green");

 

        });

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

 

            $("body").css("background", "yellow");

            //开始写入cookie

            $.cookie("color", "yellow");

 

        });

        $("body").css("background", color);

    });

    

    //方案二

    $(function(){

        $("#bgcolor td").click(function(){

            //alert($(this).css("background-color"));

//这里不需要在mouseover的时候再去设置背景色

            $("body").css("background", $(this).css("background-color")).css("cursor", "pointer");

        });

    });

 

 

//代码优化后

    $(function() {

        $("#bgcolor td").click(

                function() {

                    //alert($(this).css("background-color"));

                    $("body")

                            .css("background", $(this).css("background-color"))

                            .css("cursor", "pointer");

                    $.cookie("color", $(this).css("background-color"));

                });

        //下次进来的时候直接去cookie里面取出数据

        var color = $.cookie("color");

        if (color) {

            //设定cookie的保存时间

            $("body").css("background", color, {

                expires : 10

            });

        }

    });

第21课 JQuery插件

 

 

 

相关文章
|
JavaScript
jQuery学习(五)—课堂实训题专栏
jQuery学习(五)—课堂实训题专栏
|
6月前
|
前端开发 JavaScript
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
49 0
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
|
4月前
|
JavaScript 前端开发 程序员
后端程序员的前端必备-jQuery核心学习笔记
后端程序员的前端必备-jQuery核心学习笔记
60 13
|
6月前
|
JavaScript 前端开发
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
36 0
|
7月前
|
JavaScript 前端开发 API
web学习笔记(二十九)jQuery
web学习笔记(二十九)jQuery
41 0
|
7月前
|
JavaScript 前端开发 Windows
jQuery权威指南学习笔记
jQuery权威指南学习笔记
|
移动开发 JavaScript 前端开发
[HTML CSS JS ES6 JS WebAPI JQuery]学习笔记目录
[HTML CSS JS ES6 JS WebAPI JQuery]学习笔记目录
|
JavaScript 前端开发 Java
HTML+CSS+JS 学习笔记(四)———jQuery
HTML+CSS+JS 学习笔记(四)———jQuery
|
JavaScript 前端开发 索引
JavaScript学习笔记(五) jQuery
JavaScript学习笔记(五) jQuery
86 0
|
Web App开发 JavaScript 前端开发
jQuery学习笔记——jQuery基础
什么是jQuery?jQuery是一个快速、简洁的JavaScript库,其设计宗旨是“write less,do more”,倡导用更少的代码,做更多的事情。通过这段时间的学习,我感觉jQuery是一个“语法糖”,就像是包在糖果外面的包装,让js看起来更好看。