jQuery
jQuery学习笔记
杨蛋蛋~R
花自向阳开放 我自向前成长
展开
-
jQuery的尺寸,位置操作
jQuery的尺寸,位置操作jQuery尺寸项目 |语法用法width()/height()取得匹配元素宽度和高度值 只算widyh / heigthinnerWidth()/innerHeight()取得匹配元素的宽度和高度值,包括paddingouterWidth()/outerHeight()取得匹配元素宽度和高度值,包括padding和borderouterWidth(true)/outerHeight(true)取得匹配元素宽度和高度值,包原创 2020-10-18 11:09:52 · 187 阅读 · 0 评论 -
ToDoList案例(重要)
ToDoList案例1.文本框里面输入内容,按下回车,就可以生成代办事项2.点击代办事项复选框,就可以把当前数据添加到已完成事项里面3.点击已完成事项复选框,就可以把当前数据添加到代办事项中4.但是本页面内容不会丢失分析:1.刷新页面不会丢失数据,因此需要用到本地存储locastorage2.核心思路:不管按下回车还是点击复选框,都是把本地存储加载到页面中,这样保证书信关闭页面不会丢失数据。3.存储的数据格式: var todolist = [ { title : ‘xxx’ done原创 2020-10-17 19:47:16 · 1238 阅读 · 0 评论 -
jQuery插件 / 图片懒加载
jQuery插件jQuery的功能有限,想要更复杂的特效效果,可以借助插件完成。注意:这些插件也是依赖于jQuery完成的,所以必须要先引入 jQuery文件,因此也称为jQuery插件。jQuery常用插件网站:jQuery插件库: http://www.jq22.com/jQuery之家:http://www.htmleaf.com/ (更推荐)使用步骤:1.引入相关文件(jQuery文件和插件文件)2.复制相关html,css,js调用文件图片懒加载土拍你使用延迟加载可提高网页下载原创 2020-10-12 21:54:56 · 272 阅读 · 0 评论 -
jQuery对象拷贝/jQuery多库共存
jQuery其他方法jQuery对象拷贝想要把某个对象拷贝(合并)给另外一个对象使用,此时可以使用 $.extend()方法语法:$.extend([deep],target,object1,[objectN]1.[deep]:如果设置为true 则是深拷贝 ,默认为false 浅拷贝2.target:要拷贝的目标对象3.object1:待被拷贝的第一个对象(就是把这个拷贝给target,不止一个)4.[objectN]:待拷贝到第N个对象的对象5.浅拷贝是把被拷贝的对象复杂数据类型中的地址原创 2020-10-12 14:43:22 · 103 阅读 · 0 评论 -
jQuery事件-on () 方法/off()方法/ triggle()/事件对象
jQuery事件jQuery事件注册单个事件注册element.事件(function(){.....})事件绑定 on () 方法在匹配元素上绑定一个或多个事件的事件处理函数语法:element.on(events,[selector],fn)events:一个或多个用空格分割的事件类型,比如click 或 keydown[selector]:元素的子元素选择器fn:回调函数,即绑定在元素身上的侦听函数(1)on ( ) 实现多个事件注册: // 1. on ( ) 实现多个事件注册:原创 2020-10-12 13:29:54 · 339 阅读 · 0 评论 -
jQuery内容文本值/元素操作
jQuery内容文本值主要针对元素的内容和表单的值操作普通元素内容 html() (相当于原生innerHTML)(1) 获取元素设置内容 html() 连着标签一起显示(2) 获取设置元素文本内容 text() 只得到文本(3) 获取设置表单值 val() $(function() { //获取元素设置内容 html() 连着标签一起显示 console.log($("div").html()); $("div").html("原创 2020-10-12 11:07:18 · 453 阅读 · 0 评论 -
jQuery属性操作-prop()/attr()/data()
jQuery属性操作设置或获取元素固有属性值 prop()元素固有属性值就是元素本身自带的属性,比如<a>元素里面的 href ,比如<input>里面的 typeprop("属性")prop("属性","属性值")修改/获取自定义属性attr()(类似于原生js里面的getAttribute/setAttribute)数据缓存data() data方法可以在指定的元素上存储数据,并不会修改DOM元素结构,一旦页面刷新,之前存放的数据都将移除...原创 2020-10-12 08:58:14 · 182 阅读 · 0 评论 -
jQuery效果-自定义动画效果animate /王者荣耀手风琴效果案例
jQuery效果自定义动画效果animateanimate([params,[speed],[easing],[fn])(1)params:想要更改的样式属性,以对象形式传递,必须写,属性名可以不带引号,如果是复合属性则需要采取驼峰命名法 borderLeft ,其余参数都可以省略(2)speed:三种预定速度之一的字符串(“slow”、“normal"、“fast”)或表示动画时长的毫秒数值(如:1000)(3)easing:用于指定切换效果,默认是"swing",可用参数"linear"(4原创 2020-10-11 17:56:17 · 478 阅读 · 0 评论 -
jQuery效果-显示与隐藏效果/滑动效果 / 高亮显示案例
jQuery效果显示与隐藏效果显示语法规范:show([speed,[easing],[fn])显示参数(1)参数都可以省略,无动画直接显示(2)speed:三种预定速度之一的字符串(“slow”、“normal"、“fast”)或表示动画时长的毫秒数值(如:1000)(3)easing:用于指定切换效果,默认是"swing",可用参数"linear"(4)fn : 回调函数,再动画完成时执行的函数,每元素执行一次( 其他效果可查看jquery 的 API)<body>原创 2020-10-11 15:55:48 · 240 阅读 · 0 评论 -
jQuery样式操作/案例:Tab栏切换
jQuery样式操作jQuery可以使用css修改简单样式,也可以使用类修改多个样式修改简单样式:参数只写属性名,则是返回属性值参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号参数可以是对象形式,方便设置多组样式,属性名和属性值用冒号隔开,属性可以不加引号,如果是复合属性则必须采取驼峰命名法,如果值不是数字,则必须加引号 $(function(){ //1.参数只写属性名,则是返回属性值 console.原创 2020-10-10 22:40:34 · 740 阅读 · 0 评论 -
jQuery的排他思想 /案例:淘宝服饰精品案例分析
jQuery的排他思想想要多选一的效果,排他思想:当前元素设置样式,其余兄弟元素清除样式案例:点击的按钮变色 <script src="jquery.min.js"></script></head><body> <button>选择</button> <button>选择</button> <button>选择</button> <butto原创 2020-10-10 20:09:58 · 281 阅读 · 0 评论 -
jQuery基础语法-选择器/设置样式/筛选方法
jQuery基础语法jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。美元符号定义 jQuery,jQuery基础选择器原生js获取元素的方式有很多,很杂,jQuery做了封装,使元素统一标准$("选择器") //里面选择器直接写CSS选择器即可,但是要加引号名称用法描述ID选择器$("#id")获取指定ID的元素全选选择器$(’*’)匹配所有元素类选择器$(".class")获取同一类class元素标签选择器$(“d原创 2020-10-10 17:33:07 · 335 阅读 · 0 评论 -
jQuery概述 / Dom对象与jQuery对象
jQuery概述javascript库,即library,是一个封装好的特定的集合(方法和函数),就是在这个库里面。封装了很多预先定义好的函数在里面,比如动画animate、hide、show,比如获取元素简单理解,就是一个js文件,里面对原生js进行了封装,存放到里面,这样我们可以快速高效地使用这些封装好了的功能。直接调用就好了。比如 jQuery,就是为了快速方便地操作DOM,里面基本都是函数(方法)。里面都是用原生js实现的。常见js库:jQuery、prototype、YUI、Dojo、E原创 2020-10-10 13:48:52 · 224 阅读 · 0 评论