按键改变元素背景颜色链式编程的原理评分案例 each方法的使用

按键改变元素背景颜色

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>div {width: 800px;height: 600px;background-color: gray;}</style><script src="jquery-1.12.1.js"></script><script>$(function(){// 用户在页面按键,可以改变div的背景颜色$(document).keydown(function(e){// console.log(e.keyCode);switch(e.keyCode){case 65:$("#dv").css("backgroundColor","red");break;case 66:$("#dv").css("backgroundColor","green");break;case 67:$("#dv").css("backgroundColor","blue");break;case 68:$("#dv").css("backgroundColor","pink");break;}});});</script>
</head>
<body>
<div id="dv"></div></body>
</html>

链式编程的原理

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="jquery-1.12.1.js"></script><script>$(function(){// 为按钮注册点击事件$("#btn").click(function(){// console.log($(this).val("哈哈").val("嘎嘎"));// 对象.方法(); 调用,如果返回来的还是对象,那么可以继续的调用方法});});function Person(age){this.age = age;this.sayHi = function(){if(txt){console.log("您好啊:" + txt);return this;}else{            console.log("您好啊...");return this;}};this.eat = function(){console.log("中午就吃了一个馒头和咸菜");return this;};}// 对象var per = new Person(10);// var ss = per.sayHi();// ss.eat();// per.sayHi().eat().sayHi();per.sayHi("嘎嘎").eat();// 方法();----获取这个值,如果.方法(值)---->当前的对象// val();----返回的是value属性的值,val('fdfs');----当前的对象</script>
</head>
<body>
<input type="button" value="显示效果" id="btn"></body>
</html>

评分案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>* {padding: 0;margin: 0;}ul {list-style: none;}li {float: left;font-size: 50px;color: red;}</style><script src="jquery-1.12.1.js"></script><script>$(function(){// 获取所有的li标签$(".comment>li").mouseenter(function(){ // 进入// 当前的li是实心的五角星,前面的li也是实心的五角星,// 鼠标后面的li是空心的五角星$(this).text("★").prevAll("li").text("★");}).click(function(){ // 点击// 做一个记录// 点哪个li就为这个添加一个自定义属性,作为标识,但是其他的// li中的这个自定义属性要删除,$(this).attr("index","1").siblings("li").removeAttr("index");}).mouseleave(function(){ // 离开// 鼠标离开的时候,获取那个带有index自定义属性的li,然后,改变这个// li中的五角星,同时前面的五角星也是实心的,同时后面的五角星都是// 空心// 先干掉所有的li中的实心的五角星$(".comment>li").text("☆");$(".comment>li[index=1]").text("★").prevAll("li").text("★");});});</script>
</head>
<body><ul class="comment"><li>☆</li><li>☆</li><li>☆</li><li>☆</li><li>☆</li><li>☆</li></ul>
</body>
</html>

each方法的使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>* {margin: 0;padding: 0;}ul {list-style-type: none;}li {width: 100px;height: 100px;background-color: green;margin-right: 10px;float: left;}</style><script src="jquery-1.12.1.js"></script><script>// 隐式迭代----内部帮助我们循环遍历做操作// 每个元素做不同操作的时候// each方法,帮助我们遍历jQuery的对象// 获取所有的li,针对每个li的透明进行设置$(function(){$("#uu>li").each(function(index,ele){// console.log(arguments.length);// 参数1:索引,参数2:对象// console.log(arguments[0]+"===="+arguments[1]);// 每个li的透明度不一样var opacity = (index+1)/10;$(ele).css("opacity",opacity);});});// each方法就是用来遍历jQuery对象的,但是,里面的每个对象最开始都是DOM对象// 如果想要使用jQuery的方法,需要把DOM对象转jQuery对象</script>
</head>
<body>
<ul id="uu"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li>
</ul></body>
</html>

按键改变元素背景颜色链式编程的原理评分案例 each方法的使用相关推荐

jQuery中事件及常用事件总结、jQuery中常见效果、隐式迭代、链式编程、样式操作、动画队列、不同元素绑定同一个事件
jQuery事件: jQuery中的事件和javascript中的事件基本相似,不同的是jQuery中的事件处理函数写在事件后面的括号中,如: <script>$('input').cli ...
Java学习第十二天----方法参数类型以及返回值类型问题、链式编程、package包、权限修饰符、内部类、成员内部类
Java学习第十二天----方法参数类型以及返回值类型问题.链式编程.package包.权限修饰符.内部类.成员内部类 1.方法参数类型: (1)类名作为形式参数: public class MyTe ...
java链式编程_Java 链式编程和 lombok 实现链式编程
一.链式编程定义链式编程的原理就是返回一个this对象,就是返回本身,达到链式效果. 二.jdk中 StringBuffer 源码我们经常用的 StringBuffer 就是实现了链式的写法. ...
验证用户输入的是不是中文名字淘宝精品案例元素样式设置的方式链式编程
验证用户输入的是不是中文名字 <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
前端学习笔记-jQuery-jQuery选择器/隐式迭代/链式编程
jQuery选择器 jQuery基本选择器原生JS获取原生的方式很多,很杂,而且兼容性情况,不一致,因此jQuery给我们做了封装,使获取元素统一标准. $("选择器") // ...
iOS端JSON转Model链式编程框架SuperKVC使用方法与原理
背景在client编程中.字典转模型是一个极为常见的问题,苹果提供了KVC来实现NSDictionary到Model的注入,可是KVC仅仅能进行单层浅注入.且无法处理类型转换.key与属性名不正确应 ...
jQuery 节流阀/链式编程 /插件
节流阀: keydown 事件缺点:当键盘一直处于按下时,事件会一直在触发. 解决: 节流阀, 当键盘按下时,如果没抬起, 阻止下一次事件触发 . 1.定义一个变量默认为true var ...
JavaScriptJQuery_jQuery链式编程
jQuery链式编程在jquery中,链式编程指的是对同一个元素一直进行函数操作:链式编程是将多行代码合并成一行代码,每一个合并的方法返回的结果是元素对象才可以进行链式编程,语法为"元素对 ...
009_jQuery链式编程
1. jQuery方法链接 1.1. 有一种名为链接(chaining)的技术, 允许我们在相同的元素上运行多条jQuery命令, 一条接着另一条. 1.2. 这样的话, 浏览器就不必多次查找相同的元 ...

按键改变元素背景颜色链式编程的原理评分案例 each方法的使用

按键改变元素背景颜色链式编程的原理评分案例 each方法的使用相关推荐

最新文章

热门文章

按键改变元素背景颜色 链式编程的原理 评分案例 each方法的使用

按键改变元素背景颜色 链式编程的原理 评分案例 each方法的使用相关推荐

最新文章

热门文章

按键改变元素背景颜色链式编程的原理评分案例 each方法的使用

按键改变元素背景颜色链式编程的原理评分案例 each方法的使用相关推荐