java学习【web基础-jQuery】

最新推荐文章于 2020-11-10 19:52:39 发布

huiyan_edu

最新推荐文章于 2020-11-10 19:52:39 发布

阅读量248

点赞数

本文链接：https://blog.csdn.net/huiyan_edu/article/details/75099598

版权

一. jQuery快速起步
1.引入的例子

<!DOCTYPE HTML>
<html>
    <head>
        <script src="all.js"></script>
    </head>

    <body>
        <script>
            outln("java");
            out("大家好！");
        </script>
    </body>



</html>

function out(str){
    document.write(str);
}


function outln(str){
    document.write(str + "<br />");
}

2.对比jQuery代码和原生代码
java为编译执行
jQuery为解释执行（故div标签必须在script标签上方）

将jquery-2.0.2.min.js正式引入

<script src="jquery-2.0.2.min.js"></script>

边框：border:#000000

分别代表红，绿，蓝（RGB，最小00，最大ff，为16进制；如果恰好均成对出现如“#112233”，可以简写为“#123”）

加动画的时候可以加时间限制:

$("#d1").slideUp("slow").slideDown("slow");
$("#d1").slideUp(3000).slideDown(3000);

<!DOCTYPE HTML>
<html>
    <head>
        <script src="jquery-2.0.2.min.js"></script>
        <style>

            #d1{
                width:100px;
                height:100px;   
                border:#ff0000 solid 1px;
            }
        </style>
    </head>

    <body>

        <div id="d1">
            好好学习，天天向上！
        </div>


        <script>
            /*
            var d1 = document.getElementById("d1");
            d1.innerHTML = "abc";
            */

            var d1 = $("#d1");
            d1.html("5678");
            $("#d1").slideUp(3000).slideDown(3000);
        </script>

    </body>

</html>

二. css方法的使用
css()是一个jQuery中的方法，它既是getter又是setter

传2个参数为设置，传一个参数为获取

$("#d1").css("box-shadow","-5px 5px 5px black");
alert($("#d1").css("font-size"));

边框变圆角

$("#d1").css("border-radius","20px");
当为宽的一半时，为正圆

加阴影

box-shadow:5px 5px 5px black;
5像素向右，5像素向下，5像素模糊度，颜色为黑色
当为负值时，方向取反

可以链式调用

$("#d1").css("font-size","20px").css("border-radius","20px").css("box-shadow","-5px 5px 5px black");

<!DOCTYPE HTML>
<html>
    <head>
        <script src="jquery-2.0.2.min.js"></script>
        <style>

            #d1{
                width:100px;
                height:100px;   
                border:#ff0000 solid 1px;
            }
        </style>
    </head>

    <body>

        <div id="d1">
            好好学习，天天向上！
        </div>


        <script>

            $("#d1").css("font-size","20px");
            $("#d1").css("border-radius","20px");
            $("#d1").css("box-shadow","-5px 5px 5px black");
            alert($("#d1").css("font-size"));

        </script>       
    </body>
</html>

三. jQuery对象与DOM对象之间的相互转换
3.1什么是jQuery对象

