html jquery界面开发 python python调用jquery

转载

技术领航员 2023-07-14 20:36:30

文章标签 html jQuery ide 文章分类 jQuery 前端开发

一、jQuery基础

jQuery是一个类库，类似于python中的模块，其封装了JavaScript对dom的操作，我们使用jQuery可以用更少的代码完成复杂的场景，而jQuery的内部本质上也是dom的操作。jQuery类库有3个系列，可以去jQuery的官网进行下载，然后使用<script src="jQuery的路径"></script>导入到我们的项目中，就可以使用了jQuery了。jquery的中文手册地址是：http://jquery.cuishifeng.cn/

1、jQuery对象和document对象的转换

　jQuery[0] =====> Dom对象

调用jQuery类库时使用$符或jQuery。

2、元素查找

　　jQuery中常见的元素查找有：id，class，标签查找，组合查找，层级查找，基本查找，属性查找，表单查找，表单对象查找等，基本使用如下;

1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div id="id">hello jquery
 9         <div class="c1">
10             <a></a>
11         </div>
12         <a></a>
13         <label>123</label>
14         <a id="a11">456</a>
15     </div>
16     <a id="a1">hello</a>
17     <a age></a>
18     <a age="18"></a>
19 
20     <form id="f1">
21         <input type="text"/>
22         <input type="password"/>
23         <input type="checkbox"/>
24         <input type="button"value="按钮">
25     </form>
26 <script src="jquery-3.3.1.js">
27 
28 </script>
29 <script>
30     $('#id');//id查找
31     $('.c1');//class查找
32     $('div');//标签查找
33     $('#id,.c1,a');//组合查找
34     //----层级查找
35     $('#id a');//查找子子孙孙
36     $('#id>a');//查找儿子
37     //---基本查找
38     $('#id>a:first');
39     $('#id>a:last');
40     $('#id>a:eq(1)');
41     //----属性查找
42     $('[age]');
43     $('[age="18"]');
44     //表单查找
45     $(':text');
46     $(':password');
47     $(':checkbox');
48     $(':button');
49     //表单对象属性查找
50     $(':checked'); //查找所有被选中的checkbox
51 </script>
52 </body>
53 </html>

　jQuery实现多选，反选，取消操作实例。

1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <table id="tb" border="1" cellspacing="0" style="width: 300px">
 9         <thead>
10             <th>操作</th>
11             <th>IP</th>
12             <th>PORT</th>
13         </thead>
14         <tbody>
15             <tr>
16                 <td><input type="checkbox"/></td>
17                 <td>1.1.1.1</td>
18                 <td>8080</td>
19             </tr>
20             <tr>
21                 <td><input type="checkbox"/></td>
22                 <td>1.1.1.1</td>
23                 <td>8080</td>
24             </tr>
25             <tr>
26                 <td><input type="checkbox"/></td>
27                 <td>1.1.1.1</td>
28                 <td>8080</td>
29             </tr>
30             <tr>
31                 <td><input type="checkbox"/></td>
32                 <td>1.1.1.1</td>
33                 <td>8080</td>
34             </tr>
35         </tbody>
36     </table>
37     <input id="all_id" type="button" value="全选"/>
38     <input id="rev_id" type="button" value="反选"/>
39     <input id="canel_id" type="button" value="取消"/>
40 
41 <script src="jquery-3.3.1.js"></script>
42 <script>
43     $('#all_id')[0].onclick = function(){
44         $('#tb :checkbox').prop('checked',true);
45     }
46 
47     $('#canel_id')[0].onclick = function () {
48         $('#tb :checkbox').prop('checked',false);
49     }
50 
51     $('#rev_id')[0].onclick = function () {
52         $('#tb :checkbox').each(function () {
53             $(this).prop('checked',!$(this).prop('checked'));
54             // this.checked = !this.checked;
55         })
56     }
57 </script>
58 </body>
59 </html>

