Python的平凡之路（17）-白红宇

Python的平凡之路（17）

阅读量：4361 次

发布时间：2019-06-07

本文共 7763 字，大约阅读时间需要 25 分钟。

一、认识jQuery

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（

或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。

二、JQuery版本

1.x 1.12

2.x

3.x

三、JQuery与DOM转换

jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法

两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index);

(1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。

如：var $v =$("#v") ; //jQuery对象

var v=$v[0]; //DOM对象

alert(v.checked) //检测这个checkbox是否被选中

(2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对象

如：var $v=$("#v"); //jQuery对象

var v=$v.get(0); //DOM对象

alert(v.checked) //检测这个checkbox是否被选中

DOM对象转成jQuery对象:

对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象)

如：var v=document.getElementById("v"); //DOM对象

var $v=$(v); //jQuery对象

转换后，就可以任意使用jQuery的方法了。

四、JQuery的模块（类库）

参考地址：

(1)、选择器

直接找到某个或者某类标签

@1. id    $('#id') @2. class    
     
    $(".c1") @3. 标签    
            
      f       
      f    
     
    
            
      f    
     
    
            
       
      
    
     
    $('a') @4. 组合a    
            
      f       
      f    
     
    
            
      f    
     
    
            
       
      
    
     
    $('a')    $('.c2')    $('a,.c2,#i10') @5. 层级    $('#i10 a') 子子孙孙    $('#i10>a') 儿子 @6. 基本    :first    :last    :eq() @7. 属性    $('[alex]')       具有alex属性的所有标签    $('[alex="123"]') alex属性等于123的标签                    $("input[type='text']")    $(':text')

(2)、实例

多选，反选，全选 - 选择权 -    $('#tb:checkbox').prop('checked');        获取值    $('#tb:checkbox').prop('checked', true);  设置值 -    jQuery方法内置循环： $('#tb:checkbox').xxxx - $('#tb:checkbox').each(function(k){
         // k当前索引       // this，DOM，当前循环的元素 $(this)    }) - var v = 条件 ? 真值 : 假值

(3)、筛选

$('#i1').next() $('#i1').nextAll() $('#i1').nextUntil('#ii1') 
         
      asdf    
      asdf    
      asdf    
      asdf    
      asdf    
      asdf 
     
 $('#i1').prev() $('#i1').prevAll() $('#i1').prevUntil('#ii1') $('#i1').parent() $('#i1').parents() $('#i1').parentsUntil() $('#i1').children() $('#i1').siblings() $('#i1').find() $('li:eq(1)') $('li').eq(1) first() last() hasClass(class)

(4)、文本操作

$(..).text()           # 获取文本内容 $(..).text(“1”) # 设置文本内容 $(..).html() $(..).html("1") $(..).val()  #获取值 $(..).val(..)

(5)、样式操作

addClass

removeClass

toggleClass

(6)、属性操作

@1 专门用于做自定义属性 $(..).attr('n') $(..).attr('n','v') $(..).removeAttr('n')

@2专门用于chekbox,radio $(..).prop('checked') $(..).prop('checked', true) PS:    index 获取索引位置

(7)、文档处理

append

prepend

after

before

remove

empty

clone

(8)、css处理

$('t1').css('样式名称', '样式值') 点赞：     - $('t1').append()     - $('t1').remove()     - setInterval     - 透明度 1 》 0     - position     - 字体大小，位置

(9)、位置

$(window).scrollTop()  获取 $(window).scrollTop(0) 设置 scrollLeft([val]) offset().left                 指定标签在html中的坐标 offset().top                  指定标签在html中的坐标 position()                       指定标签相对父标签(relative)标签的坐标 
         
             
       
    
      
 
     
 $('i1').height()           # 获取标签的高度 纯高度 $('i1').innerHeight()      # 获取边框 + 纯高度 + ？ $('i1').outerHeight()      # 获取边框 + 纯高度 + ？ $('i1').outerHeight(true)  # 获取边框 + 纯高度 + ？ # 纯高度，边框，外边距，内边距

(10)、事件

DOM： 三种绑定方式(bind、unbind、delegate、undelegate、on、off）

jQuery：       $('.c1').click()       $('.c1').....       $('.c1').bind('click',function(){
         })       $('.c1').unbind('click',function(){
         })       $('.c').delegate('a', 'click', function(){
         })       $('.c').undelegate('a', 'click', function(){
         })       $('.c1').on('click', function(){
         })       $('.c1').off('click', function(){
         })    阻止事件发生       return false    # 当页面框架加载完成之后，自动执行    $(function(){
         $(...)    })

五、JQuery的扩展

- $.extend        $.方法 - $.fn.extend     $(..).方法 (function(){
      var status = 1;    // 封装变量 })(jQuery)

六、课堂实操（部分）

(1)、练习1

(2)、练习2

       
          Title                      
     
                                                            选项                          IP                          PORT                     
               
                                                                                     1.1.1.1                          80                     
                                                                      1.1.1.1                          80                     
                                                                      1.1.1.1                          80

选项	IP	PORT
	1.1.1.1	80
	1.1.1.1	80
	1.1.1.1	80

(3)、练习3

(4)、练习4

(5)、练习5

       
          Title            添加     
     
                                           1.1.1.11                      80                      80                                       编辑 | 删除                             
                                     1.1.1.12                      80                      80                                       编辑 | 删除                             
                                     1.1.1.13                      80                      80                                       编辑 | 删除                             
                                     1.1.1.14                      80                      80                                       编辑 | 删除

(8)、练习8

(9)、练习9

(11)、练习11

(12)、练习12

(14)、练习14

(15)、练习15

(16)、练习16

       
          Title       走你1     走你2

(17)、练习17

       
          Title

(18)、练习18

       
          Title

转载于:https://www.cnblogs.com/wspkh/p/6138481.html

你可能感兴趣的文章

【Golang 接口自动化08】使用标准库httptest完成HTTP请求的Mock测试

ASP.NET MVC Model绑定(二)

1.1.1.11	80	80	编辑 \| 删除
1.1.1.12	80	80	编辑 \| 删除
1.1.1.13	80	80	编辑 \| 删除
1.1.1.14	80	80	编辑 \| 删除