jQuery

最新推荐文章于 2025-08-02 11:32:32 发布

原创最新推荐文章于 2025-08-02 11:32:32 发布 · 383 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

产品经理

后台管理系统：就是一些web项目里面的jsp页面。
Javascript jQuery Ajax等前端技术，还要学会一种前端框架，能够熟练使用。
查看代码修改记录（都修改了哪些内容，github上面）。
静态资源解析器，添加行图片资源的解析。
jQuery 极大地简化了 JavaScript 编程。使用jQuery框架里面提供的方法。
Css引入时的路径问题
把样式提取出来，样式与显示内容分离。
在jsp页面中如何引入外部样式表？如何引入js库？<script src=></script>
样式文件没有加载到，为什么，可能是样式文件的路径问题？
前端jsp页面进行调试：选择元素，查看加载的内容，css、js、网络请求等。
F12等。
图片资源为什么没有拿到啊？报了404,因为没有配置图片资源映射，找不到对应的图片资源。
<img src="/images/bottom_sm.png" />图片资源相对路径。
Jsp页面乱码问题：没有配置jsp页面的page指令。
alert()方法
如何简写文档就绪函数？每次写很麻烦。项目中的常规写法。
Js方法的回调函数。
duplicated，重复的，冗余的。
jQuery中全是方法，别忘记()。
Ajax用来发网络请求。
jQuery noConflict() 方法会释放对 $ 标识符的控制，这样其他脚本就可以使用它了。

jQuery API 中文文档，用来查询。

监听按钮的点击事件，当点击事件触发时，调用的方法.
选择/查找某一个html元素并对其进行操作。
header paragraph
文档类型：声明文档类型，声明它是一个html文档。
html文档包括了html标签和文本内容，html文档也叫web网页。
Web浏览器的作用，用于显示html文档。
只有body标签中的内容才会显示在浏览器中。
.html的文件扩展名
h 数字越大，字体越小
a标签，链接标签：文本显示以及链接的地址 href=
img 标签，src 指向图片的具体地址图片的名称和尺寸是以属性的形式给出
br/。标签一般使用小写
属性是为html元素提供的附加信息。
html 属性的特征
大多数标签的属性 class属性
hr 水平线
如何查看源代码
html文本格式化标签
内部样式表外部样式表，样式表：用于控制web页面的外观。

用于定义行内样式

HTML <div> 元素
HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
由于它属于块级元素，浏览器会在其前后显示折行(换行)。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。
对div容器设置属性。

jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。
如何通过jQuery库选取 HTML 元素，以及如何对它们执行类似隐藏、移动以及操作其内容等任务。
如何导入jQuery库；向页面添加 jQuery 库。
两个版本的 jQuery 可供下载：一份是精简过的(精简压缩版)，另一份是未压缩的（供调试或阅读）。

jQuery 选择器
通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行“操作”（actions）。
1）美元符号定义 jQuery
2）选择符（selector）“查询”和“查找” HTML 元素
3）jQuery 的 action() 执行对元素的操作。

文档就绪函数：为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
$("p") 选取 <p> 元素。按照元素类型进行选择。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。

jQuery CSS 选择器：jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
jQuery 事件处理方法是 jQuery 中的核心函数。通常会把 jQuery 代码放到 <head>部分的事件处理方法中。

由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：
1）把所有 jQuery 代码置于事件处理函数中，
2）把所有事件处理函数置于文档就绪事件处理器中，
3）把 jQuery 代码置于单独的 .js 文件中，
4）如果存在名称冲突，则重命名 jQuery 库。

jQuery fadeTo() 方法允许渐变为给定的不透明度。
一般使用jQuery中的方法()。
jQuery animate() 方法允许您创建自定义的动画。
默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!
动画执行过程中，停止动画的滑动。
jQuery stop() 方法用于在动画或效果完成前对它们进行停止。
jQuery Callback 方法，某一动作执行完毕以后执行回到函数。
jQuery方法链：允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。这样的话，浏览器就不必多次查找相同的元素。如需链接一个动作，您只需简单地把该动作追加到之前的动作上。
//如果不携带参数，是获取；携带参数是设置文本或者值。
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。(jQuery遍历，祖先，子孙，同胞)
通过 jQuery，您能够向上遍历 DOM 树，以查找元素的祖先。
jQuery parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
通过 jQuery，您能够向下遍历 DOM 树，以查找元素的后代。
过滤：缩小搜索元素的范围。三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。

AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。(部分网页的更新)在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
1）加载后台数据2）在页面上显示3）不重新加载整个页面。
请求参数，请求url，请求方法，响应数据。
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
$(selector).load(URL,data,callback);
jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。

jQuery 是 JavaScript 库，jQuery 是客户端脚本库。jQuery 的简写是$
通过 jQuery，选择器 $("div") 选取什么元素？所有 div 元素,按照类型进行选择。
jQuery 可以与 AJAX 一起使用。
把所有 p 元素的背景色设置为红色：$("p").css("background-color","red");
通过 jQuery，$("div.intro") 能够选取的元素是？class="intro" 的所有 div 元素
hide()方法用于隐藏被选元素。
css()方法用于设置被选元素的一个或多个样式属性。
jQuery.ajax()方法用于执行异步 HTTP 请求。
将所有 div 元素的高度设置为 100 像素: $("div").height(100)
如需使用 jQuery,需要引用 Google 的 jQuery 库。
jQuery 是通过JavaScript脚本语言编写的
noConflict()方法用于处理命名冲突。

jQuery 使用 CSS 选择器来选取元素。

引用名为 "xxx.js" 的外部脚本的语法<script src="xxx.js"></script>
创建js函数，必须使用function关键字，function myFunction()。
定义 JavaScript 数组的方法

是var txt = new Array("George","John","Thomas")

