2. 科技
  3. Python学习笔记第十七周

Python学习笔记第十七周

it2025-02-08  8

目录：

　　一、jQuery

 

 

内容：

　　一、jQuery：

　　ps:版本

　　　1.xx （推荐最新版本，兼容性好）

　　　2.xx

　　　3.xx

　　　　转换：

　　　　jQuery对象[0]   =>  DOM对象

　　　　$(DOM对象)    =>  jQuery对象

 

　　1、查找元素

　　　　基本：

　　　　1、id   $('#id')

　　　　　　2、class $('.classname')

　　　　3、a标签  $('a')

　　　　　　4、$(''a,.c2',#i10)  表示同时拿到所有的a标签、class=c2的标签和id=i10的标签

　　　　　　层级：

　　　　$('#i10 a') 表示找到id=10里的所有a标签，不论层级多少都能找到

　　　　　　$('#i10>a') 表示找到id=i10后，只找到它的child的a标签

　　　　　　$('#i10+a') 表示找到id=i 10后，找到它的下一个兄弟的a标签

　　　　　　$('#i10~a') 表示找到id=i 10后，找到它的上一个兄弟的a标签

　　　　　　基本筛选器：

　　　　　　：first

　　　　　　：last

　　　　　　：eq() 索引值，从零开始

　　　　　　：not（）

　　　　　　：even  奇数行

　　　　　　：odd   偶数行

　　　　　　：gt（）

　　　　　　：lt()

　　　　　　:header 匹配 h1~h6的标题元素

　　　　　　查找：　

　　　　　　　　next() 下一个标签

 

　　　　　　　　prev（）上一个标签

 

　　　　　　　　parent（）父标签

 

　　　　　　　　children（）所有的孩子标签

 

　　　　　　　　siblings（）所有的兄弟标签

 

　　　　　　　　find() 查找所有的内容

　　　　　　　　nextAll()

　　　　　　　　nextUntil()

　　　　　　　　prevAll()

　　　　　　　　prevUntil()

　　　　　　　　parents()

　　　　　　　　parentsUntil()

　　　　　　　　eq()

　　　　　　　　first()

　　　　　　　　last()

　　　　　　　　hasClass()

　　　　　　　　

 

　　　　　　属性：

　　　　　　$('[属性]')   具有所有该属性的标签

　　　　　　$('[属性=“值”]') 所有有该属性对应该值的标签

　　　　　　例子：

　　　　　　$("input[type='text']")  查找input标签里type等于text的标签

　　　　　　例子：多选、反选、取消实例

 

<!--实例:--> <!--多选/反选/全选--> <!-- -选择器--> <!-- -$(this).prop('checked') 获取值--> <!-- -$(this).prop('checked',false) 设置值--> <!-- -jQuery方法内置循环:$('[type="checkbox"]').prop('checked',true);--> <!-- -var v = 条件? 真值:假值--> <!-- -$('[type="checkbox"]').each(function () {--> <!--var v = $(this).prop('checked')?false:true;//三元运算--> <!--$(this).prop('checked',v)--> <!--})--> <!--} this表示DOM元素--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="全选" onclick="checkAll();"/> <input type="button" value="反选" onclick="reverseAll();"/> <input type="button" value="取消" onclick="cancelAll();"/> <table border="1"> <thead> <tr> <th>选项</th> <th>IP</th> <th>PORT</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"/></td> <td>1.1.1.1</td> <td>80</td> </tr> <tr> <td><input type="checkbox"/></td> <td>1.1.1.1</td> <td>80</td> </tr> <tr> <td><input type="checkbox"/></td> <td>1.1.1.1</td> <td>80</td> </tr> <tr> <td><input type="checkbox"/></td> <td>1.1.1.1</td> <td>80</td> </tr> </tbody> </table> <script src="jquery-1.12.4.js"></script> <script> function checkAll(){ $('[type="checkbox"]').prop('checked',true); } function cancelAll(){ $('[type=checkbox]').prop('checked',false); } function reverseAll(){ $('[type="checkbox"]').each(function () { //this 代指当前循环的每一个元素 //反选 //DOM方式 // if(this.checked){ // this.checked = false; // }else{ // this.checked = true; // } //jQuery方式 // if($(this).prop('checked')){//prop传递一个参数表示获取状态值 // $(this).prop('checked',false);//prop传递两个参数表示设置值 // }else{ // $(this).prop('checked',true); // } var v = $(this).prop('checked')?false:true;//三元运算 $(this).prop('checked',v) }) } </script> </body> </html> View Code

 

　　　　　　   例子：左侧边框显示

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .header{ background-color:black; color:white; } .content{ min-height:50px; } .hide{ display:none; } </style> </head> <body> <div style="height:400px;width:200px;border:1px solid #dddddd"> <div class="item"> <div class="header">标题1</div> <div class="content ">内容</div> </div> <div class="item"> <div class="header">标题2</div> <div class="content hide">内容</div> </div> <div class="item"> <div class="header">标题3</div> <div class="content hide">内容</div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.header').click(function(){ //$(this)表示当前点击的标签 //获取该标签的上一级标签,找到它上一级标签的兄弟标签 //添加样式和移除样式 // $(this).parent().siblings().find('.content').addClass('hide'); // $(this).next().removeClass('hide'); //链式编程 $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide'); })//把所有class=header都绑定onclick事件 </script> </body> </html> View Code

 

 

 

