②jQuery 筛选、增删改、事件、淡入淡出效果、滑动效果、自定义动画

阅读量：3965 次

发布时间：2019-05-24

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

jQuery

本人是个新手，写下博客用于自我复习、自我总结。

如有错误之处，请各位大佬指出。
学习资料来源于：尚硅谷

筛选 first() last() eq()

filter()

在这里插入图片描述

not()

在这里插入图片描述

has()

在这里插入图片描述


   15_筛选_过滤	
   		
    AAAAA
		
    BBBBB
		
    CCCCC
		
    DDDDDD
		
    BBBBB
	
   
	eeeee
	EEEEE

筛选

children()

在这里插入图片描述

find()

在这里插入图片描述

parent()

在这里插入图片描述

prevAll()

在这里插入图片描述

nextAll()

在这里插入图片描述

siblings()

在这里插入图片描述


   16_筛选_查找孩子-父母-兄弟标签	
   
    class为box的div1
   
	
   
    class为box的div2
   
	
   
    div3
   
	class为box的span	
	
   		
    			
     span文本1			
     AAAAA
			
     BBBBB
			
     CCCCC
			
     DDDDDD
			
     span文本2
			
     span文本3		
    
		
    span文本444
    
		
    eeeee
		
    EEEEE

文档增删改

在这里插入图片描述

append()

在这里插入图片描述

prepend()

在这里插入图片描述

before()

在这里插入图片描述

after()

在这里插入图片描述

replaceWith()

在这里插入图片描述

empty()

在这里插入图片描述

remove()

在这里插入图片描述


   17_文档_增删改	
   		
    AAAAA
		
    BBBBB
		
    CCCCC
		
    DDDDDD
		
    EEEEE
		
    FFFFF
	
   
	
	
	
   		
    aaa
		
    bbb
		
    ccc
		
    ddd
		
    eee

事件的绑定与解绑 eventName() on() off() event.stopPropagation() event.preventDefault()

在这里插入图片描述


   18_事件绑定与解绑	
   
    		外部DIV		
    
     内部div
    
	
   
	
   		
    		
    		
    		
    百度一下

事件切换（面试题）

在这里插入图片描述


   19_事件切换	
   
    区分鼠标的事件
   
	
   
    		div1.....		
    
     div2....
    
	
   
	
   
    		div3.....		
    
     div4....

事件委托：引入


   20_事件委托_引入.html	
   		
    11111
		
    1111111
		
    111111111
		
    11111111111
	
   
	22222

事件委托2

在jQuery中，也可以像JS一样，通过事件委托，将多个子元素的事件监听委托给父辈元素处理，这样一来新添加的元素也会获得监听。

淡入淡出效果

在这里插入图片描述

fadeOut()

在这里插入图片描述

fadeIn()

在这里插入图片描述

fadeToggle()

在这里插入图片描述


   21_淡入淡出

滑动效果

在这里插入图片描述

slideDown()

在这里插入图片描述

slideUp()

在这里插入图片描述

slideToggle()

在这里插入图片描述


   22_滑动

显示与隐藏 show() hide() toggle()

在这里插入图片描述

用法和滑动、淡入淡出的一样，不再赘述


   23_显示与隐藏

自定义动画 animate() stop()

类似于BOM


   24_自定义动画					
   
    爱在西元前，学在尚硅谷

扩展插件

在这里插入图片描述

my_jQuery-plugin.js

/* 需求： 1. 给 $ 添加4个工具方法:   * min(a, b) : 返回较小的值   * max(c, d) : 返回较大的值   * leftTrim() : 去掉字符串左边的空格   * rightTrim() : 去掉字符串右边的空格 2. 给jQuery对象 添加3个功能方法: * checkAll() : 全选 * unCheckAll() : 全不选 * reverseCheck() : 全反选 */(function () {
     // 扩展$的方法  $.extend({
       min: function (a, b) {
         return a < b ? a : b    },    max: function (a, b) {
         return a > b ? a : b    },    leftTrim: function (str) {
         return str.replace(/^\s+/, '')    },    rightTrim: function (str) {
         return str.replace(/\s+$/, '')    }  })  // 扩展jQuery对象的方法  $.fn.extend({
       checkAll: function () {
         this.prop('checked', true) // this是jQuery对象    },    unCheckAll: function () {
         this.prop('checked', false)    },    reverseCheck: function () {
         // this是jQuery对象      this.each(function () {
           // this是dom元素        this.checked = !this.checked      })    }  })})()


   25_扩展插件	足球	篮球	羽毛球	乒乓球

多库共存

在这里插入图片描述

mylib.js

(function () {
     window.$ = function () {
       console.log('my lib $()...')  }})()


   26_多库共存

onload与ready

在这里插入图片描述


   window.onload与$(document).ready()	测试window.onload与$(document).ready()

尾声

到这里就介绍完了jQuery的常用方法，也可以发现介绍的都只是方法的用法，全是需要去记忆的，所以这也就是为什么建议有个jQuery的中文手册。学习jQuery当然有用，毕竟现阶段jQuery确实能够帮我们用简便的方法完成很多麻烦的事情。当我们去看源码可以发现，它的语法结构当然还是JS。更多的使用方法请各位翻阅jQuery中文手册。

转载地址：http://ooyki.baihongyu.com/

你可能感兴趣的文章

P10-c++对象和类-03this指针详细介绍，详细的例子演示

查看>>

Mule ESB-Content-Based Routing Tutorial（1）

查看>>

Mule ESB-Content-Based Routing Tutorial（2）

查看>>

Mule ESB-Content-Based Routing Tutorial（3）

查看>>

年末项目经验总结

查看>>