其中prpo是专门用于checkbox，radio属性设置，each方法是jQuery内置循环。$('#tb :checkbox').each(function(k){ //k当前索引 //this当前循环的元素})。

3、筛选(next(), nextAll(), nextUntil(), prev(), prevAll(), prevUntil(), parent(), parents(), parentsUntil(), children(), siblings(), find(), $('#id').eq(index), $('#id:eq(index)'), first(), last())

1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div>
 9         <a id="i2"></a>
10         <a>asdf</a>
11         <a>asdf</a>
12         <a id='i1' class="c1">asdf</a>
13         <a>asdf</a>
14         <a id='ii1'>asdf</a>
15         <a>asdf</a>
16     </div>
17 
18 <script src="jquery-3.3.1.js">
19 
20 </script>
21 <script>
22     $('#i1').next();//下一个元素
23     $('#i1').nextAll(); //下面所有元素
24     $('#i1').nextUntil('#ii1');//直到#ii1,不包含#ii1
25     $('#i1').prev(); //前一个元素
26     $('#i1').prevAll(); //前面所有元素
27     $('#i1').prevUntil("#i2"); //前面的元素 直到i2
28     $('#i1').parent();//父标签
29     $('#i1').parents(); //所有父标签
30     $('#i1').parentsUntil('#id'); //查找所有父标签直到id
31     $('#i1').children(); //查找所有孩子
32     $('#i1').siblings();  //查询所有兄弟
33     $('#i1').find(); //查询子子孙孙
34     $('#i1:eq(1)'); //查找第一个元素
35     $('#i1').eq(1); //查找第一个元素
36     $('#i1').first();  //查找第一个元素
37     $('#i1').hasClass('c1'); //查找是否有某个类
38 </script>
39 </body>
40 </html>

4、文本操作（text()，html()，val()）

1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <a id="id">12345</a>
 9 <input type="text" value="1234"/>
10 
11 <script src="jquery-3.3.1.js">
12 
13 </script>
14 <script>
15     $('#id').text();  //获取值
16     $('#id').text('sdds'); //设置值
17     $(':text').val();//获取值
18     $(':text').val('sfsf');//设置值
19     $('#id').html('<a>1</a>'); //设置html
20     $('#id').html();  //获取html
21 </script>
22 </body>
23 </html>

5、类操作（addClass()，removeClass()，toggleClass()）

1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .hide{
 8             display: none;
 9         }
10     </style>
11 </head>
12 <body>
13 <a id="id">12345</a>
14 <script src="jquery-3.3.1.js">
15 
16 </script>
17 <script>
18     $('#id').addClass('hide');//添加类
19     $('#id').removeClass('hide');//删除类
20     $('#id').toggleClass('hide');//如果有就删除 如果没有就添加
21 </script>
22 </body>
23 </html>

实例展示，tab菜单

1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7 
 8         .content_active{
 9             background: #7dddff;
10         }
11         .active{
12             background: #3f49e1;
13         }
14         .menu{
15             height: 48px;
16             background: #dddddd;
17             line-height: 48px;
18         }
19         .menu .item{
20             float: left;
21             margin-left: 80px;
22             padding-left: 40px;
23             padding-right: 40px;
24             cursor: pointer;
25 
26             width: 50px;
27             /*background: #cadd66;*/
28         }
29         .hide{
30             display: none;
31         }
32         .content {
33             height: 300px;
34             width: 698px;
35             border: 1px solid darkgray;
36         }
37     </style>
38 </head>
39 <body>
40 <div style="width: 700px;margin: 0 auto">
41     <div class="menu">
42         <div target='1' class="item active">菜单一</div>
43         <div target='2' class="item">菜单二</div>
44         <div target='3' class="item">菜单三</div>
45     </div>
46     <div>
47         <div name='1' class="content">内容fdfdfdfdfdfds一</div>
48         <div name='2' class="content hide"><input type="button" value="点我"/></div>
49         <div name='3' class="content hide">内容sdffffff三</div>
50     </div>
51 </div>
52 
53 <script src="jquery-3.3.1.js"></script>
54 
55 <script>
56     $('.item').click(function(){
57         $(this).addClass('active').siblings().removeClass('active');
58         // var attr = $(this).attr('target');
59         // var temp = ".content[name="+attr+"]";
60         // $(temp).removeClass('hide');
61         // $(temp).siblings().addClass('hide');
62         //利用索引完成
63         $('.content').eq($(this).index()).removeClass('hide').siblings().addClass('hide');
64     })
65 </script>
66 </body>
67 </html>

6、属性操作（attr()，removeAttr()，prpo()）

1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .hide{
 8             display: none;
 9         }
10     </style>
11 </head>
12 <body>
13 <a id="id">12345</a>
14 <input type="radio" value="k"/>
15 <script src="jquery-3.3.1.js">
16 
17 </script>
18 <script>
19     //专门用于自定义属性
20     $('#id').attr('class'); //获取属性值
21     $('#id').attr('class','hide'); //设置属性，可以是自定义属性
22     $('#id').removeAttr('class'); //删除属性
23     //专门用于checbox，radio一类
24     $(':radio').prop('checked');  //获取属性值
25     $(':radio').prop('checked',true); //设置
26 </script>
27 </body>
28 </html>

7、文档处理(append(), prepend(), after(), before(), empty())

1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .hide{
 8             display: none;
 9         }
10     </style>
11 </head>
12 <body>
13 <div id="i1">1233</div>
14 <script src="jquery-3.3.1.js">
15 
16 </script>
17 <script>
18     $('#i1').append('<div>123</div>'); //在儿子节点最后插入一个子元素
19     $('#i1').prepend('<div>456</div>>'); //在儿子节点最前面插入一个子元素
20     $('#i1').after('<div>1111</div>'); //在该元素后面插入一个子元素
21     $('#i1').before('<div>4444</div>'); //在该元素前面插入一个老师
22     $('#i1').empty();//清空元素的内容
23 </script>
24 </body>
25 </html>

8、css处理 $('#i1').css({'height':'200px','width':'100px','background':'blue'})

点赞实例演示。

1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .container{
 8             padding: 50px;
 9             border: 1px solid darkgray;
10         }
11         .container .item{
12             height: 40px;
13             width: 40px;
14             line-height: 40px;
15             text-align: center;
16             position: relative;
17             cursor: pointer;
18             /*border: 1px solid red;*/
19         }
20     </style>
21 </head>
22 <body>
23     <div class="container">
24         <div  class="item">
25             <span>赞</span>
26         </div>
27     </div>
28 
29 <script src="jquery-3.3.1.js"></script>
30 
31 <script>
32     $('.item').click(function () {
33         var span = document.createElement("span");
34         var fontSize = 15;
35         var right = 0;
36         var top = 0;
37         var opacity = 1;
38         $(span).text("+1");
39         $(span).css('position','absolute');
40         $(span).css('right',right);
41         $(span).css('top',top);
42         $(span).css('fontSize',fontSize+"px");
43         $(span).css('color',"green");
44         $(span).css('opacity',opacity);
45         $(this).append(span);
46         var obj = setInterval(function() {
47             fontSize = fontSize+5;
48             right = right-10;
49             top = top -10;
50             opacity = opacity - 0.1;
51             $(span).css('right',right);
52             $(span).css('top',top);
53             $(span).css('fontSize',fontSize+"px");
54             $(span).css('color',"green");
55             $(span).css('opacity',opacity);
56             if(opacity<0) {
57                 clearInterval(obj);
58                 $(span).remove();
59             }
60         },100);
61     });
62 </script>
63 </body>
64 </html>

9、位置（$(window).scrollTop() offset().left offset().top, position().top, position().left $('#id').height(), $('#id').innerHeight(), $('#id').outerHeight()）　

1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #i1{
 8             height: 100px;
 9             width: 100px;
10             overflow: auto;
11             position: relative;
12         }
13         #i2{
14             position: absolute;
15             height: 50px;
16             width: 50px;
17             background: #ff6600;
18             left: 10px;
19 
20         }
21     </style>
22 </head>
23 <body style="height: 5000px">
24 <div id="i1">
25     <div id="i2">2121</div>
26     <p>ddsdds</p>
27     <p>ddsdds</p>
28     <p>ddsdds</p>
29     <p>ddsdds</p>
30     <p>ddsdds</p>
31 </div>
32 <script src="jquery-3.3.1.js">
33 
34 </script>
35 <script>
36     $(window).scrollTop(); //获取滚动条的位置
37     $(window).scrollTop(10);//设置滚动条的位置
38     $('#i1').scrollTop(); //获取div滚动条的位置
39     $('#i1').scrollTop(10);  //设置div滚动条的位置
40     $('#i1').offset();  //div坐标位置
41     $('#i2').position();  //div的position位置
42 </script>
43 </body>
44 </html>