　　2、操作元素

　　　　　　文本操作：

　　　　　　text（）获取内容   （）里加参数是设置文本内容，如果包含标签html不解析

　　　　　　html（）  获取标签   （）力加参数是设置内容，包含标签自动解析

　　　　　　val（）获取input  select  textarea中标签

　　　　　　例子：　　

　　　　　　模态对话框，使用jQuery实现

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display:none; } .shadow{ position:fixed; top:0; bottom:0; right:0; left:0; opacity: 0.6; z-index:9; background-color:black; } .addcontent{ position:fixed; top:50%; left:50%; width:500px; height:400px; margin-top:-250px; margin-left:-200px; z-index:10; background-color:white; } </style> </head> <body> <div id='add1' border="1">添加</div> <table border="1"> <thead> <tr> <th>IP</th> <th>PORT</th> <th>Action</th> </tr> </thead> <tbody> <tr> <td>1.1.1.1</td> <td>80</td> <td class="edit"><a>修改</a> | <a>删除</a></td> </tr> <tr> <td>1.1.1.2</td> <td>80</td> <td class="edit"><a>修改</a> | <a>删除</a></td> </tr> <tr> <td>1.1.1.3</td> <td>80</td> <td class="edit"><a>修改</a> | <a>删除</a></td> </tr> </tbody> <div class="shadow hide"></div> <div class="addcontent hide"> <div><input name='hostname' type="text"/></div> <div><input name='port' type="text"/></div> <div><input type="button" value="确定"/><input class='c1' type="button" value="取消"/></div> </div> </table> <script src="jquery-1.12.4.js"></script> <script > $('#add1').click(function(){ $('.shadow').removeClass('hide').next().removeClass('hide'); $('.addcontent input[type="text"]').val(''); }); $('.c1').click(function(){ $(".shadow").addClass('hide').next().addClass('hide'); }); $('.edit').click(function() { $('.shadow').removeClass('hide').next().removeClass('hide'); var port = $($(this).prevAll()[0]).text(); var ip = $($(this).prevAll()[1]).text(); console.log($('.addcontent input[name="hostname"]').val('123')) $('.addcontent input[name="hostname"]').val(ip); $('.addcontent input[name="port"]').val(port); }); </script> </body> </html> View Code

 

　　　　　　样式操作：

　　　　　　addClass()

　　　　　　removeClass()

　　　　　　toggleClass()自动判断括号内class是否存在，如果存在就删除，如果不存在就添加

　　　　　　例子：

　　　　　　开关

　　　　

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } </style> </head> <body> <input id='i1' type="button" value="开关"/> <div class="c1">aaaaaa</div> <script src="jquery-1.12.4.js"></script> <script> $('#i1').click(function(){ $('.c1').toggleClass('hide') }) </script> </body> </html> View Code

　　　　　　

　　　　　　属性操作：

　　　　　　#专门用于做自定义属性

　　　　　　.attr（）：           attr('属性名')   获取属性名称对应的属性     .attr('name', 'gavin')  传两个参数表示设置值

　　　　　　removeAttr（‘属性名’）： 删除属性

　　　　　　#专门用于checkbox，radio操作

　　　　　　.prop 

