四：Day07—jQuery01

已于 2023-09-26 20:52:47 修改
阅读量67 收藏 1
点赞数
文章标签： jquery
于 2023-09-26 20:40:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51318621/article/details/133323009
版权

一、jQuery入门

1. 定义和特点

  • 目前最流行的JavaScript函数库之一，对JavaScript进行了封装。
  • 并不是一门新语言，而是将常用的、复杂的JavaScript操作进行函数化封装，封装后可以直接调用，大大降低了使用JavaScript的难度，改变了使用JavaScript的习惯。

2. 第一个示例

实现隔行变色的效果，在使用jQuery实现效果之前，先使用在HTML中使用class属性直接标记、使用JavaScript来实现动态隔行变色，然后再采用jQuery来实现，可以明显体现到jQuery的方便和简单。
在这里插入图片描述

2.1 CSS实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        table{
            border: 1px solid red;
            width: 500px;
            border-collapse: collapse;
            text-align: center;
        }

        tr，th，td{
            border: 1px solid red;
        }

        .odd{
            background-color: gold;
        }

        .even{
            background-color: skyblue;
        }

    </style>

</head>
<body>
<table>
    <tr class="odd">
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr class="even">
        <td>1</td>
        <td>明玉</td>
        <td>女</td>
        <td>28</td>
    </tr>
    <tr class="odd">
        <td>2</td>
        <td>吕布</td>
        <td>男</td>
        <td>38</td>
    </tr>
    <tr class="even">
        <td>3</td>
        <td>貂蝉</td>
        <td>女</td>
        <td>18</td>
    </tr>
    <tr class="odd">
        <td>4</td>
        <td>西施</td>
        <td>女</td>
        <td>16</td>
    </tr>
    <tr class="even">
        <td>5</td>
        <td>曹操</td>
        <td>男</td>
        <td>60</td>
    </tr>
</table>
</body>
</html>

缺点是很明显的，一旦改变增加或者删除某些行，改变了奇偶行顺序，就不是隔行变色了。

可以考虑使用JavaScript实现动态的隔行变色，等页面加载完后执行JavaScript代码实现隔行变色。示例1的缺点就没有了。

2.2 JS实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        table{
            border: 1px solid red;
            width: 500px;
            border-collapse: collapse;
            text-align: center;
        }

        tr，th，td{
            border: 1px solid red;
        }
    </style>

    <script type="text/javascript">
        window.onload = function(){
            var trs = document.getElementsByTagName('tr');
            for(var i = 0; i < trs.length; i++){
                if(i % 2 == 0){
                    trs[i].style.backgroundColor = 'gold';
                }else{
                    trs[i].style.backgroundColor = 'skyblue';
                }
            }
        }
    </script>
</head>
<body>
<table>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>1</td>
        <td>明玉</td>
        <td>女</td>
        <td>28</td>
    </tr>
    <tr>
        <td>2</td>
        <td>吕布</td>
        <td>男</td>
        <td>38</td>
    </tr>
    <tr>
        <td>3</td>
        <td>貂蝉</td>
        <td>女</td>
        <td>18</td>
    </tr>
    <tr>
        <td>4</td>
        <td>西施</td>
        <td>女</td>
        <td>16</td>
    </tr>
    <tr>
        <td>5</td>
        <td>曹操</td>
        <td>男</td>
        <td>60</td>
    </tr>
</table>
</body>
</html>

能否有比JavaScript更加简单的方式实现隔行变色呢，该jQuery上场了。

2.3 jQuery实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery.js"></script>

    <style>
        table{
            border: 1px solid red;
            width: 500px;
            border-collapse: collapse;
            text-align: center;
        }

        tr，th，td{
            border: 1px solid red;
        }
    </style>

    <script type="text/javascript">
        $(function(){
            $('tr:odd').css('background-color'， 'gold');
            $('tr:even').css('background-color'， 'skyblue');
        })
    </script>
