jQuery
关注
分享
扫一扫
jQuery
veejaLiu
nice to meet you.
展开
-
手风琴导航栏侧边-jQuery实现-案例
效果展示：分析：首先是html界面的构建，我们用li标签和div标签组合成菜单栏。 <ul class="parentWrap"> <li class="menuGroup"> <span class="groupTitle">菜单1</span> <div>我是弹出...原创 2019-11-26 19:13:46 · 1041 阅读 · 0 评论 -
图片突出显示（图片高亮显示）-jQuery实现-案例
效果展示：当鼠标放在某一张图片上的时候，突出显示这张图片。分析：给鼠标移入的图片设置鼠标移入事件：把当前的图片透明度设置为1，其他兄弟节点的图片透明度设置为0.2；鼠标离开大的div， 把所有的图片的透明度设置为1。核心代码也十分的简单：$('.wrapli').mouseenter(function(){ //css方法有返回值，返回值就是设置的这个方法的元素本身 $(this...原创 2019-11-23 21:20:01 · 6824 阅读 · 7 评论 -
网页下拉菜单-jQuery实现-案例
效果展示：分析：给一级菜单设置鼠标移入事件，显示二级菜单。给一级菜单设置鼠标离开事件，隐藏二级菜单。核心代码非常简单，主要是利用选择器找到相应的元素就可以了。$('.wrap>ul>li').mouseover(function(){ // 谁触发了鼠标移入事件,谁就是this,this是一个dom对象 // show()方法的本质还是更新display的属性为bloc...原创 2019-11-23 20:19:59 · 1173 阅读 · 0 评论 -
jQuery学习（二）——jQuery选择器总结
选择器总结什么是jQuery选择器？jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多扩展性的选择器。jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。...原创 2019-11-19 10:31:18 · 307 阅读 · 0 评论 -
jQuery-css()方法总结——获取/设置样式
css()方法总结总结一下jQuery中使用css()方法获取和设置样式的特性。首先新建一个html文件，内容如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>设置/获取样式内容</title> <style type="te...原创 2019-11-15 16:17:18 · 2749 阅读 · 0 评论 -
jQuery-text()方法总结——获取/设置文本
总结一下jQuery中获取和设置文本的特性。首先在页面上放置两个div，两个按钮。内容如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>设置/获取文本内容</title> </head> <body> &l...原创 2019-11-15 10:56:38 · 7031 阅读 · 1 评论 -
jQuery实现开关灯效果案例
效果展示点击界面上的开灯关灯按钮，可以实现背景的调暗。方便晚上阅读。开灯：关灯：分析这个功能很简单，其实就是利用jQuery实现把背景色更改为黑色和白色，可以在两者之间进行切换。代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>开关灯案...原创 2019-11-15 10:03:06 · 2213 阅读 · 0 评论 -
dom对象和jQuery对象以及之间的转换
dom对象和jQuery对象的转换1. dom对象dom对象是原生js选择器获取到的对象。document.getElementById();document.getElementsByTagName();而dom对象只能调用dom方法或者属性。比如我们给一个div设置背景色为红色：<script src="jquery-1.12.4.js" type="text/java...原创 2019-11-14 11:13:17 · 1229 阅读 · 1 评论 -
jQuery学习（一）认识jQuery
认识jQuery1.原生JS的缺点首先呢，我们来做一个小的案例：在界面上放置两个按钮，四个div，这两个按钮的功能分别是给div添加边框和添加一些文字。我们用原生的js来实现一下这个功能：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></tit...原创 2019-11-14 09:59:58 · 309 阅读 · 0 评论