jQuery
是瑞瑞小甜心
这个作者很懒,什么都没留下…
展开
-
17、 jQuery 插件
17、 jQuery 插件jQuery 功能比较有限,想要更复杂的特效效果,可以借助于 jQuery 插件完成。 这些插件也是依赖于jQuery来完成的,所以必须要先引入jQuery文件,因此也称为 jQuery 插件。 jQuery 插件常用的网站:jQuery 插件库 http://www.jq22.com/jQuery 之家 http://www.htmleaf.com/jQuery 插件使用步骤:引入相关文件。(jQuery 文件 和 插件文件)复制相关html原创 2021-12-07 21:07:48 · 355 阅读 · 0 评论 -
16、发布留言效果
16、发布留言效果案例1、发布留言案例分析(1) 点击发布按钮, 动态创建一个小li,放入文本框的内容和删除按钮, 并且添加到ul 中。(2)点击的删除按钮,可以删除当前的微博留言2、代码实现(1)引入js文件<script src="jquery.min.js"></script>(2)页面样式 * { margin: 0; padding: 0 } ul {原创 2021-09-26 11:41:16 · 51 阅读 · 0 评论 -
15、tab栏切换
15、tab栏切换1、tab 栏切换案例分析(1)点击上部的li,当前li 添加current类,其余兄弟移除类。(2)点击的同时,得到当前li 的索引号(3)让下部里面相应索引号的item显示,其余的item隐藏2、代码实现(1)引入js文件<script src="jquery.min.js"></script>(2)页面样式* { margin: 0; padding: 0; }原创 2021-09-26 11:40:36 · 105 阅读 · 0 评论 -
14、jQuery排他思想
14、jQuery排他思想1、排他思想案例分析实现多选一的效果,当前元素设置样式,其余的兄弟元素清除样式2、代码实现(1)引入js文件<script src="jquery.min.js"></script>(2)页面样式<button>排他思想</button><button>排他思想</button><button>排他思想</button>(3)js代码 $(function()原创 2021-09-26 11:39:37 · 129 阅读 · 0 评论 -
13、多库共存
13、多库共存1、问题概述jQuery使用作为标示符,随着jQuery的流行,其他js库也会用这作为标示符,随着jQuery的流行,其他 js 库也会用这作为标示符,随着jQuery的流行,其他js库也会用这作为标识符, 这样一起使用会引起冲突。2、客观需求需要一个解决方案,让jQuery 和其他的js库不存在冲突,可以同时存在,这就叫做多库共存。3、 解决方案:(1)把里面的 $ 符号 统一改为 jQuery。 jQuery(''div'') (2)给jQuery 变量规定新的名称$.原创 2021-09-26 11:39:04 · 66 阅读 · 0 评论 -
12、jQuery 拷贝对象
12、jQuery 拷贝对象如果想要把某个对象拷贝(合并) 给另外一个对象使用,可以使用 $.extend() 方法$.extend([deep], target, object1, [objectN]) ①deep: 如果设为true 为深拷贝, 默认为false 浅拷贝②target: 要拷贝的目标对象③object1:待拷贝到第一个对象的对象。④objectN:待拷贝到第N个对象的对象。⑤浅拷贝目标对象引用的被拷贝的对象地址,修改目标对象会影响被拷贝对象。⑥深拷贝,前面加true,原创 2021-09-25 00:17:46 · 97 阅读 · 0 评论 -
11、 jQuery 事件对象
11、 jQuery 事件对象1、事件被触发,就会有事件对象的产生 $(function() { $(document).on("click", function() { console.log("点击了document"); }) $("div").on("click", function(event) { // console.log(event); event就是事件对象 console.log("点击了div");原创 2021-09-25 00:17:16 · 38 阅读 · 0 评论 -
10、jQuery 事件处理
10、jQuery 事件处理1、on() 绑定事件(1) on()方法可以绑定1个或者多个事件处理程序element.on(events,[selector],fn)①events:一个或多个用空格分隔的事件类型,如"click"或"keydown"② selector: 元素的子元素选择器 。③ fn:回调函数 即绑定在元素身上的侦听函数。// on()绑定多个事件$(“div”).on({ mouseover: function(){}, mouseout: function(){原创 2021-09-25 00:16:23 · 128 阅读 · 0 评论 -
9、事件处理
9、jQuery 事件注册单个事件注册element.事件(function(){}) $(“div”).click(function(){ 事件处理程序 }) 其他事件和原生基本一致 (如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等)$("div").click(function() { $(this).css("background", "purple"); });$("div").mou原创 2021-09-25 00:15:46 · 33 阅读 · 0 评论 -
8、jQuery 尺寸、位置操作
8、jQuery 尺寸、位置操作1、jQuery 尺寸语法用法width()/height获取设置元素 width和height大小值innerWidth() / innerHeight()获取设置元素width和height值,包含paddingouterWidth() / outerHeight()获取设置元素width和height值,包含padding + borderouterWidth(true) / outerHeight(true)获取设置原创 2021-09-25 00:15:08 · 53 阅读 · 0 评论 -
7、jQuery 元素操作
7、jQuery 元素操作主要是遍历、创建、添加、删除元素操作1、遍历元素jQuery 隐式迭代对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作,就需要用到遍历(类似for,但是比for强大)(1) each() 方法遍历元素$("div").each(function (index, domEle) { xxx; }) ①回调函数第一个参数是索引号 可以自己指定索引号号名称②回调函数第二个参数是dom元素对象 也是自己命名③如果要使用jquery方法,需要将这个dom元素转换原创 2021-09-25 00:14:31 · 57 阅读 · 0 评论 -
6、jQuery 内容文本值
6、jQuery 内容文本值jQuery 内容文本值主要针对元素的内容和表单的值操作1、普通元素内容 html()相当于原生inner HTMLhtml() // 获取元素的内容html("内容") // 设置元素的内容2、普通元素文本内容 text()相当与原生 innerTexttext() // 获取元素的文本内容text("文本内容") // 设置元素的文本内容3、表单的值 val()相当于原生valueval() // 获取表单的值val("内容") // 设置原创 2021-09-25 00:13:51 · 48 阅读 · 0 评论 -
5、jQuery 属性操作
5、jQuery 属性操作1、设置或获取元素固有属性值 prop()所谓元素固有属性就是元素本身自带的属性,比如 元素里面的 href ,元素里面的 type等(1)获取元素固有属性值// prop("属性")$("input").change(function() {console.log($(this).prop("checked")); // 查看checked状态 (2)设置属性// prop("属性", "属性值")$("a").prop("title", "修改");2原创 2021-09-25 00:13:08 · 42 阅读 · 0 评论 -
4、 jQuery 效果
4、 jQuery 效果1、显示隐藏效果(1)显示 // show([speed,[easing],[fn]]) $("div").show(1000, function() { alert(1); });(2)隐藏// hide([speed,[easing],[fn]])$("div").hide(1000, function() { alert(1); });(3)显示隐藏切换// toggle([speed,[easin原创 2021-09-25 00:12:25 · 59 阅读 · 0 评论 -
3、jQuery 样式操作
3、jQuery 样式操作1、操作 css 方法(1)参数只写属性名,则是返回属性值$("div").css(''color'');(2)参数是属性名,属性值,逗号分隔,是设置一组样式$("div").css(''color'', ''red''); // 属性名必须加引号$("div").css("width", 300); // 值如果是数字可以不用跟单位加引号(3) 参数可以是对象形式,方便设置多组样式 $("div").css({ // 属性名和属性值用冒原创 2021-09-25 00:11:55 · 84 阅读 · 0 评论 -
2、jQuery 选择器
1、jQuery 基础选择器$(“选择器”) // 里面选择器直接写 CSS 选择器即可,但是要加引号名称 用法 ID选择器 $("#id") 类选择器 $(".class") 标签选择器 $("div") 全选选择器 $("*") 并集选择器 $("div,p,li") 交集选择器 $("li.current") 2、jQuery 层级选择器名称 用法 子代选择器 $("ul>li") 后代选择器原创 2021-09-24 23:58:05 · 68 阅读 · 0 评论 -
1、jQuery 概述和基本使用
1、jQuery 概述jQuery 是一个 JavaScript 库。j 就是 JavaScript; Query 查询; 意思就是查询js,把js中的DOM操作做了封装,我们可以快速的查询使用里面的功能。学习jQuery本质就是学习调用这些函数(方法)。2、jQuery 的基本使用2.1 jQuery 的下载官网地址: jQuery各个版本的下载:jQuery CDN2.2 jQuery 的使用步骤(1)引入 jQuery 文件 (2)直接使用2.3 jQuery 的入口函原创 2021-09-24 23:54:02 · 182 阅读 · 0 评论