</head>
<body>
<table>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>1</td>
        <td>明玉</td>
        <td>女</td>
        <td>28</td>
    </tr>
    <tr>
        <td>2</td>
        <td>吕布</td>
        <td>男</td>
        <td>38</td>
    </tr>
    <tr>
        <td>3</td>
        <td>貂蝉</td>
        <td>女</td>
        <td>18</td>
    </tr>
    <tr>
        <td>4</td>
        <td>西施</td>
        <td>女</td>
        <td>16</td>
    </tr>
    <tr>
        <td>5</td>
        <td>曹操</td>
        <td>男</td>
        <td>60</td>
    </tr>
</table>
</body>
</html>

3. jQuery的使用

  • 关于jQuery的使用需要先导入jQuery的js文件，发现jQuery本身就是一个JS文件。
  • $是jQuery使用最多的符号，它有多个作用。这个示例中就使用了$的两个作用。
    作用1：$(function(){})

相当于 window.onload=function(){}，功能比window.onload更强大

  • window.onload一个页面只能写一个，但是可以写多个$() 而不冲突
  • window.onload要等整个页面加载完后再执行（包括图片、超链接、音视频等），但是$的执行时间要早
  • 完整形式是$(document).ready(…….);

作用2： $(selector)

选择器。jQuery具有强大的选择器功能。

  • jQuery的基本语法：$(selector).action 。获取页面内容:$(selector) 。操作页面的内容：action
  • 控制页面样式，访问和操作DOM元素 ， 事件处理功能 ，动画功能
  • Ajax功能（jQuey不仅封装了JavaScript，还封装了Ajax）

4. jQuery对象和DOM对象

在学习jQuery的过程中，经常出现调用函数出错的情况。究其原因，很多是因为还是对jQuery对象和DOM对象理解不清楚了，出现了函数互调的情况，当然出错了。

DOM对象和jQuery对象分别拥有一套独立的属性和函数，不能混用。

  • DOM对象：直接使用JavaScript获取的节点对象。例如：className ， innerHTML ，value
  • jQuery对象：使用jQuery选择器获取的节点对象，它能够使用jQuery中的方法。例如：addClass() ， html() ，val()
  • DOM对象转换成jQuery对象： $(DOM对象)
  • jQuery对象转换成DOM对象 jQuery对象[index] jQuery对象.get(index)

5. 案例-理解jQuery对象和DOM对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">
        $(function(){
            //dom对象
            var in1Value = document.getElementById('in1').value;
            document.getElementById('in2').value = in1Value;

            var pEle = document.getElementById('p1');
            var pText = pEle.innerHTML;
            document.getElementById('p2').innerHTML = pText;

            //jquery对象
            var val1 = $('#in1').val();
            $('#in3').val(val1);

            var p1 = $('#p1').html();
            $('#p3').html(p1);

            //js ---- > jquery
            alert(pEle);
            alert($(pEle));

            //jquery ---> js
            alert($('#in1')[0]);

        })
    </script>
</head>
<body>

    <input type="text" value="123" id="in1"><br>
    <input type="text" id="in2"><br>
    <input type="text" id="in3"><br>

    <p id="p1">jQuery对象和DOM对象！</p>
    <p id="p2"></p>
    <p id="p3"></p>

</body>
</html>

二、jQuery选择器

1. 概述

jQuery提供了丰富的选择器功能，jQuery选择器比JavaScript选择器更加的强大。

回顾：JavaScript是如何直接获取元素节点

  • getElementById( ) ：返回一个元素节点对象
  • getElementsByName( )：返回多个元素节点（节点数组）
  • getElementsByClassName( ) ：返回多个元素节点对象（节点数组）
  • getElementsByTagName( ) ：返回多个元素节点对象（节点数组）

