jquery
是小王啊i
沉淀
展开
-
jquery实现tab栏切换案例
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .box{ width: 450px; height: 450px; margin: 0 auto; }原创 2020-10-06 07:43:10 · 474 阅读 · 0 评论 -
jquery实现拖拽功能
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } #box { width: 80px; height: 80px; background-color: red原创 2020-10-06 07:42:56 · 1181 阅读 · 0 评论 -
jquery实现手风琴效果
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } li{ list-style: none; width: 200px; height: 500px; flo原创 2020-10-06 07:42:27 · 182 阅读 · 0 评论 -
jquery模拟手机聊天操作
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #box{ width: 300px; height: 500px; border: 3px solid ligh原创 2020-10-06 07:42:02 · 327 阅读 · 0 评论 -
jquery实现随机点名(点名器)
复制以下代码查看效果(注:记得导入jquery.js代码)<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #box{ width: 500px; /* height:原创 2020-10-06 07:41:34 · 1600 阅读 · 1 评论 -
jquery实现放大镜效果
复制下面代码查看效果html代码css代码jquery代码完整代码html代码 <ul> <li id="one"> <img src="./a3.jpg" alt="" width="100%" id="img"> <div id="small"></div> </li> <li id="two"> <img src="./a3.jpg" alt="" id="img1原创 2020-10-06 07:41:15 · 120 阅读 · 0 评论 -
jquery实现无限循环滚动
复制下面代码查看效果<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } div#outer{ width: 1000px; height: 200px; overf原创 2020-10-06 07:40:59 · 1558 阅读 · 1 评论 -
jquery淡入淡出
复制以下代码查看效果<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div:first-of-type{background:red; width:66px; height:66px;} div:nth-of-type(2){ width:6原创 2020-10-06 07:40:42 · 82 阅读 · 0 评论 -
jquery事件委托
事件委托事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。原理:利用冒泡的原理,把事件加到父级上,触发执行效果。好处:减少事件注册,提高性能。方法定义和用法:delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。语法:$(selector).delegate(childS原创 2020-10-02 16:45:09 · 306 阅读 · 0 评论 -
jquery事件属性讲解
事件属性1.event.type 该属性用于获得触发该事件的类型,对引发事件的不同操作,返回不同结果 $("p").click(function(event){alert(event.type);}); 该示例返回元素p单机事件的事件类型,结果打印是'click'。2.event.target 该属性用于获得触发事件的元素3.event.pageX 和 event.pageY 用这两个属性可以获得鼠标的相对于页面的当前位置4.event.preventDefault() 阻止默认事件原创 2020-10-02 16:42:16 · 114 阅读 · 0 评论 -
jquery事件详解
事件解析事件绑定事件移除鼠标事件键盘事件表单事件复合事件事件绑定1.直接使用事件名例:$("#btn").click(function(){ alert(1) })2.on(event,function)例:$('#btn').on('click', function(){ alert(2);})3.bind(event, function)例:$('#btn').bind('click', function(){alert(3);})事件移除1.off():通常用于移除通过on方原创 2020-10-02 16:38:40 · 148 阅读 · 0 评论 -
jquery中DOM操作
jquery怎么操作DOMeach方法操作内容操作元素属性操作元素的样式DOM节点操作each方法定义和用法:each() 方法为每个匹配元素规定运行的函数。提示:返回 false 可用于及早停止循环。语法:$(selector).each(function(index,element))参数描述:index - 选择器的 index 位置element - 当前的元素(也可使用 "this" 选择器)eg:$("li").each(function(){ alert($(this)原创 2020-10-02 16:24:25 · 83 阅读 · 0 评论 -
jquery选择器总结
jquery选择器总结基础选择器层次选择器过滤选择器属性选择器表单选择器jquery方法总结基础选择器1:基础选择器 id # class . 标签 div * 通配符 群组 #box,p css() 一个值的时候是找这个元素的值,两个值的时候是设置样式 举例 找元素的值: alert($('p').css('color')) 举例 设置元素的样式: $('#txt').css('color','red'); size() 返回的元素个数 举例:原创 2020-10-02 12:22:11 · 76 阅读 · 0 评论 -
jquery简介
jquery简介什么是jquery?jquery的作用?jquery优点jquery的引入方式本地引入和网站的引入的区别:jquery版本注意事项什么是jquery?它通过封装原生的 JavaScript 函数得到一整套定义好的方法。jquery的作用? 1.像 CSS 那样访问和操作 DOM 2.修改 CSS 控制页面外观 3.简化 JavaScript 代码操作 4.事件处理更加容易 5.各种动画效果使用方便 6.让 Ajax 技术更加完美 7.基于 jQuery 大量原创 2020-10-02 11:24:50 · 228 阅读 · 0 评论