　　　　　　例子：增强版模态对话框（可以任意添加属性值） 

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display:none; } .shadow{ position:fixed; top:0; bottom:0; right:0; left:0; opacity: 0.6; z-index:9; background-color:black; } .addcontent{ position:fixed; top:50%; left:50%; width:500px; height:400px; margin-top:-250px; margin-left:-200px; z-index:10; background-color:white; } </style> </head> <body> <div id='add1' border="1">添加</div> <table border="1"> <thead> <tr> <th>IP</th> <th>PORT</th> <th>Action</th> </tr> </thead> <tbody> <tr> <td target="hostname">1.1.1.1</td> <td target="port">80</td> <td target="name">a</td> <td class="edit"><a>修改</a> | <a>删除</a></td> </tr> <tr> <td target="hostname">1.1.1.2</td> <td target="port">80</td> <td target="name">b</td> <td class="edit"><a>修改</a> | <a>删除</a></td> </tr> <tr> <td target="hostname">1.1.1.3</td> <td target="port">80</td> <td target="name">c</td> <td class="edit"><a>修改</a> | <a>删除</a></td> </tr> </tbody> <div class="shadow hide"></div> <div class="addcontent hide"> <div><input name='hostname' type="text"/></div> <div><input name='port' type="text"/></div> <div><input name='name' type="text"/></div> <div><input type="button" value="确定"/><input class='c1' type="button" value="取消"/></div> </div> </table> <script src="jquery-1.12.4.js"></script> <script > $('#add1').click(function(){ $('.shadow').removeClass('hide').next().removeClass('hide'); $('.addcontent input[type="text"]').val(''); }); $('.c1').click(function(){ $(".shadow").addClass('hide').next().addClass('hide'); }); $('.edit').click(function() { $('.shadow').removeClass('hide').next().removeClass('hide'); $(this).prevAll().each(function(){ var tap = $(this).attr('target'); var text = $(this).text(); $('.addcontent input[name="' + tap + '"]').val(text); }) }); </script> </body> </html> View Code

 　　　　　　

　　　　　　index() 获取索引位置