2. 基本选择器

  1. 标签选择器 $("a")
  2. ID选择器 $("#id") $("p#id")
  3. 类选择器 $(".class") $("h2.class")
  4. 通配选择器 $("*")
  5. 并集选择器$("elem1， elem2， elem3")
  6. 后代选择器$("ul li"）
  7. 父子选择器 $("ul > li")
  8. 后面第一个兄弟元素节点 $("prev + next")
  9. 后面所有的兄弟元素节点 $("pre~ next")
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">

        $(function(){

            //标签选择器
            // $('h3').css('background-color'， 'red');

            //id选择器
            // $('#p1').css('font-size'， '30px');

            //类选择器
            // $('.p2').css('color'， 'red');

            //通配选择器
            // $('*').css('background-color'， 'blue');

            //并集选择器
            // $('span，h2').css('color'， 'green');

            //后代选择器
            // $('#div1 p').css('color'， 'red');

            //子元素选择器
            // $('#div1 > p').css('color'， 'red');

            //后面的第一个元素
            // $('h2+p').css('color'， 'red');

            //后面的所有兄弟元素
            $('h2~p').css('color'， 'red');
        })

    </script>
</head>
<body>

    <p id="p1">我是段落1.</p>
    <p class="p2">我是段落2.</p>
    <p class="p2">我是段落3.</p>

    <div id="div1">
        <span>我是div中span的内容！</span>
        <h2>我是div中的h2标题内容1！</h2>
        <p>我是div中的段落1.</p>
        <p>我是div中的段落2.</p>
        <div>
            <p>我是div中的div中的段落.</p>
        </div>
        <h2>我是div中的h2标题内容2！</h2>
    </div>

    <h3>我是h3内容1</h3>
    <h3>我是h3内容2</h3>
    <h3>我是h3内容3</h3>

</body>
</html>

3. 属性选择器

  1. [attribute] 匹配包含给定属性的元素

  2. [attribute1][attribute2] 复合属性选择器，需要同时满足多个属性

  3. [attribute=value] 匹配给定的属性是某个特定值的元素

  4. [attribute!=value] 匹配所有属性不等于特定值的元素

  5. [attribute^=value] 匹配给定的属性是以某些值开始的元素

  6. [attribute$=value] 匹配给定的属性是以某些值结尾的元素

  7. [attribute*=value] 匹配给定的属性是以包含某些值的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">

        $(function(){
            //[attribute] 匹配包含给定属性的元素
            // var test1 = $('input[id]');
            // alert(test1.length);

            //[attribute1][attribute2] 复合属性选择器，需要同时满足多个属性
            // var test2 = $('input[name][value]');
            // alert(test2.length);

            //[attribute=value] 匹配给定的属性是某个特定值的元素
            // var test3 = $('input[type=password]');
            // alert(test3.length);

            //[attribute!=value] 匹配所有属性不等于特定值的元素
            // var test4 = $('input[name!=hobby]');
            // alert(test4.length);

            //[attribute^=value] 匹配给定的属性是以某些值开始的元素
            // var test5 = $('input[name^=u]');
            // alert(test5.length);

            //[attribute$=value] 匹配给定的属性是以某些值结尾的元素
            // var test6 = $('input[name$=y]');
            // alert(test6.length);

            //[attribute*=value] 匹配给定的属性是以包含某些值的元素
            var test7 = $('input[name*=s]');
            alert(test7.length);
        })

    </script>
</head>
<body>
<form action="">

    <table>
        <tr>
            <td>用户名：</td>
            <td><input type="text" name="username" id="username"></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password" name="password" id="password"></td>
        </tr>
        <tr>
            <td>爱好：</td>
            <td>
                <input type="checkbox" name="hobby" value="Java">Java
                <input type="checkbox" name="hobby" value="C++">C++
                <input type="checkbox" name="hobby" value="PHP">PHP
            </td>
        </tr>
        <tr>
            <td>职业：</td>
            <td>
                <select name="professional" id="professional">
                    <option value="程序员">程序员</option>
                    <option id="p2" value="公务员">公务员</option>
                    <option value="律师">律师</option>
                    <option value="医生">医生</option>
                </select>
            </td>
        </tr>
        <tr>
            <td colspan="2"><input type="submit" value="注册"></td>
        </tr>
    </table>

</form>
</body>
</html>

4. 位置选择器

针对整个页面而言的位置选择器

  1. :first 获取第一个元素

  2. :last 获取最后一个元素

  3. :odd 匹配所有索引值为奇数的元素，从 0 开始计数

  4. :even匹配所有索引值为偶数的元素，从 0 开始计数

  5. :eq(n) 匹配一个给定索引值的元素，从0开始计数

  6. :gt(n) 匹配所有大于给定索引值的元素

  7. :lt(n) 匹配所有小于给定索引值的元素

针对上级标签而言的位置选择器

  1. :first-child 匹配第一个子元素
  2. :last-child 匹配最后一个子元素
  3. :nth-child(n) 匹配其父元素下的第N个子元素
  4. :nth-child(odd|even) 匹配其父元素下的奇偶元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">

        $(function(){
            //针对整个页面而言的位置选择器
            //:first  获取第一个元素
            // alert($('h4:first').text());

            //:last  获取最后一个元素
            // alert($('p:last').text());

            //:odd 匹配所有索引值为奇数的元素，从 0 开始计数
            // $('p:odd').css('color'， 'red');

            //:even匹配所有索引值为偶数的元素，从 0 开始计数
            // $('p:even').css('color'， 'red');

            //:eq(n) 匹配一个给定索引值的元素
            // alert($('p:eq(2)').text());

            //:gt(n) 匹配所有大于给定索引值的元素
            // $('p:gt(1)').css('color'， 'red');

            //:lt(n) 匹配所有小于给定索引值的元素
            // $('p:lt(2)').css('color'， 'red');

            //针对上级标签而言的位置选择器
            //:first-child  匹配第一个子元素
            // $('div :first-child').css('color'， 'red');

            //:last-child匹配最后一个子元素
            // $('div :last-child').css('color'， 'red');

            //:nth-child(n)   :nth-child(odd|even) 匹配其父元素下的第N个子或奇偶元素
            // $('div :nth-child(3)').css('color'， 'red');
            // $('div :nth-child(odd)').css('color'， 'red');
        })
    </script>
</head>
<body>

    <div>
        <p>我是段落1.</p>
        <p>我是段落2.</p>
        <p>我是段落3.</p>
        <p>我是段落4.</p>
        <h4>标题1</h4>
        <h4>标题2</h4>
        <h4>标题3</h4>
        <div>
            <h3>我是h3标题</h3>
            <p>我是段落！</p>
        </div>
        <div>
            <p>唯一的儿子段落！</p>
        </div>
    </div>
</body>
</html>

5. 表单选择器

关于表单项的选择器

  1. :text ， :password ，:radio ， :checkbox ， :hidden ，:file ，:submit

  2. :input 匹配所有 input， textarea， select 和 button 元素

注意：$("input")和$(":input")的区别

  1. $(“input”)：标签选择器，只匹配input标签

  2. $(“:input”)： 匹配所有 input， textarea， select 和 button 等元素

关于表单项状态的选择器

  1. :selected ， :checked ，:disabled
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

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

    <script type="text/javascript">
        $(function(){

            //:text 用来获取表单项中 type="text"的元素
            // $(':text').css('background-color'， 'red');

            //:password 用来获取表单项中 type="password"的元素
            // $('#form1>:password').css('background-color'， 'red');

            //:radio 用来获取表单项中单选按钮   :checked表示选中的意思
            // alert($(':radio:checked').val());

            //:checkbox 用来获取表单中的复选框
            // alert($(':checkbox:checked').val());

            //(元素):hidden
            // alert($('input:hidden').val());

            //:file 获取表单中 type="file"的元素
            // alert($(':file:nth-child(21)').attr('class'， 'abc'));

            //:submit
            // alert($(':submit').attr('value'));

            //:input  匹配所有 input， textarea， select 和 button 元素
            // alert($(':input').length);

            //:selected  匹配select元素中选中的元素
            // alert($(':selected').text());

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

            //:disabled
            // alert($(':disabled').val());
        })
    </script>
</head>
<body>
<form action="" id="form1">
    <input type="hidden" name="id" value="123">
    <br>

    账号: <input type="text" name="username">
    <br>
    密码: <input type="password" name="password">
    <br>
    生日: <input type="text" name="birthday"><br>
    工资: <input type="text" name="salary"><br>
    性别：<input type="radio" name="sex" value="男">男
        <input type="radio" name="sex" value="女" checked="checked">女 <br>

    爱好：<input type="checkbox" name="hobby" value="篮球">篮球
        <input type="checkbox" name="hobby" value="足球">足球
        <input type="checkbox" name="hobby" checked="checked" value="排球">排球
        <input type="checkbox" name="hobby" value="网球">网球 <br>

    头像：<input type="file" name="photo"><br>
        <input type="file" name="photo" class="aaa"><br>
        <input type="file" name="photo"><br>

    职业：<select name="" id="">
            <option value="程序员">程序员</option>
            <option value="公务员" selected="selected">公务员</option>
            <option value="律师">律师</option>
        </select>
    <input type="submit" value="注册" disabled="disabled">
</form>
</body>
</html>

三、jQuery事件机制

事件驱动: 监听对应的事件, 触发了对应的事件, 事件会被监听到, 监听到事件后驱动函数的执行.
将由传统的HTML元素上完成事件的绑定改为由js/jQuery代码来完成对HTML元素的事件的添加操作。将事件和HTML元素之间进行解耦合。

1. 使用

之前我们学习js时的所有事件在jQuery中也都有。jQuery给元素绑定事件的格式是：

$(function(){
    $('选择器').事件(function(){
        
    });
})

注意：

  1. 使用jQuery给元素绑定事件时，要写在页面加载完事件内。

  2. 这里的事件可以是 click、blur、focus等等。不要写on，因为在js中我们写的是onClick。

4. 案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
    <script>
        $(function(){
            //给元素绑定点击事件
            $('button').click(function(){
                alert('点击事件被触发！');
            });

            //给元素绑定失焦事件
            $('input').blur(function(){
                alert('失焦事件被触发！');
            });
        })
    </script>
</head>
<body>
    <button>按钮</button>
    <br>
    <input type="text">
</body>
</html>

四、jQuery动画

1. 介绍

在界面动画特效上，jQuery给我们提供了比JavaScript更加丰富的方法，jQuery提供的动画中大致上有显示、隐藏、滑动、淡入、淡出等，而且还给我们提供了自定义动画效果的方法，那么接下来咱们就认识一下这些方法。

2. 显示和隐藏动画

实现显示动画效果方法：show()

实现隐藏动画效果方法：hide()

实现切换显示和隐藏动画效果方法：toggle()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>

    <script>
        $(function(){
            $('#btn1').click(function(){
                //隐藏元素，参数表示时间，单位是毫秒
                $('div').hide(3000);
            });

            $('#btn2').click(function(){
                //显示元素
                $('div').show(3000);
            });

            $('#btn3').click(function(){
                //隐藏与显示的开关
                $('div').toggle(2000);
            });
        })
    </script>
</head>
<body>
    <div style="width: 100px;height: 100px;background: #bfa">

    </div>
    <button id="btn1">隐藏</button>
    <br>
    <button id="btn2">显示</button>
    <br>
    <button id="btn3">隐藏/显示</button>
    <br>
</body>
</html>

3. 滑动动画

实现向下滑动动画效果方法：slideDown()

实现向上滑动动画效果方法：slideUp()

实现滑动切换效果方法：slideToggle()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
    <script>
        $(function(){
            $('#btn1').click(function(){
                $('div').slideDown(2000);
            });

            $('#btn2').click(function(){
                $('div').slideUp(2000);
            });

            $('#btn3').click(function(){
                $('div').slideToggle(2000);
            });
        })
    </script>
</head>
<body>
    <div style="background: #bfa;width: 100px;height: 100px">

    </div>
    <button id="btn1">向下滑动</button>
    <br>
    <button id="btn2">向上滑动</button>
    <br>
    <button id="btn3">向上/向下滑动</button>
    <br>
</body>
</html>

4. 淡入淡出动画

实现淡入动画效果方法：fadeIn()

实现淡出动画效果方法：fadeOut()

实现淡入淡出切换效果方法：fadeToggle()

实现淡入到指定透明度效果方法：fadeTo()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
    <script>
        $(function(){
            $('#btn1').click(function(){
                $('div').fadeIn(2000);
            });

            $('#btn2').click(function(){
                $('div').fadeOut(2000);
            });

            $('#btn3').click(function(){
                $('div').fadeToggle(2000);
            });

            $('#btn4').click(function(){
                $('div').fadeTo(3000，0.3);
            });
        })
    </script>
</head>
<body>
    <div style="width: 100px;height: 100px;background: #bfa">

    </div>
    <button id="btn1">淡入</button>
    <br>
    <button id="btn2">淡出</button>
    <br>
    <button id="btn3">淡入/淡出</button>
    <br>
    <button id="btn4">淡入到指定透明度</button>
</body>
</html>

5. 自定义动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
    <script>
        $(function(){
            $("#go").click(function(){
                $("#block").animate({
                    width: "500px"，
                    height: "500px"，
                    fontSize: "10em"
                }， 1000);
            });
        })
    </script>
</head>
<body>
    <button id="go">Run</button>
    <div id="block">Hello!</div>
</body>
</html>

$(‘#btn4’).click(function(){
$(‘div’).fadeTo(3000，0.3);
});
})