　　下面我们通过一个图来理解height()，innerHeight()，outerHeight(false)，outerHeight(true)。

html jquery界面开发 python python调用jquery_html

控件拖拽实例演示。

1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7 
 8         #moveBar{
 9             position: absolute;
10         }
11         #banner{
12 
13             height: 48px;
14             width: 300px;
15             background: #ff6600;
16             line-height: 48px;
17             text-align: center;
18             cursor: move;
19             user-select:none;/*用户无法选择文本*/
20 
21         }
22         #content{
23             position: absolute;
24             top: 48px;
25             height: 200px;
26             width: 298px;
27             border: 1px solid darkgray;
28         }
29     </style>
30 </head>
31 <body>
32     <div id="moveBar">
33         <div id="banner">标题</div>
34         <!--<div id="d1" style="z-index: 2">标题</div>-->
35         <div id="content"><textarea style="width: 292px;height: 194px;">编辑</textarea> </div>
36     </div>
37 
38 <script src="jquery-3.3.1.js"></script>
39 
40 <script>
41     $(function () {
42         $('#banner').mousedown(function(e) {
43            var isMove = true;
44            var div_x = e.pageX - $('#moveBar').offset().left;
45            var div_y = e.pageY - $('#moveBar').offset().top;
46            $(document).mousemove(function(e) {
47                if(isMove){
48                    var tem_x =  e.pageX - div_x;
49                    var tem_y = e.pageY - div_y;
50                    $('#moveBar').css('left',tem_x);
51                    $('#moveBar').css('top',tem_y);
52                }
53            }).mouseup(function () {
54                isMove= false;
55            })
56         });
57 
58     });
59 
60 </script>
61 </body>
62 </html>

