jQuery 编程笔记

Flavor_
319 阅读4分钟

一、jQuery概述

1.js库

即library，是一个封装好的特定的集合（函数，方法）

2.jQuery的概念 即一个js库

优点：轻量级/兼容性好 等等

二、jQuery基本使用

1，2下载 引用

<head>
<script src="jquery.js"></script>
</head>

3.jQuery的入口函数

 $(function() {
            $('div').hide();
        })

4.jQuery的顶级对象$

相当于原生js的window 可通过$调用方法

5.jQuery对象和DOM对象

  • DOM对象 原生js获取过来的对象 / jQuery对象 用$('');获取
  • jQuery对象本质是：利用$对DOM对象包装后产生的对象（伪数组形式存储） jQuery 对象只能使用jQuery方法，DOM 对象则使用原生的js 属性和方法

DOM对象与jQuery对象之间的相互转换

  1. DOM对象转换为jQuery对象：$(DOM对象)
  2. jQuery对象转换为DOM对象：$('div')[index] / $('div').get(index)

jQuery常用API

一、jQuery选择器

  1. $('选择器')

  2. 层级选择器： 子代选择器 > 等

  3. jQuery隐式迭代（重要） ---- 对元素进行相同操作时

    遍历内部DOM元素（伪数组形式存储） 的过程就叫做 隐式迭代

  4. jQuery筛选选择器

  • $('li:first') 获取第一个li元素
  • $('li:last') 获取最后一个li元素
  • $('li:eq(index)') 获取到的li元素中 选择元素 索引号从 0 开始
  • $('li:odd') 获取到的li元素中 ，索引号为 奇数的元素
  • $('li:even') 获取到的li元素中 ， 索引号为 偶数的元素
  1. jQuery筛选方法（重点）
  • $('li').parent() 查找父级 返回的是最近一级的父级元素 亲爸爸
  • $('ul').children('li') 相当于$('ul>li') 最近一级 亲儿子
  • $('ul').find('li') 相当于$('ul li') 后代选择器
  • $('.first').siblings('li') 查找兄弟节点，不包括自己本身
  • $('.first').nextAll() 查找当前元素之后所有的同辈元素
  • $('.first').prevtAll() 查找当前元素之前所有的同辈元素
  • $('div').hasClass('protected') 检查当前的元素是否含有某个特定的类 如果有返回 true
  • $('li').eq(index) 相当于$('li':eq(index)) ,index从0开始
  • $(this) jQuery当前元素 this不加引号

  1. jQuery里面的排他思想

    应用隐式迭代

jQuery得到当前元素索引号 $(this).index()

二、jQuery样式操作

1.操作css方法

  • $(this).css('color') // 只写属性名，返回属性值
  • $(this).css('color','red')
  • $(this).css({ ... }) //对象形式 如果是复合属性 必须采取驼峰命名法，如果值不是数字，则需要加引号 2.设置类样式方法
  • 添加类： $('div').addClass('current')
  • 删除类：$('div').removeClass('current')
  • 切换类：$('div').toggleClass('current')

链式编程：

原因：因为很多jQuery方法直接返回 当前的jQuery对象，所以可以接着. 出方法；

  1. 不返回jQuery对象的方法：val(),html(),text(),attr(), 返回文本字符串；
  2. 返回新的jQuery对象的方法：next() nextAll() parent() children() prev() ...
  3. 剩下基本都是返回当前jQuery对象；

3.类操作与className区别

className会覆盖原先的类名 jQuery中 addClass不会，相当于追加类名

三、jQuery效果

1.显示隐藏

  • show([speed],[easing],[fn])
  • hide([speed],[easing],[fn])
  • 切换：toggle(); 一般情况下里面不加参数 直接显示隐藏 2.滑动
  • 下滑动 slideDown();
  • 上滑动 slideUp()
  • 切换滑动 slideToggle()

3.事件切换 hover([over],out) 参数为(经过事件,离开事件)

  • 事件切换 hover 如果只写一个函数 那么鼠标经过和鼠标离开都会触发这个函数 4.动画队列及其停止排队方法
  • 停止排队 stop() 需要写在动画的前面 5.淡入淡出
  • 淡入 fadeIn();
  • 淡出 fadeOut();
  • fadeTo(speed,opacity); //修改透明度 speed opacity 速度(ms)，透明度必须写 取值0~1
  • 切换 fadeToggle(); 6.自定义动画 animate

语法 animate(params,[speed],[easing],[fn])