jQuery对象是通过jQuery包装DOM对象后产生的对象
如果一个对象是jQuery对象,那么它就可以使用jQuery里的方法,比如
$(“#test”).html()
以上代码等价于以下代码
document.getElementById(“test”).innerHTML;
虽然jQuery对象是包装DOM对象后产生的,但jQuery对象不能使用任何DOM对象的方法,同样DOM对象也不能使用jQuery中的方法,乱用会报错.

3.1.1
window.onload = function(){}
为页面全部加载完后才会被执行（即DOM树生成完）
3.1.2
每一个jQuery对象都是一个数组对象

<!DOCTYPE HTML>
<html>
    <head>
        <script src="jquery-2.0.2.min.js"></script>
        <style>

            div{
                width:100px;
                height:100px;   
                border:#ff0000 solid 1px;
            }
        </style>
    </head>

    <body>
        <script>
            window.onload = function(){
                var d1 = document.getElementById("d1");
                $("div").css("color","red");

                alert($("div").length);
                alert($("#dd").length);

            }
        </script>

        <div id="d1">
            好好学习，天天向上！
        </div>

        <div id="d2">
            好好学习，天天向上！
        </div>

        <div id="d3">
            好好学习，天天向上！
        </div>
    </body>

</html>
        <script>
            alert(456);
        </script>

3.2jQuery对象转换成DOM对象

将一个jQuery对象转换为DOM对象有两种方法:
1.每一个jQuery对象都是一个数组对象,可以通过[index]的方法来得到对象的DOM对象
2.jQuery本身提供,通过get(index)方法,得到相应的DOM对象

<!DOCTYPE HTML>
<html>
    <head>
        <script src="jquery-2.0.2.min.js"></script>
        <style>

            div{
                width:100px;
                height:100px;   
                border:#ff0000 solid 1px;
            }
        </style>
    </head>

    <body>
        <script>
            window.onload = function(){
                $("div")[0].innerHTML = 

"abc";
                $("div").get(1).innerHTML = 

"456";
            }
        </script>

        <div id="d1">
            好好学习，天天向上！
        </div>

        <div id="d2">
            好好学习，天天向上！
        </div>

        <div id="d3">
            好好学习，天天向上！
        </div>
    </body>

</html>
        <script>
            alert(456);
        </script>

四. jQuery选择器
选择器是jQuery的根基,在jQuery中,对事件处理,遍历DOM和Ajax操作有依赖于选择器.

4.1jQuery基本选择器
基本选择器时jQuery中最常用的选择器,包括:(类型返回值)

#id 
    单个元素组成的集合
class   
    多个元素组成的集合
Element（标签选择器，只要可以匹配都可以）    
    多个元素组成的集合
*（所有）   
    多个元素组成的集合
selector1,selector2,selectorN（并集）
    将多个选择器匹配到的记过合并到一起后返回。

注意：网页中id只能使用一次,class能使用多次

<!DOCTYPE HTML>
<html>
    <head>
        <script src="jquery-2.0.2.min.js"></script>
        <style>

            div{
                width:100px;
                height:100px;   
                border:#ff0000 solid 1px;
            }
        </style>
    </head>

    <body>
        <script>
            window.onload = function(){
                $("ghjkl").html("你好坏！");
            }
        </script>

        <div id="d1">
            好好学习，天天向上！
        </div>

        <div id="d2">
            好好学习，天天向上！
        </div>

        <div id="d3">
            好好学习，天天向上！
        </div>

        <ghjkl>你是猪吗？</ghjkl>
    </body>

</html>

4.2 jQuery层次选择器
层次选择器可以获得:后代元素、子元素、相邻元素、兄弟元素等。

$(“form input”)
        匹配所有form标记中的input后代元素
$(“form>input”)
        匹配所有form标记中的input子元素
$(“div+span”)
        匹配所有div后面的第一个span元素
$(“#a ~ marquee ”)
        匹配id为a的元素后面的所有marquee兄弟元素

注意,如果想访问某个节点的父节点,则使用parent方法即可。

4.3基础过滤选择器

:first   
    匹配找到的第一个元素（单个元素）
:last   
    匹配找到的最后一个元素（单个元素）
:not(selector)  
    匹配符合条件以外的元素（集合）
:even 
    匹配所有索引值为偶数的元素
:odd   
    匹配所有索引值为奇数的元素
:eq     
    匹配指定索引值的元素
:gt      
    匹配大于指定索引值的元素
:lt       
    匹配小于指定索引值的元素

4.4内容过滤选择器
内容过滤选择器的过滤规则主要体现在它所包含的的子元素和文本内容上.

:contains(text)
:empty
:has(selector)
:parent

4.5属性过滤选择器
属性过滤选择器和一般的选择器有不同，它不是以:开头，而是以[]括起来的。
通过元素的属性来获取相应的元素

[attribute]
[attribute=value]
[attribute!=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]
[属性过滤器1][属性过滤器2]…[属性过滤器n]

五. jQuery的节点操作
DOM(Document Object Model 文档对象模型),一种与浏览器，平台，语言无关的接口。使用该接口可以轻松地访问页面中的所有标准组件

5.1插入节点

内部插入节点
append()从下面加
appendTo()
prepend()从上面加
prependTo()

<!DOCTYPE HTML>
<html>
    <head>
        <script src="jquery-2.0.2.min.js"></script>
        <style>

            #d1{
                width:800px;
                height:300px;   
                border:#ff0000 solid 1px;
            }
        </style>
    </head>

    <body>
        <script>
            window.onload = function(){
                $("button:eq(0)").click(function(){
                    /*
                    var m = $("<marquee>");
                    m.html("i can fly");
                    */

                    $("#d1").append($("<marquee>我飞！</marquee>"));
                });

                $("button:eq(1)").click(function(){

                    $("<marquee>我飞！</marquee>").appendTo

($("#d1"));
                });
                $("button:eq(2)").click(function(){    

                    $("#d1").prepend($("<marquee>我飞！

</marquee>"));
                });
                $("button:eq(3)").click(function(){

                    $("<marquee>我飞！</marquee>").prependTo

($("#d1"));
                });
            }
        </script>

        <div id="d1">

        </div>
        <fieldset>
            <legend>内部插入节点</legend>
            <button>append</button>
            <button>appendTo</button>
            <button>prepend</button>
            <button>prependTo</button>
        </fieldset>

    </body>

</html>

外部插入节点
after()
before()
insertAfter()
insertBefore()

5.2查找和创建节点

查找节点:
查找属性节点,通过jQuery选择器完成
查找到所需要的元素后,可以调用jQuery对象的attr方法来获取或设置它的各种html属性

创建节点
使用$()函数也可以创建节点: $(“<p></p>”),返回的是一个jQuery对象。
也可以在创建节点的同时加上属性
$(“<font color=‘red’></font>”)
$(“<marquee direction=‘left’></marquee>”)

5.3删除节点

remove():从DOM中删除所有匹配元素,这个方法的返回值是一个指向已被删除的节点的引用(被指向的节点类型是jQuery对象)。
empty():清空所有后代节点

<!DOCTYPE HTML>
<html>
    <head>
        <script src="jquery-2.0.2.min.js"></script>
        <style>

            #d1{
                width:800px;
                height:300px;   
                border:#ff0000 solid 1px;
            }
        </style>
    </head>

    <body>
        <script>
            window.onload = function(){
                $("button:eq(0)").click(function(){
                    /*
                    var m = $("<marquee>");
                    m.html("i can fly");
                    */

                    $("#d1").after($("<marquee>哈哈哈</marquee>"));
                });

                $("button:eq(1)").click(function(){
            $("<marquee>哈哈哈

</marquee>").insertAfter($("#d1"));
                });
                $("button:eq(2)").click(function(){    
        $("#d1").before($("<marquee>嘻嘻

嘻</marquee>"));
                });
                $("button:eq(3)").click(function(){
            $("<marquee>嘻嘻嘻

</marquee>").insertBefore($("#d1"));
                });
                $("button:eq(4)").click(function(){
                $("marquee").empty();
                });
                $("button:eq(5)").click(function(){
                $("marquee").remove();
                });

            }

        </script>

        <div id="d1">

        </div>
        <fieldset>
            <legend>外部插入节点</legend>
            <button>after</button>
            <button>insert after</button>
            <button>before</button>
            <button>insert before</button>
        </fieldset>

        <fieldset>
            <legend>删除节点</legend>
            <button>remove</button>
            <button>empty</button>
        </fieldset>

    </body>

</html>

注意：
var m = $(“marquee”);为选择marquee元素 var m =$ (““);为创建marquee元素
一边创建一边加内容，加样式：
var m = $(“我飞！“);

六. 武将选择特效制作

<!DOCTYPE HTML>
<html>
    <head>
        <script src="jquery-2.0.2.min.js"></script>
        <style>
            div{
                float:left; 
            }
        </style>
    </head>
    <body>

        <script>
            window.onload = function() {

                $("button:eq(0)").click(function() {
                    $("select:eq(0) option:selected").appendTo($("select:eq(1)"));
                });
                $("button:eq(1)").click(function() {
                    $("select:eq(1) option:selected").appendTo($("select:eq(0)"));
                });
                $("button:eq(2)").click(function() {
                    $("select:eq(0) option").appendTo($("select:eq(1)"));
                });
                $("button:eq(3)").click(function() {
                    $("select:eq(1) option").appendTo($("select:eq(0)"));
                }); 


                $("button:eq(4)").click(function() {

                    var a = $("select:eq(0) option");
                    var b = $("select:eq(1) option");
                    alert("p1");
                    $("select:eq(1)").append(a);
                    alert("p2");
                    $("select:eq(0)").append(b);

                    /*
                    $("select:eq(0)").append($("select:eq(1) option"));
                    $("select:eq(1)").append($("select:eq(0) option"));
                    */

                });
            }
        </script>
        <div>
            <select multiple size="5">
                <option>关羽</option>
                <option>张飞</option>
                <option>赵云</option>
                <option>马超</option>
                <option>黄忠</option>
            </select>
        </div>

        <div>   
            <button> > </button>
            <br />
            <button> < </button>
            <br />      
            <button> >> </button>
            <br />
            <button> << </button>
            <br />
            <button> >< </button>
            <br />
        </div>

        <div>
            <select multiple size="5">
            </select>
        </div>
</html>

七. 设置和获取HTML,文本和值

设置和获取某个元素中的HTML内容:html()
    该方法可用于XHTML,但不能用于XML文档
设置和获取某个元素中的文本内容:text()
    该方法即可用于XHTML,也可用于XML文档
设置和获取某个元素的值:val()
    该方法专用于具有value属性的元素（如文本框，下拉框，单选框，复选框等）

八. 常用的遍历节点方法

取得匹配节点的所有子元素组成的集合:children()
    该方法只考虑子元素，而不考虑后代元素
取得匹配元素后面紧邻的同辈元素的集合:next()
取得匹配元素前面紧邻的同辈元素的集合:prev()
取得匹配元素前后所有同辈元素:siblings()

九. 鼠标事件

<!DOCTYPE HTML>
<html>
    <head>
        <script src="jquery-2.0.2.min.js"></script>
        <style>
            div {width:300px; height:300px; border:#000 solid 1px; /*overflow:scroll;*/}
            body { cursor:none;}
        </style>
    </head>
    <body>

        <script>
            window.onload = function() {
                // 事件：  动作
                // 事件源： 动作的承受着
                // 事件处理程序:动作发生后，浏览器回调的函数。
                /*
                $("div:eq(0)").click(function() {
                    $(this).append("你还会单击?<br />");

                });
                $("div:eq(0)").dblclick(function() {
                    $(this).append("你还会双击?<br />");

                });

                $("div:eq(0)").mousedown(function() {
                    $(this).append("鼠标按下!!!<br />");

                });
                $("div:eq(0)").mouseup(function() {
                    $(this).append("鼠标释放!!!<br />");

                });

                $("div:eq(0)").mouseover(function() {
                    $(this).append("你来啦!!!<br />");

                });
                $("div:eq(0)").mouseout(function() {
                    $(this).append("你别走!!!<br />");

                });
                $("div:eq(0)").mousemove(function() {
                    $(this).append("来来我是一个菠萝<br />");

                });


                $("table:eq(0)").mouseenter(function() {   
                    alert("进入table");
                });
                $("table:eq(0)").mouseleave(function() {   
                    alert("退出table");
                });
                */


                // 演示鼠标事件对象。
                /*
                   每次鼠标事件发生时，浏览器除了会执行事件处理函数以外，还会创建一个鼠标事件对象。
                   浏览器还会把这个鼠标事件对象自动传入给事件处理函数中。该对象中存放了鼠标事件发生时
                   的鼠标坐标
                   $("div:eq(0)").mousemove(function(e) {   
                    $(this).html(e.pageX + ":" + e.pageY);
                   });
                */


                $(document).mousemove(function() {   
                    document.title = arguments[0].pageX + ":" + arguments[0].pageY;
                    $("img:eq(0)").css("position","absolute");
                    $("img:eq(0)").css("left",arguments[0].pageX);
                    $("img:eq(0)").css("top", arguments[0].pageY);
                });




            }
        </script>
        <div>

        </div>

        <table border="1" width="600" height="200">
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </table>

        <img src="lbb.jpg" width="200" height="150" />

</html>

十. 键盘事件

<!DOCTYPE HTML>
<html>
    <head>
        <script src="jquery-2.0.2.min.js"></script>
        <style>
            div {width:300px; height:300px; border:#000 solid 1px; /*overflow:scroll;*/}
            img {position:absolute;}
        </style>
    </head>
    <body>

        <script>
            window.onload = function() {
                // 事件：  动作
                // 事件源： 动作的承受着
                // 事件处理程序:动作发生后，浏览器回调的函数。
                /*
                $(document).keydown(function() {
                    document.title = '按下'
                });
                $(document).keyup(function() {
                    document.title = '释放'
                });
                */
                // 每当键盘事件发生时，浏览器都会创建一个键盘事件对象
                // 传入事件处理程序中。键盘事件对象中存放了按下的按键对应的数字


                var left=false,right=false,up=false,down=false

                $(document).keydown(function(e) {
                    switch(e.keyCode) {
                        case 65:
                            left = true;
                        break;
                        case 68:
                            right = true;
                        break;
                        case 87:
                            up = true;
                        break;
                        case 83:
                            down = true;
                        break;
                    }
                });
                $(document).keyup(function(e) {
                    switch(e.keyCode) {
                        case 65:
                            left = false;
                        break;
                        case 68:
                            right = false;
                        break;
                        case 87:
                            up = false;
                        break;
                        case 83:
                            down = false;
                        break;
                    }
                });


                var x = 0, y = 0;
                function move() {
                    document.title = new Date().getSeconds();
                    if(left) {  
                        x--;
                        $("img:eq(0)").css("left",x);
                    }
                    if(right) { 
                        x++;
                        $("img:eq(0)").css("left",x);
                    }
                    if(up) {    
                        y--;
                        $("img:eq(0)").css("top",y);
                    }
                    if(down) {  
                        y++;
                        $("img:eq(0)").css("top",y);
                    }
                }

                setInterval(move,1);
            }

        </script>
        <img src="1.jpg" />
</html>

十一. 级联菜单

<!DOCTYPE HTML>
<html>
    <head>
        <script src="jquery-2.0.2.min.js"></script>
        <style>
            div {width:300px; height:300px; border:#000 solid 1px; /*overflow:scroll;*/}
            img {position:absolute;}
        </style>
    </head>
    <body>

        <script>
            window.onload = function() {
                // 事件：  动作
                // 事件源： 动作的承受着
                // 事件处理程序:动作发生后，浏览器回调的函数。

                /*
                $("input").focus(function() {
                    $(this).val("获取焦点了");
                });
                $("input").blur(function() {
                    $(this).val("失去焦点了");
                });


                $("input").change(function() {
                    alert("改变了");
                });
                */


                $("select:eq(0)").change(function() {
                    $("select:eq(1)").empty();
                    switch($(this).val()) {
                        case "0":
                        break;
                        case "1":
                            $("select:eq(1)").append($("<option>曹操</option>"));
                            $("select:eq(1)").append($("<option>司马懿</option>"));
                            $("select:eq(1)").append($("<option>典韦</option>"));
                        break;
                        case "2":
                            $("select:eq(1)").append($("<option>刘备</option>"));
                            $("select:eq(1)").append($("<option>诸葛亮</option>"));
                            $("select:eq(1)").append($("<option>赵云</option>"));
                        break;
                        case "3":
                            $("select:eq(1)").append($("<option>孙权</option>"));
                            $("select:eq(1)").append($("<option>周瑜</option>"));
                            $("select:eq(1)").append($("<option>太史慈</option>"));
                        break;

                    }
                });

            }

        </script>
        <input type="text" />
        <input type="text" />


        <select>
            <option value="0">请选择国家</option>
            <option value="1">魏国</option>
            <option value="2">蜀国</option>
            <option value="3">吴国</option>
        </select>
        <select>

        </select>
</html>

十二. 动画基本原理

<!DOCTYPE HTML>
<html>
    <head>
        <script src="jquery-2.0.2.min.js"></script>
        <style>
        </style>
    </head>
    <body>

        <script>
            window.onload = function() {


                function showMsg(msg, w,h, time) {
                    var div = document.createElement("div");
                    div.innerHTML = msg;
                    div.style.border="#000 solid 5px";
                    div.style.backgroundColor="#ff0";
                    div.style.fontSize="20px";
                    div.style.width = w + "px";
                    div.style.height = h + "px";
                    div.style.textAlign="center";
                    div.style.lineHeight= h + "px";
                    div.style.fontWeight="bold";
                    document.body.appendChild(div);

                    var start = new Date();
                    // 制作动画特效
                    function animate() {
                        var now = new Date();                       
                        var lapse = now - start;
                        document.title = lapse;

                        //div.style.height = 200 - lapse/time*200 +"px";
                        //div.style.lineHeight = 200 - lapse/time*200 +"px";
                        div.style.opacity = 1 - lapse/time;

                        if(lapse < time) {
                            setTimeout(animate, 1);
                        } else {
                            document.body.removeChild(div);
                        }
                    }   
                    animate();
                }


                showMsg("注册成功",80,500,5000);



            }

        </script>
    </body>
</html>

huiyan_edu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
java学习【web基础-jQuery】

一. jQuery快速起步 1.引入的例子<!DOCTYPE HTML><html> <head> <script src="all.js"></script> </head> <body> <script> outln("java"); out("大家好！"); </scri
复制链接

扫一扫