JavaScript-JQuery

1、JQuery的基本使用

1）$是JQuery的别称
2）$同时也是JQuery的顶级对象// 等页面DOM加载完毕再去执行js代码
$(document).ready(function () {// 隐藏div$('div').hide();
})
$(function () {$('div').hide();})

2、DOM对象和JQuery对象相互转换

$('div')[0].play()     JQuery对象转DOM对象
$('div')get(0).play() JQuery对象转DOM对象
$('div')              DOM对象转JQuery对象

3、JQuery基础选择器

4、JQuery筛选选择器

5、JQuery筛选方法

6、仿新浪下拉菜单

<script>$('.nav li').mouseover(function () {$(this).children('ul').show();});$('.nav li').mouseleave(function () {$(this).children('ul').hide();});
</script>

7、排他思想

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/JQuery.min.js"></script>
</head>
<body><button>点我变色</button><button>点我变色</button><button>点我变色</button><button>点我变色</button><button>点我变色</button>
<script>$(function () {// 1、隐式迭代 给所有的按钮都绑定了点击事件$("button").click(function () {// 2、当前元素变化背景颜色$(this).css('background','blue');// 3、其余的兄弟去掉背景颜色 隐式迭代$(this).siblings('button').css('background','');})})
</script>
</body>
</html>

8、淘宝精品服饰案例

<script>$(function () {// 1、鼠标经过左侧的li$("#left li").mouseover(function () {// 2、得到当前li的索引号let index = $(this).index();// 3、让我们右侧的盒子相应索引号的图片显示出来$('#content div').eq(index).show();// 4、让其余的图片（其它兄弟）隐藏起来$('#content div').eq(index).siblings().hide();});})
</script>

9、链式编程

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/JQuery.min.js"></script>
</head>
<body>
<button>点我变颜色</button>
<button>点我变颜色</button>
<button>点我变颜色</button>
<button>点我变颜色</button>
<button>点我变颜色</button>
<button>点我变颜色</button>
<button>点我变颜色</button>
</body>
<script>$(function () {$('button').click(function () {$(this).css('background','red').siblings().css('background','');});})
</script>
</html>

10、操作CSS方法

11、设置类样式方法

12、Tab栏切换

<script>
$(function () {$('.tab_list li').click(function () {$(this).addClass('current').siblings().removeClass('current');$('.tab_con .item').eq($(this).index()).show().siblings().hide();});})
</script>

13、JQuery效果（参数见手册）

函数	描述
$(selector).hide()	隐藏被选元素
$(selector).show()	显示被选元素
$(selector).toggle()	切换（在隐藏与显示之间）被选元素
$(selector).slideDown()	向下滑动（显示）被选元素
$(selector).slideUp()	向上滑动（隐藏）被选元素
$(selector).slideToggle()	对被选元素切换向上滑动和向下滑动
$(selector).fadeIn()	淡入被选元素
$(selector).fadeOut()	淡出被选元素
$(selector).fadeTo()	把被选元素淡出为给定的不透明度
$(selector).animate()	对被选元素执行自定义动画

14、简易版新浪下拉菜单

<script>$(function () {// 鼠标经过$('.nav>li').mouseover(function () {$(this).children('ul').slideDown(20);});// 鼠标离开$('.nav>li').mouseleave(function () {$(this).children('ul').slideUp(20);});//1、事件切换 hover 就是鼠标经过和离开的复合写法$('.nav>li').hover(function () {$(this).children('ul').slideDown(50);},function () {$(this).children('ul').slideUp(50);})//2、事件切换 hover 只有一个参数，鼠标经过和离开都会触发$('.nav>li').hover(function () {$(this).children('ul').slideToggle(60);})//3、停止排队，把stop()放前面$('.nav>li').hover(function () {$(this).children('ul').stop().slideToggle(60);})})
</script>

15、高亮选择案例

<script>$(function () {$('.wrap li').hover(function () {// 鼠标经过，把它的兄弟节点的透明度改成0.5$(this).siblings().stop().fadeTo(100,0.5);},function () {// 鼠标离开，把它的兄弟节点的透明度改成1$(this).siblings().stop().fadeTo(100,1);})})
</script>

16、自定义动画效果animate

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/JQuery.min.js"></script><style>div{position: relative;width: 200px;height: 200px;background-color: purple;}</style>
</head>
<body>
<button>点我</button>
<div></div>
<script>$(function () {$('button').click(function () {$('div').animate({left:600,top:200,height:300,opacity:.5,  //透明度},500);})})
</script>
</body>
</html>

17、王者荣耀手风琴案例

<script>$(function () {$('.king li').mouseover(function () {//当前li宽度变为224px,同时小图片淡出，大图片淡入$(this).stop().animate({width: 224}).find('.small').stop().fadeOut().siblings().stop().fadeIn();//其余兄弟li宽度变为69px,小图片淡入，大图片淡出$(this).siblings().stop().animate({width: 69}).find('.big').stop().fadeOut().siblings().stop().fadeIn();})})
</script>

18、JQuery属性操作

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/JQuery.min.js"></script>
</head>
<body><a href="http://www.baidu.com">点我</a><div index = '1' data-index="2">我是div</div><input type="checkbox" checked><script>$(function () {// 1、element.prop('属性名')获取元素固有的属性值console.log($('a').prop('href'));$('input').change(function () {console.log($(this).prop('checked'));})// 2、元素自定义属性 attr()console.log($('div').attr('index'));console.log($('div').attr('data-index'));// 3、数据缓存data() 数据存放在元素的内存里面$('a').data("uname","red");console.log($('a').data("uname"));console.log($('div').data("index"));})</script>
</body>
</html>

19、购物车全选与非全选

$(function() {// 把全选框的状态赋给三个小按钮$(".checkall").change(function () {$(".j-checkbox,.checkall").prop("checked",$(this).prop("checked"));})$(".j-checkbox").change(function () {// 判断小按钮的状态，如果三个都是true，那就把true给全选按钮if ($(".j-checkbox:checked").length === $(".j-checkbox").length){$(".checkall").prop("checked",true);}else {$(".checkall").prop("checked",false);}})
})

20、内容文本值

1、获取设置元素内容 html()console.log($('div').html())$('div').html('123')
2、获取设置元素文本内容 text()console.log($('div').text())$('div').text('123')
3、获取设置表单值 val()console.log($('input').val())$('input').val('123')

21、购物车之商品增减案例

//商品的增减
$(".increment").click(function () {// 得到当前兄弟文本框的值let n = $(this).siblings('.itxt').val();if (n == 99){return false;}n++;$(this).siblings('.itxt').val(n);
});$(".decrement").click(function () {// 得到当前兄弟文本框的值let n = $(this).siblings('.itxt').val();if (n == 1){return false;}n--;$(this).siblings('.itxt').val(n);
});

22、购物车最终版

$(function() {// 把全选框的状态赋给三个小按钮$(".checkall").change(function () {$(".j-checkbox,.checkall").prop("checked",$(this).prop("checked"));//判断全选框是否选中，如果选中那就隐式迭代把所有的.cart-item添加或者删除check-cart-item类if($(this).prop("checked")){$(".cart-item").addClass("check-cart-item");}else {$(".cart-item").removeClass("check-cart-item");}})$(".j-checkbox").change(function () {// 判断小按钮的状态，如果三个都是true，那就把true给全选按钮if ($(".j-checkbox:checked").length === $(".j-checkbox").length){$(".checkall").prop("checked",true);}else {$(".checkall").prop("checked",false);}//判断小按钮的选中状态，如果选中那就添加样式，否则就删去样式if($(this).prop("checked")){$(this).parents(".cart-item").addClass("check-cart-item");}else {$(this).parents(".cart-item").removeClass("check-cart-item");}})//商品的增减$(".increment").click(function () {// 得到当前兄弟文本框的值let n = $(this).siblings('.itxt').val();if (n == 99){return false;}n++;$(this).siblings('.itxt').val(n);//计算商品小计和数量//parents()得到父辈节点let p = $(this).parents('.p-num').siblings('.p-price').html();//substr()分割，从第一个开始p = p.substr(1);//toFixed()保留多少位小数let prices = (p*n).toFixed(2);$(this).parents('.p-num').siblings('.p-sum').html("￥"+prices);getSum();});$(".decrement").click(function () {// 得到当前兄弟文本框的值let n = $(this).siblings('.itxt').val();if (n == 1){return false;}n--;$(this).siblings('.itxt').val(n);//计算商品小计和数量//parents()得到父辈节点let p = $(this).parents('.p-num').siblings('.p-price').html();//substr()分割，从第一个开始p = p.substr(1);//toFixed()保留多少位小数let prices = (p*n).toFixed(2);$(this).parents('.p-num').siblings('.p-sum').html("￥"+prices);getSum();});//计算商品小计和数量$(".itxt").change(function () {let n = $(this).val();//parents()得到父辈节点let p = $(this).parents('.p-num').siblings('.p-price').html();//substr()分割，从第一个开始p = p.substr(1);//toFixed()保留多少位小数let prices = (p*n).toFixed(2);$(this).parents('.p-num').siblings('.p-sum').html("￥"+prices);getSum();});//计算总计和总额模块getSum();function getSum(){let count = 0;let money = 0;$(".itxt").each(function (i,ele) {count += parseInt($(ele).val());})$(".p-sum").each(function (i,ele) {money += parseFloat($(ele).html().substr(1));})$(".price-sum em").html("￥"+money.toFixed(2));$(".amount-sum em").html(count);}//删除当前商品$('.p-action a').click(function () {$(this).parents(".cart-item").remove();getSum();});//删除选中的商品$('.remove-batch').click(function () {$(".j-checkbox:checked").parents(".cart-item").remove();getSum();});//清理购物车$('.clear-all').click(function () {$(".cart-item-list").remove();getSum();})
})

23、JQuery尺寸位置操作

24、电梯导航

$(function() {// 互斥锁let flag = true;function ToolTop() {if ($(document).scrollTop() >= $('.recommend').offset().top){$('.fixedtool').fadeIn();}else {$('.fixedtool').fadeOut();}}ToolTop();$(window).scroll(function () {ToolTop();//页面滚动到某个内容区域，左侧电梯导航li相应添加和删除current类名if (flag){$('.floor .w').each(function (i,ele) {if ($(document).scrollTop() >= $(ele).offset().top){$(".fixedtool li").eq(i).addClass('current').siblings().removeClass();}})}});//电梯导航页面滚动到相应的内容区域$('.fixedtool li').click(function () {//点击电梯导航时，把flag改成falseflag = false;//每次点击要去的位置//选出对应索引号的内容区的盒子，计算它的.offset().toplet current= $('.floor .w').eq($(this).index()).offset().top;//页面动画滚动效果$('body,html').stop().animate({scrollTop:current},function () {//执行完动画才改回trueflag = true;});$(this).addClass('current').siblings().removeClass();})
})

25、事件处理

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/JQuery.min.js"></script><style>div{width: 200px;height: 200px;background-color: purple;}.current{background-color: red;}</style>
</head>
<body>
<div></div>
<ul><li>我是小li</li><li>我是小li</li><li>我是小li</li><li>我是小li</li><li>我是小li</li>
</ul>
<ol></ol>
<script>$(function () {//1、事件处理on$('div').on({mouseenter:function () {$(this).css('backgroundColor','red');},mouseleave:function () {$(this).css('backgroundColor','skyblue');},click:function () {$(this).css('backgroundColor','yellow');}});// $('div').on("mouseenter mouseleave",function () {//     $(this).toggleClass("current");// })//2、on事件委派,click绑定在ul身上，但是触发的对象是li$('ul').on("click","li",function () {console.log("111");})//3、on可以给未来动态创建的元素绑定事件$("ol").on("click","li",function () {console.log(11);});let li = $("<li>我是后来创建的</li>");$('ol').append(li);})
</script></body>
</html>

26、微博发布案例

<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0}ul {list-style: none}.box {width: 600px;margin: 100px auto;border: 1px solid #000;padding: 20px;}textarea {width: 450px;height: 160px;outline: none;resize: none;}ul {width: 450px;padding-left: 80px;}ul li {line-height: 25px;border-bottom: 1px dashed #cccccc;display: none;}input {float: right;}ul li a {float: right;}</style><script src="js/JQuery.min.js"></script><script>$(function() {// 1.点击发布按钮， 动态创建一个小li，放入文本框的内容和删除按钮， 并且添加到ul 中$('.btn').on("click",function () {let li = $("<li></li>");li.html($(".txt").val()+"<a href='javascript:;'>删除</a>");$("ul").prepend(li);li.slideDown();$(".txt").val("");})// 2.点击的删除按钮，可以删除当前的微博留言li// on可以给动态创建的元素绑定事件$("ul").on("click","a",function () {$(this).parent().slideUp(function () {$(this).remove();});})})</script>
</head><body><div class="box" id="weibo"><span>微博发布</span><textarea name="" class="txt" cols="30" rows="10"></textarea><button class="btn">发布</button><ul></ul></div>
</body></html>

27、解绑事件

28、自动触发事件

//1.元素.事件()$('input').click(); //会触发默认事件
//2.元素.trigger("事件")$('input').trigger("click") //会触发默认事件
//3.元素.triggerHandler('事件')$('input').trigger('click'); //不会触发默认事件

29、对象拷贝

30、JQuery多库共存

31、JQuery插件库

1、JQuery之家

2、JQuery插件库

32、图片懒加载

<script src="./js/EasyLazyload.min.js"></script>
<script>lazyLoadInit({showTime:1100,onLoadBackEnd:function(i,e){console.log("onLoadBackEnd:"+i);},onLoadBackStart:function(i,e){console.log("onLoadBackStart:"+i);}});
</script>

33、TODOList案例

$(function () {// 1. 按下回车 把完整数据 存储到本地存储里面// 存储的数据格式  var todolist = [{title: "xxx", done: false}]load();$('#title').on('keydown',function (e) {if (e.key === "Enter"){if ($(this).val() === ''){alert("请输入你要进行的操作！");}else {// 先读取本地存储原来的数据let local = getData();// 把local数组进行更新数据 把最新的数据追加给local数组local.push({ title: $(this).val(), done: false });// 把这个数组local 存储给本地存储saveData(local);load();$(this).val('');}}})// 读取本地存储数据function getData() {let data = localStorage.getItem("todolist");if (data !== null){return JSON.parse(data);}else {return [];}}// 保存本地存储数据function saveData(data) {localStorage.setItem("todolist",JSON.stringify(data))}// 删除数据$("ol,ul").on("click","a",function () {// 获取本地存储let data = getData();let index = $(this).attr("id");// 修改数据data.splice(index,1);// 保存的本地存储saveData(data);// 重新渲染页面load();})// 正在进行和已经完成选项操作$("ol,ul").on("click","input",function () {// 获得本地存储数据let data = getData();// 修改数据let index = $(this).siblings("a").attr('id');data[index].done = $(this).prop("checked");// 保存到本地存储saveData(data);// 重新渲染load();})// 渲染加载数据function load() {// 读取本地存储的数据let data = getData();let todoCount = 0;let doneCount = 0;// console.log(data);// 加载前清空ol里面的元素数据$('ol,ul').empty();// 遍历这个数据$.each(data,function (i,ele) {if (ele.done){$('ul').prepend("<li><input type='checkbox' checked><p>"+ele.title+"</p> <a href='javascript:;' id="+i+"></a></li>");doneCount++;}else {$('ol').prepend("<li><input type='checkbox'><p>"+ele.title+"</p> <a href='javascript:;' id="+i+"></a></li>");todoCount++;}});$("#todocount").text(todoCount);$("#donecount").text(doneCount);}
})

JavaScript-JQuery相关推荐

Java项目:嘟嘟校园一卡通系统(java+JSP+Servlet+html+css+JavaScript+JQuery+Ajax+mysql)
源码获取:博客首页 "资源" 里下载! 一.项目简述功能:卡管理,卡消费,卡充值,图书借阅,消费,记录,注销等等功能. 二.项目运行环境配置: Jdk1.8 + Tomcat8 ...
如何在JavaScript / jQuery中查找数组是否包含特定字符串？ [重复]
本文翻译自:How to find if an array contains a specific string in JavaScript/jQuery? [duplicate] This ques ...
生日祝福（HTML+CSS+JavaScript+jQuery）
生日倒计时下载地址:[生日祝福(HTML+CSS+JavaScript+jQuery).zip-教育文档类资源-CSDN下载]
javascript:jquery.history.js使用方法
javascript:jquery.history.js使用方法 step1:download jquery.history.js step2:create a test page as follow ...
Java实现动态加载页面_[Java教程]动态加载页面数据的小工具 javascript + jQuery （持续更新）...
[Java教程]动态加载页面数据的小工具 javascript + jQuery (持续更新) 0 2014-05-07 18:00:06 使用该控件,可以根据url,参数,加载html记录模板(包含 ...
【前端学习笔记】JavaScript + jQuery + Vue.js + Element-UI
前端学习笔记 JavaScript jQuery Vue.js Element-UI Java 后端部分的笔记:Java 后端笔记 JavaScript 基础语法(数据类型.字符串.数组.对象.Map ...
使用Javascript / jQuery下载文件
本文翻译自:Download File Using Javascript/jQuery I have a very similar requirement specified here . 我在这里指 ...
怎么用java做todolist_[Java教程]JavaScript jQuery 任务清单 ToDoList
[Java教程]JavaScript jQuery 任务清单 ToDoList 0 2020-10-23 03:02:01 代码实现: ToDoList.html(复制并保存为html文件,打开即可见 ...
行为层JavaScript+jQuery
JavaScript + jQuery[不完整] 一.JavaScript 行为层 JavaScript简介 JavaScript历史: 1995年,网景公司凭借其Navigator浏览器成为Web ...
JavaScript - jQuery（一）
导航兔: jQuery 导航地址 JavaScript - jQuery(一) https://qianmoer.blog.csdn.net/article/details/128358221 Jav ...

JavaScript-JQuery

1、JQuery的基本使用

2、DOM对象和JQuery对象相互转换

3、JQuery基础选择器

4、JQuery筛选选择器

5、JQuery筛选方法

6、仿新浪下拉菜单

7、排他思想

8、淘宝精品服饰案例

9、链式编程

10、操作CSS方法

11、设置类样式方法

12、Tab栏切换

13、JQuery效果（参数见手册）

14、简易版新浪下拉菜单

15、高亮选择案例

16、自定义动画效果animate

17、王者荣耀手风琴案例

18、JQuery属性操作

19、购物车全选与非全选

20、内容文本值

21、购物车之商品增减案例

22、购物车最终版

23、JQuery尺寸位置操作

24、电梯导航

25、事件处理

26、微博发布案例

27、解绑事件

28、自动触发事件

29、对象拷贝

30、JQuery多库共存

31、JQuery插件库

32、图片懒加载

33、TODOList案例

JavaScript-JQuery相关推荐

最新文章

热门文章