<%--
  Created by IntelliJ IDEA.
  User: ChenRuShui
  Date: 2018/7/11
  Time: 14:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <%--引入js库--%>
    <script src="/js/jquery-1.4.2.min.js"></script>
    <%--引入css库--%>
    <link href="css/test.css" type="text/css" rel="stylesheet">
    <title>jQuery的使用</title>
    <script>
        //通过val()方法获得输入字段的值：
        $(document).ready(function () {
            $("#btn4").click(function () {
                alert($("#test").val());
            });
        });
        // attr() 方法用于获取属性值
        $(document).ready(function () {
            $("#btnUrl").click(function () {
                alert($("#url").attr("href"));
            });
        });
        //jQuery设置内容和属性
        $(function () {
            $("#btn1").click(function () {
                // $("#test1").text("hello world");
                // $("#test2").html("<b>hello world!</b>ss")
                // $("#test3").val("为元素设置值!");
                $("#url").attr({"href": "http://www.aowubao.com"});
            });
        });
        //jQuery添加元素
        $(function () {
            $("#btn2").click(function () {
                    // $("#test1").append("添加元素");
                    $("#test1").prepend("添加元素");
                }
            );
        });
        //jQuery刪除元素
        $(function () {
            $("#btn2").click(function () {
                    // $("#test1").append("添加元素");
                    $("#btn3").remove();
                }
            );
        });
        //jQuery获取并设置CSS类,路径配置错误
        $(function () {
            $("#btn5").click(function () {
                $("p").addClass("blue");
                $("div").addClass("important");
            });
        });

        //css()方法设置或返回被选元素的一个或多个样式属性。
        $("#btn6").click(function () {
            // alert($("#test1").css("background-color"))
            $("#test1").css("color", "red")
        });

        //简单的写法：jQuery操作元素尺寸,监听按钮点击事件。千万别忘记写$符号。
        //返回元素的宽度和高度。
        $(function () {
            $("#btnSize").click(function () {
                var txt;
                txt = "div的宽度：" + $("#div1").width() + "</br>"
                txt += "div的高度：" + $("#div1").height() + "</br>"
                $("#div1").html(txt);
            });
        });

        //遍历查找元素的父元素,jQuery中的遍历
        $(function () {
            //$("#test1").parents().css({"color":"red","border":"2px solid red"});
            //$("#div1").children().css({"color":"red","border":"2px solid red"});
            //$("#test1").siblings().css({"color": "red", "border": "2px solid red"});
        });

        //ajax方法:第一个参数是请求的url，第二个是回调函数。
        $(function(){
            $("#btnSize").click(function(){
                $.get("/index",function(data,status){
                    //alert("数据："+data+"\n状态："+status);
                    alert("状态："+status);
                });
            });
        });
    </script>
</head>
<body>

<div id="div1" style="height: 100px;width: 300px;padding: 10px;
margin: 3px;border:1px solid blue;background-color: #0e6248">
    <button>测试数据</button>
</div>
<br/>
<button id="btnSize">显示div元素的尺寸</button>
<p>width() - 返回元素的宽度</p>
<p>height() - 返回元素的高度</p>

<div>
    <p id="test1" style="background-color: #00ee00">这是一个段落。</p>
    <p id="test2">这是另外一个段落。</p>
    <p>输入框: <input type="text" id="test3" value="菜鸟教程"></p>
    <button id="btn1">设置文本</button>
    <button id="btn2">添加元素</button>
    <button id="btn3">设置值</button>
    <button id="btn5">操作css5</button>
    <button id="btn6">操作css6</button>
</div>
<div>
    <p>获取属性的值</p>
    <p><a href="http://www.baidu.com" id="url">测试链接</a></p>
    <button id="btnUrl">显示属性的值</button>
</div>
<div>
    获取用户输入的值：<br/>
    <input id="test" type="text"/><br/>
    <button id="btn4" type="button">显示用户输入的值</button>
</div>
</body>
</html>

    <script>
        <!--jquery的学习-->
        //文档就绪函数
        $("document").ready(function () {
            //选择所有的p标签元素
            $("p").click(function () {
                //隐藏当前的html元素
                $(this).hide()
            })
        });


        $(document).ready(function () {
            //当点击这个html元素的时候，隐藏当前元素
            $("#test").click(function () {
                $(this).hide("slow");
            })
        })

        //直接写当前元素的名称即可
        $(document).ready(function () {
            $(".test").click(function () {
                $(this).css("color", "red");
            });
        });

        // 显示与隐藏
        $(document).ready(function () {
            $("button").click(function () {
                $("p").toggle()
            });
        });

        //淡入淡出,一般使用jQuery中的方法()
        $(document).ready(function () {
            $("button").click(function () {
                // $("#div1").fadeIn();
                // $("#div1").fadeOut("slow");
                $("#div1").fadeTo(3000, 0.5);
            });
        });

        // jQuery滑动效果,慢慢滑出效果
        $(document).ready(function () {
            $("#flip").click(function () {
                $("#panel")
                    .slideUp(1000)
                    .slideDown(1000);
            })
        });

        //jQuery动画效果
        $(document).ready(function () {
            $("#anim").click(function () {
                $("#anim").animate({
                    left: '250px',
                    opacity: '0.5',
                    height: '150px',
                    width: '150px'
                }, 5000, function () {
                    alert("动画执行完毕")
                });
            });

            $("#stopAnim").click(function () {
                $("#anim").stop();
            });
        });
        // jQuery获取内容和属性
        $(document).ready(function () {
            $("#btn1").click(function () {
                //获取id为test的文本内容
                alert($("#test").text());
            });
        });
        $(document).ready(function () {
            $("#btn2").click(function () {
                alert($("#test").html());
            });
        });

    </script>