12_JQuery
jQuery是一个快速、简洁的JavaScript框架。具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。
l0510402015
这个作者很懒,什么都没留下…
展开
-
25、JQuery的插件机制(实现JQuery固有方法以外的自定义方法)
插件机制:增强JQuery的功能在jQuery没有发现我们需要的某个方法,这个时候我们不能直接修改jQuery源代码,但是我们可以使用jQuery中的插件扩展机制。1.实现方式:1.$.fn.extend(object)--- 对象级插件作用:个人理解就是定义1~n组方法,这些方法可以被JQuery对象调用,相当于用于自定义一些jQuery对象方法。* 增强通过Jquer...原创 2020-05-13 22:09:11 · 206 阅读 · 0 评论 -
24、JQuery案例(抽奖)
需求:1、点击“点击开始”按钮,小图片位置开始周期随机显示小图标;2、点击“点击停止”按钮,小图片位置停止随机显示,并将当前小图片在大图片位置进行显示。3、未抽奖是“点击开始”按钮有效,“点击停止”按钮灰色显示失效。当正在抽奖时则反之。分析:1.给开始按钮绑定单击事件1.1 定义循环定时器1.2 切换小相框的src属性*定义数组,存放图片资源路径*生成随机数。数组索引...原创 2020-05-13 19:38:07 · 1231 阅读 · 0 评论 -
23、JQuery案例(显示/隐藏图片)
给定一个div模块,模块的功能是展示一幅图片。1、定时3秒后将图片显示出来。2、图片显示突然后再过5秒后再将图片隐藏。3、上述功能采用JQuery的功能进行实现。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>广告的自动显示与隐藏</title> <style> #content{width:10原创 2020-05-13 19:31:51 · 518 阅读 · 0 评论 -
22、采用JQuery实现事件的绑定、解绑、切换
事件绑定:就是通过JQuery方法给对象绑定一些时间1.jquery标准的绑定方式* jq对象.事件方法(回调函数);* 注:(1)如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。比如:* jq对象.focus(); //会让jq对象自动获得焦点* 表单对象.submit();//让表单提交(2)一个对象可以绑定多个事件方法,而且可...原创 2020-05-13 17:20:42 · 455 阅读 · 0 评论 -
21、JQuery实现标签的遍历
一、传统的JS遍历方法格式:for(初始化值;循环结束条件;步长)举例:对一组列表中的li标签内容进行获取、判断显示<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-3.3.1.min.js" type="text/javascript" chars.原创 2020-05-13 17:00:01 · 1186 阅读 · 0 评论 -
20、JQuery实现动画(JQuery对象显示、隐藏、切换)
三种方式显示和隐藏元素1.默认显示和隐藏方式1.show([speed,[easing],[fn]])1.参数:1.speed:动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如:1000)2.easing:用来指定切换效果,默认是"swing",可用参数"linear"* swin...原创 2020-05-13 17:02:02 · 351 阅读 · 0 评论 -
19_(案例)使用JQuery实现元素的移动
模拟两个选项框中的选项可以互相移动<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="../../js/jquery-3.3.1.min.js"></script>...原创 2020-04-14 14:51:20 · 376 阅读 · 0 评论 -
18_(案例)使用JQuery实现元素的添加(利用复制功能)
模拟实现在留言里面添加QQ表情<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>QQ表情选择</title> <script src="../../js/jquery-3.3.1.min.js"></scri...原创 2020-04-14 14:48:29 · 470 阅读 · 0 评论 -
17_(案例)使用JQuery实现表单选项的全选与全不选
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="../../js/jquery-3.3.1.min.js"></script> <script> /...原创 2020-04-14 14:44:16 · 167 阅读 · 0 评论 -
16_(案例)使用JQuery实现表单隔行换色
注意:需要根据自己工程导包位置来设置<script src="../../js/jquery-3.3.1.min.js"></script>语句<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> ...原创 2020-04-14 13:24:14 · 233 阅读 · 0 评论 -
15_JQuery DOM操作之移除元素、清空某元素所有子元素
9.remove():移除元素* 对象.remove():将对象删除掉10.empty():清空元素的所有后代元素。* 对象.empty():将对象的后代元素全部清空,但是保留当前对象以及其属性节点<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> ...原创 2020-04-14 13:19:44 · 4701 阅读 · 0 评论 -
14_JQuery DOM操作之给某个元素添加子元素、将某个元素添加到另外一个元素后面
1.append():父元素将子元素追加到末尾* 对象1.append(对象2): 将对象2添加到对象1元素内部,并且在末尾2.prepend():父元素将子元素追加到开头* 对象1.prepend(对象2):将对象2添加到对象1元素内部,并且在开头3.appendTo():* 对象1.appendTo(对象2):将对象1添加到对象2内部,并且在末尾4....原创 2020-04-14 13:10:48 · 4753 阅读 · 0 评论 -
13_JQuery DOM操作之对class属性的删除、添加和切换
1.addClass():添加class属性值2.removeClass():删除class属性值3.toggleClass():切换class属性* toggleClass("one"):* 判断如果元素对象上存在class="one",则将属性值one删除掉。如果元素对象上不存在class="one",则添加4.css():设置样式<...原创 2020-04-14 13:05:28 · 891 阅读 · 0 评论 -
12_JQuery DOM操作之获取、设置和删除元素标签属性
1.attr(): 获取/设置元素的属性2.removeAttr():删除属性3.prop():获取/设置元素的属性4.removeProp():删除属性*attr和prop区别?1.如果操作的是元素的固有属性(就是在h5官方文档中列出的属性),则建议使用prop2.如果操作的是元素自定义的属性,则建议使用attr注意:有些固有举例:...原创 2020-04-14 13:02:55 · 450 阅读 · 0 评论 -
11_JQuery DOM操作之获取/设置标签体内容、文本和value值
可以通过JQuery说明文档的“属性”进行查看具体内容1.html(): 获取/设置元素的标签体内容(包括所包含的标签和标签的内容)( 如果选择器匹配多于一个的元素,那么只有第一个匹配元素的 HTML 内容会被获取。)* 举例:<a><font>内容</font></a>使用html()获取后<a>标签的结果...原创 2020-04-14 11:49:57 · 985 阅读 · 0 评论 -
10_JQuery选择器之表单过滤器
表单过滤选择器1.可用元素选择器* 语法: :enabled 获得可用元素2.不可用元素选择器* 语法: :disabled 获得不可用元素3.选中选择器* 语法: :checked 获得单选/复选框选中的元素4.选中选择器* 语法: :selected 获得下拉框选中的...原创 2020-04-07 14:48:37 · 199 阅读 · 0 评论 -
9_JQuery选择器之过滤选择器
过滤选择器1.首元素选择器* 语法: :first 获得选择的元素中的第一个元素2.尾元素选择器* 语法: :last 获得选择的元素中的最后一个元素3.非元素选择器* 语法: :not(selector) 不包括指定内容的元素4.偶数选择器* 语法: :even 偶数,从 ...原创 2020-04-07 11:36:38 · 118 阅读 · 0 评论 -
8_JQuery选择器之层级选择器
层级选择器1.后代选择器* 语法: $("A B ") 选择A元素内部的所有B元素,包括子子孙孙2.子选择器* 语法: $("A > B") 选择A元素内部的所有B子元素举例:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">...原创 2020-04-07 11:34:15 · 176 阅读 · 0 评论 -
7_JQuery选择器之属性选择器
属性选择器1.属性名称选择器* 语法: $("A[属性名]") 包含指定属性的选择器2.属性选择器* 语法: $("A[属性名='值']") 包含指定属性等于指定值的选择器3.复合属性选择器* 语法: $("A[属性名='值'][]...") 包含多个属性条件的选择器举例:<!DOC...原创 2020-04-07 11:32:29 · 219 阅读 · 0 评论 -
6_JQuery选择器之基本选择器
基本选择器1.标签选择器(元素选择器)* 语法: $("html标签名") 获得所有匹配标签名称的元素2.id选择器* 语法: $("#id的属性值") 获得与指定id属性值匹配的元素3.类选择器* 语法: $(".class的属性值") 获得与指定的class属性值匹配的元素4.并集选择器:...原创 2020-04-07 11:27:31 · 153 阅读 · 0 评论 -
5_JQuery选择器基本操作之样式控制
样式控制:css方法。有如下两种方式:方式一:$("#div1").css("background-color","red");方式二:$("#div1").css("backgroundColor","pink");注意:推荐使用方式二,因为如果写对了,按住crtl键,把鼠标移动到字符上会字体会变化(在软件intellIJ IDEA)<!DOCTYPE ht...原创 2020-04-02 15:50:25 · 110 阅读 · 0 评论 -
4_JQuery选择器基本操作之入口函数
入口函数1、格式$(function () {});2、window.onload和 $(function) 区别*window.onload 只能定义一次,如果定义多次,后边的会将前边的覆盖掉*$(function)可以定义多次的。<!DOCTYPE html><htm...原创 2020-04-02 15:41:29 · 90 阅读 · 0 评论 -
3_JQuery选择器基本操作之事件绑定
事件绑定:给某个标签添加时间,比如给按键添加鼠标点击响应。<html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.3.1.min.js"></script>...原创 2020-04-02 15:36:01 · 119 阅读 · 0 评论 -
2_JQuery对象与JS对象之间的转换
JQuery对象和JS对象区别与转换1.JQuery对象在操作时,更加方便。2.JQuery对象和js对象的方法不通用的.3.JQuery对象和js对象两者之间如何相互转换*jq -- > js : jq对象[索引] 或者 jq对象.get(索引)*js -- > jq : $(js对象)举例:<...原创 2020-04-02 15:14:41 · 180 阅读 · 0 评论 -
1_JQuery的概念和快速入门
1.概念: 一个JavaScript框架。简化JS开发* jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScr...原创 2020-04-02 15:12:55 · 137 阅读 · 0 评论