10、jQuery事件绑定（click(), [bind()--unbind()], [on()--off()], [delegate()---undelegate()托管]）

1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #i1{
 8             height: 100px;
 9             width: 100px;
10             background: #ff6600;
11         }
12 
13     </style>
14 </head>
15 <body>
16 <div id="i1">
17     事件绑定
18 </div>
19 
20 <input type="button" value="+"/>
21 <script src="jquery-3.3.1.js">
22 
23 </script>
24 <script>
25     $('div').click(function(e) {
26         console.log(this);
27         alert('hi');
28     });
29 
30     $('div').bind('click',function(e) {
31         console.log(this);
32         alert('bind');
33     });
34 
35     $('div').on('click',function (e) {
36         alert('on');
37     });
38     //托管----该绑定事件的方式不同于其他三种的原因是:其在事件触发的时候才会绑定事件，看下面的列子
39     $(document).delegate('div','click',function () {
40         alert('delegate');
41     });
42 
43     //---------以下实例展示了托管不同于其他事件绑定的方法
44 
45     $(':button').click(function (e) {
46         $('body').append('<div>新增的div</div>');
47     })
48     //点击+按钮生成新的div，此时点击新的div 只有delegate绑定的事件能响应
49 </script>
50 </body>
51 </html>

最后需要提醒的是，我们希望在页面框架加载完成之后就能够自动执行jQuery代码，此时，我们一般会将代码放在

$(function()){

　　$(....) //我们的jQuery代码

}　

11、阻止事件发生

　　我们知道，对于一个<a href='http://www.baidu.com'></a>标签而言，其默认有一个鼠标点击跳转时间，那么，如果我们给这个a标签绑定一个click时间，会肿么样呢？一起看下面的例子。

html jquery界面开发 python python调用jquery_ide_02

html jquery界面开发 python python调用jquery_ide_03

1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7 </head>
 8 <body>
 9 <a href="http://www.baidu.com">百度一下</a>
10 
11 
12 <script src="jquery-3.3.1.js">
13 
14 </script>
15 <script>
16     $('a').click(function () {
17         alert(1);
18         return true; //false时不会跳转 为true时会跳转
19     });
20 </script>
21 </body>
22 </html>

　通过上面的例子，我们发现如果我们自己绑定的事件return false时，标签自己默认的事件就失效，反之，如果我们返回true，则在响应完我们自己的事件之后，再去响应默认的事件。这种机制，使我们想起在表单提交的时候可以做一些必要的校验。辣么，我们就看一下表单提交的代码演示。

1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .error{
 8             color: red;
 9         }
10     </style>
11 </head>
12 <body>
13     <form action="5.html" method="post">
14         <div><input type="text"/></div>
15         <div><input type="text"/></div>
16         <div><input type="text"/></div>
17         <div><input type="password"/></div>
18         <input type="submit" value="提交"/>
19     </form>
20     <div style="height: 600px;width: 600px;border: 1px solid darkgray">
21         <img  height="600px" width="600px" src="http://img.ivsky.com/img/tupian/pre/201803/15/fangsuo_shudian-022.jpg"/>
22     </div>
23 <script src="jquery-3.3.1.js" ></script>
24 
25 <script>
26     $(function () { //当页面框架加载完成后，自动执行
27         $(':submit').bind('click',function () {
28         var flag = true;
29         $('.error').remove();
30         $(':text,:password').each(function () {
31            var val = $(this).val();
32            if(val.trim().length<=0){
33                flag = false;
34                if($(this).parent().find('span').length<=0){
35                    var tag = document.createElement('span');
36                    $(tag).text('*必填');
37                    $(tag).addClass('error');
38                    $(this).after(tag);
39                }
40            }
41         });
42         return flag;
43     });
44     });
45 </script>
46 </body>
47 </html>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。