</div>
<button id="btn1">淡入</button>
<br>
<button id="btn2">淡出</button>
<br>
<button id="btn3">淡入/淡出</button>
<br>
<button id="btn4">淡入到指定透明度</button>
```

5.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
    <script>
        $(function(){
            $("#go").click(function(){
                $("#block").animate({
                    width: "500px"，
                    height: "500px"，
                    fontSize: "10em"
                }， 1000);
            });
        })
    </script>
</head>
<body>
    <button id="go">Run</button>
    <div id="block">Hello!</div>
</body>
</html>
新手小菜鸟上路
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
日期选择器：jquery datepicker的使用
stationinthemind的博客
11-06 4773
在jquery ui中，提供了一个非常实用的日期选择器：datepicker，使用它能非常方便的展现日历中的日期，灵活配置相关选项，包括日期格式、范围等。我们经常在WEB应用中用到datepicker，比如要求用户输入日期进行相关查询的。我们很早之前就应用datepicker到很多项目中，今天整理成文与大家分享。demodownload下载源码。
day20 jquery01.zip
11-18
在“day20 jquery01.zip”这个压缩包中，我们很可能会找到一系列关于初识jQuery以及循环语句使用的教程或示例代码。 首先，jQuery的核心理念是“写得更少，做得更多”。它通过简洁的API（应用程序接口）让开发者...
jQuery 01day 初识jQuery
qq_54088653的博客
05-01 134
jquery学习 目录 jquery学习 01 day 初识jQuery jQuery的两把利器 jQuery的核心函数 01 day 初识jQuery 是什么？ 为什么用？ 怎么用？ what: http://jquery.com 一个优秀的js函数库：封装了 Bom和Dom why: html元素选取（选择器） html元素处理 css操作 html事件处理 js动画效果 链式调用 读写合一 .
Jquery-day01
weixin_50519232的博客
04-26 1493
jquery是一个js工具库，它是对js的封装形成工具类。 jquery选择器： 一. jquery操作DOM 1.如何获取dom get()获取到的是一个dom对象 console.log($("tr").get(1)); jquery转dom jq[0] dom转化为jquery $(js对象) con...
javaweb学习（day12-jQuery)
weixin_51580177的博客
04-23 1107
jquery就是简化了dom的操作，也确实很方便
jQuery day01
lzw995189944的博客
12-05 678
1. 什么是:jQuery (1). 第三方开发的:必须下载才能用 (2). 执行DOM操作的:jQuery还是执行DOM的增删改查+事件绑定操作。学习jQuery只是学习DOM的延续而已。 (3). 极简化的:jQuery对DOM操作的每一步都进行了简化。 (4). 函数库:jQuery中都是用函数来解决一切问题。 2. 为什么:2个原因: (1). 简单 (2). 解决了大部分浏览器兼容性问题。只要jQuery让用的，几乎都没有兼容性问题。 3. 何...
jQuery-Day3
2401_85122909的博客
06-10 736
🏆 学习の目标能够说出4种常见的注册事件能够说出 on 绑定事件的优势能够说出 jQuery 事件委派的优点以及方式能够说出绑定事件与解绑事件能够说出 jQuery 对象的拷贝方法能够说出 jQuery 多库共存的2种方法能够使用 jQuery 插件🥇 一、jQuery 事件注册​ jQuery 为我们提供了方便的事件注册机制，使开发人员易于操作，优缺点如下：优点: 操作简单，且不用担心事件覆盖等问题。缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。
前端基础：Day03
华山栈道的博客
04-27 1523
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta name="renderer" content="webkit"> <link rel="shortcut icon" href="images/favicon.
学习Java的日子 Day67 jQuery，选择器
weixin_69595694的博客
08-14 897
2.初始jQuery 3.jQuery选择器 3.1 jQuery选择器的分类 3.2 基本选择器 3.2.1 通配符选择器 * 3.2.2 id选择器 3.2.3 class选择器 . 3.3.4 标签选择器 3.3 群组选择器 , 3.4 派生/上下文关系选择器 选择器 功能描述 ancestor descendant 根据祖先元素匹配所有的后代元素 parent＞child 根据父元素匹配所有的子元素 prev+next 匹配prev后的相邻元素
GET http://localhost:8080/static/jquery-3.5.1.js net::ERR_ABORTED 404
thinkinjava1的博客
08-19 3626
使用工具：idea 使用框架：spring boot+thymeleaf+jsp 报错： GET http://localhost:8080/static/jquery-3.5.1.js net::ERR_ABORTED 404 现象： jsp代码: <html> <head> <title>Ajax测试</title> </head> <body> <input type="button" id="btn"
day44_jquery
CSDN_AF的博客
04-14 957
Jquery课件1 Jquery简介 为了简化 JavaScript 的开发, 一些 JavsScript 库诞生了. JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互的 Web2.0 特性的富客户端页面, 并且兼容各大浏览器 当前流行的 JavaScript 库有: jQuery, MooTools, Prototy
day13-JQuery01.iml
11-26
day13-JQuery01.iml
JavaScript jQuery的使用 Day07
01-08
jQuery的使用 jQuery库，内含大量的JavaScript函数。 推荐学习网站（工具站）：http://jquery.cuishifeng.cn 1 获取jQuery及‘hello jQuery’ 可以从该网址查找需要的jQuery在线链接:https://www.bootcdn.cn/jquery/...
day20_JQuery基础教案1
08-08
在本节"Day20_JQuery基础教案1"中，我们深入学习了jQuery的基本概念、快速入门以及jQuery对象与JavaScript对象的区别与转换。以下是详细的知识点解析： **jQuery概念** jQuery是一个JavaScript框架，旨在简化...
RK3576-Hardware-Design-Guide
08-21
包含datasheet
273教学质量评价系统.zip
08-21
摘 要 随着科学技术的飞速发展，社会的方方面面、各行各业都在努力与现代的先进技术接轨，通过科技手段来提高自身的优势，教学质量评价系统当然也不能排除在外。教学质量评价系统是以实际运用为开发背景，运用软件工程开发方法，采用jsp技术构建的一个管理系统。整个开发过程首先对软件系统进行需求分析，得出系统的主要功能。接着对系统进行总体设计和详细设计。总体设计主要包括系统总体结构设计、系统数据结构设计、系统功能设计和系统安全设计等；详细设计主要包括模块实现的关键代码，系统数据库访问和主要功能模块的具体实现等。最后对系统进行功能测试，并对测试结果进行分析总结，及时改进系统中存在的不足，为以后的系统维护提供了方便，也为今后开发类似系统提供了借鉴和帮助。 本教学质量评价系统采用的数据库是Mysql，使用JSP技术开发。在设计过程中，充分保证了系统代码的良好可读性、实用性、易扩展性、通用性、便于后期维护、操作方便以及页面简洁等特点。
基于Android手机点餐系统APP设计与实现.docx
08-21
基于Android手机点餐系统APP设计与实现
全国自学考试计算机网络管理试题.pdf
最新发布
08-21
浙江省的全国自学考试计算机网络管理试题，总共38道题，包含单选，填空，多选等等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值