params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不带引号，如果是复合属性则需要采取驼峰命名法。

animate返回顶部： //不能是文档 而是 html和body做动画

$("body,html").stop().animate({
           scrollTop:0
        })

四、jQuery属性操作

1.设置或获取元素固有属性值 prop()

  • 获取属性语法 prop("属性")
  • 设置属性语法 prop("属性","属性值") 2.设置或获取元素自定义属性 attr()
  • 获取属性语法 attr("属性") //类似原生getAttribute()
  • 设置属性语法 attr("属性","属性值") //类似原生setAttribute()
  • H5的自定义属性也可以得到 (data-...) 3.数据缓存 data() 这个里面数据放在元素的内存里面
  • 附加数据语法 data("name","value") //向被选元素附加数据
  • 获取数据语法 date("name") //向被选元素获取数据
  • 可以获取H5自定义属性 data-index 得到数字型

:checked 可以获得被选中的个数 $(".j-checkbox:checked").length

五、jQuery内容文本值

  1. 普通元素内容html() 相当于原生innerHTML
  2. 普通元素文本内容 text() 相当于原生innerText
  3. 获取设置表单值 val() 相当于原生value 其它：
  • 截取字符串 substr(1)
  • parents();选择器 找出所有祖级元素
  • praents("选择器");选择器 找出指定祖级元素
  • 保留两位小数 .toFiexd(2);

六、jQuery元素操作

1.遍历元素

  • 语法1：$("div").each(function(index,demEle){}) index是索引号，demEle是每个DOM元素对象，不是jQuery对象 （需要转换为jQuery对象 $(demEle)）
  • 语法2：$.each($("div"),funciton(index,demEle{})) 方法遍历元素 主要用于遍历数据(数组/对象) 处理数据$.each(arr / { name: " " , age: },funcition(i,ele){})

2.创建元素

$("<li></li>");

3.添加元素

  • 内部添加：element.append(); //放到内容的最后面 《父子级》 element.prepend(); //放在内容的最前面
  • 外部添加：element.after("内容") //把内容放在元素后面 《兄弟关系》 element.before("内容") //把内容放在元素前面
  • 删除元素：
  1. element.remove(); //删除匹配的元素（本身）
  2. element.empty(); //删除匹配的元素集合中的所有子节点
  3. element.html("""") //清空匹配的元素内容

jQuery事件

一、jQuery事件注册

单个事件注册 ： element.事件(function(){})

二、jQuery事件处理

1.事件处理on() 绑定事件

语法：element.on(events,[selector ：元素的子元素选择器],fn)

事件委派：把原来给子元素身上的事件绑定在父元素身上

3.自动触发事件 trigger()

  1. 元素.事件()
  2. 元素.trigger("事件")
  3. 元素.triggerHandler("事件") 不会触发元素的默认行为

三、jQuery事件对象

  • 阻止默认行为：event.preventDefault() 或者 return false
  • 阻止冒泡：event.stopPropagation()

jQuery 其它方法

一、jQuery拷贝对象 $.extend([deep],target,object1,[objectN])

  1. deep:true为深拷贝 默认false 浅拷贝
  2. target：要拷贝的对象
  3. object1：待拷贝到第一个对象的对象
  4. 浅拷贝是把复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象
  5. 深拷贝 完全克隆，所有的数据对象 ，不会覆盖，如果有不冲突的属性会合并在一块 二、多库共存

解决方案：

  1. 把$符号 统一改为 jquery
  2. jQuery变量规定新的名称： $.noConflict() var xx=$.noConflict(); 三、jQuery插件 ： jQuery之家
  • 瀑布流插件
  • 图片懒加载： 可视区域 显示图片 js写在dom元素的最后面
  • 全屏滑动
  • bootstrap插件

jQuery尺寸，位置操作

一、jQuery尺寸

  • width()/height() //去的匹配元素宽度和高度 只算width/height
  • innerWidth()/innerHeight() // 包含padding
  • outerWidth()/outerHeight() //包含padding，border
  • outerWidth(true)/outerHeight(true) //包含padding，border，margin 二、jQuery位置

offset() position() scrollTop()/Left()

  • 1.offset() 获取设置距离文档的位置（偏移） 跟父级没有关系
  • 2.position() 获取相对于带有定位的父级元素的位置（偏移） 如果没有带定位的父级 则以文档为基准 // 这个方法不能设置偏移
  • 3.scrollTop()/scrollLeft() 获取设置被卷去的头部和左侧
avatar
文章
阅读
粉丝