　　　　　　eq($(this).index()

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .menu{ height: 38px; line-height:38px; background-color:#eeeeee; border-bottom:1px solid #dddddd; } .menu .menu-item{ float:left; border-right:1px solid red; padding:0 20px; cursor:pointer; } .content{ min-height:100px; border:1px solid #dddddd; } .active{ background-color:green; } </style> </head> <body> <div style="width:700px;margin:0 auto;"> <div class="menu"> <div class="menu-item ">菜单1</div> <div class="menu-item ">菜单2</div> <div class="menu-item ">菜单3</div> <div style="clear:both"></div> </div> <div class="content"> <div class="cotent-item ">内容1</div> <div class="cotent-item hide">内容2</div> <div class="cotent-item hide">内容3</div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.menu-item').click(function(){ $(this).addClass('active').siblings().removeClass('active'); $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide'); }) </script> </body> </html> View Code

 

　　　　　　文档处理：

　　　　　　append 添加到最后一个位置

　　　　　　prepend 添加到第一个位置

　　　　　　after  添加到元素的后面

　　　　　　before 添加到元素的前面

　　　　　　remove 删除样式和内容

　　　　　　empty  只删除内容， 不删除样式

　　　　　　clone  复制选定的内容

　　　　　　例子：模态对话框的删除功能：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> </title> <style> .hide{ display:none; } .shadow{ position: fixed; top:0; right:0; left:0; bottom:0; background-color:black; opacity: 0.6; z-index: 9; } .menu{ position:fixed; top:50%; left:50%; background-color:#eeeeee; width:400px; height:500px; margin-top:-250px; margin-left:-200px; z-index:10; } </style> </head> <body> <a id="add">添加</a> <table border="1"> <thead> <tr> <th >IP</th> <th >Port</th> <th>Action</th> </tr> </thead> <tbody> <tr> <td target="hostname">1.1.1.1</td> <td target="hostname">80</td> <td><a class="edit">编辑</a> | <a class="del">删除</a></td> </tr> <tr> <td target="hostname">1.1.1.2</td> <td target="port">80</td> <td><a class="edit">编辑</a> | <a class="del">删除</a></td> </tr> <tr> <td target="hostname">1.1.1.3</td> <td target="port">80</td> <td><a class="edit">编辑</a> | <a class="del">删除</a></td> </tr> </tbody> </table> <div> <div class="menu hide"> <input target="hostname" type="text"/> <input target="port" type="text"/> <div> <input id="remove" type="button" value="取消"/> </div> </div> </div> <div class="shadow hide"></div> <script src="jquery-1.12.4.js"></script> <script> $("#add").click(function(){ $('.menu, .shadow').removeClass('hide'); $('.menu input[type="text"]').val("") }); $('#remove').click(function(){ $('.menu, .shadow').addClass('hide'); }); $('.edit').click(function(){ $('.menu, .shadow').removeClass('hide'); var tds = $(this).parent().prevAll(); tds.each(function(){ var target = $(this).attr('target'); var value = $(this).text(); $('.menu input[target="'+target+'"]').val(value); }); }); $('.del').click(function () { $(this).parent().parent().remove(); }) </script> </body> </html> View Code

 

 

　　　　　　css处理：

　　　　　　$('t1').css('样式名称'，‘样式值’)

　　　　　　例子：点赞功能

　　　　　　　　知识点：

　　　　　　　　- $().append()

　　　　　　　　- setInterval()

　　　　　　　　- 透明度 1---> 0 

　　　　　　　　- position 

　　　　　　　　- 字体大小，位置

　　　　　　　　-clearInterval

　　　　　　　　-setInterval

　　　　　　　　-remove

　　　　　　

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>点赞</title> <style> .container{ padding:50px; border:1px solid #dddddd; } .item{ position:relative; width:48px; } </style> </head> <body> <div class="container"> <div class="item"> <span>赞</span> </div> </div> <div class="container"> <div class="item"> <span>赞</span> </div> </div> <div class="container"> <div class="item"> <span>赞</span> </div> </div> <div class="container"> <div class="item"> <span>赞</span> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.item').click(function(){ AddFavor(this); }); function AddFavor(self){ //DOM对象 var fontSize = 15; var top = 0; var right = 0; var opacity = 1; var tag = document.createElement('span'); $(tag).text('+1'); $(tag).css('color','green'); $(tag).css('position','absolute'); $(tag).css('fontSize',fontSize + 'px'); $(tag).css('top',top + 'px'); $(tag).css('right',right+ 'px'); $(tag).css('opacity',opacity); $(self).append(tag); var obj = setInterval(function(){ fontSize += 10; top -= 10; right -= 10; opacity -= 0.1; $(tag).css('fontDSize',fontSize + 'px'); $(tag).css('right',right + 'px'); $(tag).css('top',top + 'px'); $(tag).css('opacity',opacity); if(opacity < 0){ clearInterval(obj); $(tag).remove(); } },100) } </script> </body> </html> View Code

 　　　　　　　　位置：

　　　　　　　　scrollTop()  不加值表示获取

　　　　　　　　scrollTop（值） 表示设置

　　　　　　　　scrollLeft（） 

　　　　　　　　offset    指定标签在文档中的坐标

　　　　　　　　offset().top    offset().left  指定标签的横纵坐标

　　　　　　　　position（） 指定标签相对父标签（relative）的坐标

　　　　　　　　height（）获取标签的高度，只能看到纯高度

　　　　　　　　innerHeight（） 只获取边框+纯高度

　　　　　　　　outerHeight（） 获取边框+ 纯高度+边距

　　　　　　　　outerHeight（true） 

　　　　　　　　#纯高度、边框、外边距、内边距

　　　　　　　　

 

　　　　　　　　绑定事件：

　　　　　　　　　　click() 等操作

　　　　　　　　　　bind('click',function(){})

　　　　　　　　　　unbind('click',function(){})

　　　　　　　　　　delegate('a','click', function(){})    委托方式

　　　　　　　　　　undelegate('a','click', function(){})  委托方式

　　　　　　　　　　on('click', function(){})

　　　　　　　　　　off('click',function(){})

　　　　　　　　　　

　　　　　　　　绑定事件的问题：

　　　　　　　　默认情况下，需要在所有元素都加载完毕后才执行js操作，例如当执行js时，如果上述有图片之类需要加载，需要在等图片加载完毕后，才能执行js操作，在图片加载过程中，其实事件已经可以操作，所以在js中，可以变为当页面框架加载完毕后，自动执行：

　　　　　　　　操作方式：

　　　　　　　　<script>

　　　　　　　　$(function(){});将执行的操作放入该匿名函数中，可以保证在页面框架加载完毕后就开始执行操作

　　　　　　　　</script>

　　　　　　　

　　　　　　

　　　　　　　　jQuery扩展：

　　　　　　　　- $.extend        $.方法

　　　　　　　　- $.fn.extend     $(变量).方法　　　

　　　　　　　　自己写的时候需要写成自执行函数

　　　　　　　　（function(arg){

　　　　　　　　　　//使用该方式引入可以封装其他人在定义时的全局变量

　　　　　　　　　　var status =1;

　　　　　　　　　　arg.extend({

　　　　　　　　　　'function_name': function(){

　　　　　　　　　　　　return 'XXX';

　　　　　　　　　　})

　　　　　　　　　　}）(jQuery);

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery扩展</title> </head> <body> <script src="jquery-1.12.4.js"></script> <script src="plugin1.js"></script> <script> //通过文件方式调用 var v = $.wangsen(); alert(v); //调用方式1 // $.extend({ // 'wangsen':function(){ // return 'sb'; // } // }); // var v = $.wangsen(); // alert(v); //调用方式2: // $.fn.extend({ // 'hanyang': function(){ // return 'db'; // } // }); // var v = $('#i1').hanyang(); // alert(v); </script> </body> </html> 网页 status = 1; $.extend({ 'wangsen': function () { return 'sb'; } }); plugin1.js

 

转载于:https://www.cnblogs.com/xiaopi-python/p/6957826.html

最新回复(0)