jQuery
该专栏为云知梦学习笔记
Bravo!!!
这个作者很懒,什么都没留下…
展开
-
jQuery常见的网页效果和函数工具
常见的网页效果:1.基本show();hide();toggle();就是前面的单击隐藏显示的实例2.滑动slideDown(); 内容向上滑动隐藏slideUp();slideToggle();<body> <h1>sheep</h1> <img src="sheep.png" alt="" /></body><script> $('h1').click(function.原创 2020-08-18 16:04:27 · 164 阅读 · 0 评论 -
jQuery | 事件JS的执行时机和事件操作
事件JS加载执行的时机1)DOM加载完毕把js标签放在body之后即可!2)资源加载完毕$(window).load(function(){ //代码 });3)jquery中实现等dom加载完毕$(function(){ //所有代码都是等dom加载完毕才会去执行!});一、页面载入$(document).ready(fn);$(fn);二、事件处理bind();unbind();one();三、事件委派live();di...原创 2020-08-18 15:09:30 · 284 阅读 · 0 评论 -
用jQuery实现一个网页上可隐藏的留言板
<!doctype html><html><head> <meta charset="utf-8"> <title>index</title> <style> *{ font-family: 微软雅黑; margin:0px; padding:0px; } .main{ .原创 2020-08-18 15:09:17 · 838 阅读 · 1 评论 -
jQuery实现网页上的内容拖拽
<html><head> <meta charset="UTF-8" /> <title>index</title> <style> #div1{ position: absolute; margin: 0px; } </style> <script src="jquery.js"><.原创 2020-08-18 11:17:08 · 211 阅读 · 0 评论 -
jQuery点击右键显示自己建立的右键菜单
上图分别为新建右键菜单和原有右键菜单<html><head> <meta charset="UTF-8" /> <title>index</title> <style> *{ margin: 0px; padding: 0px; } ul{ position: absolute; ..原创 2020-08-18 10:59:33 · 270 阅读 · 0 评论 -
jQuery | CSS样式处理
一、CSS样式css(); 获取样式css({}); 给元素赋予样式前面博客里有好多例子了,不想写了二、位置offset(); 获取匹配元素在当前视口的相对偏移返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效。实例——>传送门position();获取匹配元素相对父元素的偏移返回的对象包含两个整型属性:top 和 left。为精确计算结果,请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。实例——>...原创 2020-08-16 16:44:57 · 84 阅读 · 0 评论 -
jQuery实例 | 图标跟随鼠标的移动而移动
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>index</title> <style> *{ font-family: 微软雅黑; } .shop{ width:300px; height:300px; overflow: hidden; box-shadow:0px 0px 5p.原创 2020-08-16 16:38:09 · 439 阅读 · 0 评论 -
jQuery | 文档处理(内部追加、外部插入、包围、替换、删除、复制)
一、内部追加append();向每个匹配的元素内部追加内容appendTo() 把所有匹配的元素追加到另一个指定的元素元素集合中<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>index</title> <style> .div1,.div2{ hei...原创 2020-08-16 14:47:55 · 590 阅读 · 0 评论 -
jQuery | 属性值选择器
一、属性attr(); 获取属性值attr({}); 给属性设置值<body> <img src="dog.png" /></body><script>$('img').click(function(){ alert($(this).attr('src'));//获取图片的src属性值 $(this).attr({'src':'sheep.png'});//点击后设置图片为sheep图片})</script&原创 2020-08-15 20:36:56 · 131 阅读 · 0 评论 -
jQuery | 筛选选择器(过滤、查找、串联)
一、过滤筛选eq();first();last();not();slice();<head> <meta charset="UTF-8" /> <title>index</title> <script src="jquery.js"></script></head><body> <h1>00001</h1> <h1>原创 2020-08-15 16:31:08 · 223 阅读 · 0 评论 -
jQuery | 选择器(基础、层级、基本、内容、属性、子元素、表单、表单属性)
一、基础选择器二、层级选择器三、基本选择器四、内容选择器五、属性选择器六、子元素选择器七、表单选择器八、表单属性选择器原创 2020-08-15 15:44:52 · 172 阅读 · 0 评论 -
jQuery | 七种常用的核心方法
1.each()<body> <h1>aaaaaaaaaaaaaaaaaaaaaaa</h1> <h1>aaaaaaaaaaaaaaaaaaaaaaa</h1> <h1>aaaaaaaaaaaaaaaaaaaaaaa</h1> <h1>aaaaaaaaaaaaaaaaaaaaaaa</h1> <h1>aaaaaaaaaaaaaaaaaaaaaa原创 2020-08-14 12:21:10 · 125 阅读 · 0 评论 -
用jQuery实现网页的标签页效果
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>index</title> <style> *{ font-family: 微软雅黑; margin:0px; padding:0px; } .原创 2020-08-14 12:13:13 · 343 阅读 · 0 评论 -
JS对象和jQuery对象的区别和转换
jQuery就是JS中的new object生成的普通对象,然后在此对象上加方法和属性JS对象的方法不能与jQuery的对象共用!JS对象能与jQuery的对象互换!1.JS对象转换成jQuery对象将JS对象转换成jQuery对象的办法就是$(DOM);<script>imgobj=document.getElementById('imgid');imgobj.onclick=function(){}//把DOM对象转成jQuery对象$(imgobj).cli原创 2020-08-14 11:05:15 · 352 阅读 · 0 评论 -
jQuery | 用jQuery框架实现上一篇博客里JavaScript里的特效
一、toggle实现循环单击特效<html lang="en"><head> <meta charset="UTF-8" /> <title>Document</title> <style> *{ font-family: 微软雅黑; } </style> <script src="jquery.js"></script>原创 2020-08-13 20:41:05 · 148 阅读 · 0 评论