Javascript知识jQuery样式操作&案例：jQuery隔行换色
Posted 爱吃豆的土豆
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Javascript知识jQuery样式操作&案例：jQuery隔行换色相关的知识，希望对你有一定的参考价值。
- 💂 个人主页: 爱吃豆的土豆
- 🤟 版权: 本文由【爱吃豆的土豆】原创、在CSDN首发、需要转载请联系博主
- 💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦
🏆人必有所执，方能有所成！
🐋希望大家多多支持😘一起进步呀！
目录
1，jQuery样式操作
目标：通过jQuery熟练切换CSS样式
addClass()给指定标签的class属性追加样式
removeClass()将标签指定的class属性移除
| <!DOCTYPE html> |
| <!DOCTYPE html> |
2，案例：jQuery隔行换色
2.1：案例1
- 分析：
关键点：
1、样式切换：addClass()
2、除了第一个tr外，所有的tr，进行奇偶数筛选
tr:gt(0) :even偶数 :odd奇数
步骤：
1、页面加载完成时
2、获取除了第一个tr外，指定奇偶数的tr
3、为指定这些tr添加蓝色样式
代码实现
| <script src="../js/jquery-3.3.1.min.js"></script> |
注意：
:even时，对前方集合进行重新索引排序。
2.2：鼠标移入粉色，移出原色
- 分析：
关键点：
- jQuery事件如何进行绑定 鼠标移入，鼠标移出：
jq对象.事件名1(function()
//this 当前对象 js对象
).事件名2(function()
//this 当前对象 js对象
);
Js：onmouseover
JQ: mouseover
| <!DOCTYPE html> |
- 颜色要进行设置与保存
①思路：变色：this["key"] = 原来的颜色;
this.style="background-color:新颜色";
还原： this.style="background-color:"+this["key"];
变色：this["key"] = $(this).css("background-color");
$(this).css("background-color","新颜色");
还原： $(this).css("background-color",this["key"]);
②思路：(问题：删除其他不该删除的行内样式)
变色：this.style="background-color:新颜色";
还原：this.style=undefined;
步骤：
- 获取所有指定的tr
- 绑定鼠标移入事件：事件中，进行变色逻辑
- 绑定鼠标移出事件：事件中，进行还原逻辑
- 代码实现：
| <script src="../js/jquery-3.3.1.min.js"></script> |
jQuery相关知识
一、认识jQuery
1、什么是jQuery
-
jQuery是对原生JavaScript二次封装的工具函数集合
-
jQuery是一个简洁高效的且功能丰富的JavaScript工具库
2、jQuery的优势
-
完全开源的源代码
-
-
事件、样式、动画的良好支持
-
链式表达式
-
简化的Ajax操作
-
跨浏览器兼容
-
丰富的插件及对外的扩展接口
3、JavaScript和jquery的区别
-
Javascript是一门编程语言，我们用它来编写客户端浏览器脚本
-
jQuery是javascript的一个库，包含多个可重用的函数，用来辅助我们简化
-
javascript开发jQuery能做的javascipt都能做到，而javascript能做的事情，jQuery不一定能做到
注意：一般情况下，是库的文件，该库中都会抛出来构造函数或者对象，如果是构造函数，那么使用new关键字创建对象，如果是对象直接调用属性和方法
二、jQuery的安装
1、版本
-
开发(development)版本：jQuery-x.x.x.js （程序员用 可以直接看见源码）
-
生产(production)版本：jQuery-x.x.x.min.js （去除了空格换行 压缩版 外界无法直接访问源码）
2、安装jQuery-3.3.1
<script src="js/jquery-3.3.1.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
// user code
</script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
// user code
</script>
三、jQuery基本使用
1、JQuery对象
-
jQuery对象：具有jquery框架设置的所有功能的调用者，就是该框架产生的唯一对象
-
$是什么？ 就是jQuery对象，jQuery对象为window的全局属性，所以可以直接使用
-
jQuery.noConflict() ：自定义jQuery对象，如用JQ替换jQuery | $
-
var JQ = jQuery.noConflict();
-
JQ(‘.box‘).html("<b>嘿嘿</b>");
2、页面加载
<img src="http://onehdwallpaper.com/wp-content/uploads/2015/11/Most-Beautiful-Girl-in-Flowers-Field.jpg"/> <script> window.onload = function() { console.log("window load 1"); }; window.onload = function() { console.log("window load 2"); }; $(document).ready(function() { console.log("document load 1"); }); $(function() { console.log("document load 3"); }); </script> // window.onload=fn单事件绑定，页面DOM树与资源完全加载完毕 // jq的延迟加载: 文档树加载完毕, 即回调 // $(document).ready(fn)多数据绑定，页面DOM树加载完毕，简写$(fn) // 1. 早于window.onload // 2. 可以多次绑定事件 // 3. 可以简写为$(function() {})
3、jQuery变量命名规范
-
通常以$开头
四、功能概括
1、选择器
var $ele = $(‘.ele‘); // $(css选择器语法) // eg: $(‘.box‘) 得到的是一个存放原生js对象的数组, 就是jq对象, 页面中有多少个.box, 该jq对象就承载者多少个对象,. 可以作为一个整体来使用
2、文本操作
$ele.text("添加文本");
// 获取原有文本
$box.text() | $box.html()
// 设置新文本
$box.text(‘newData‘) | $box.html(‘<b>newData</b>‘)
3、样式操作
$ele.css({width: ‘200px‘, heigth: ‘200px‘});
$ele.css(‘background-color‘, ‘red‘).css(‘border-radius‘, ‘50%‘);
$box.css(‘background-color‘) // 获取背景颜色
$box.css(‘background-color‘, ‘red‘) // 设置背景颜色
$box.css(‘background-color‘, function() {return ‘yellow‘}) // 通过函数返回值设置背景颜色
4、类名操作
$ele.toggleClass(‘active‘); $box.addClass("newClass") // 添加一个新类名 $box.removeClass("oldClass") // 删除一个已有的类名 // 多类名时,jq操作类名将每个类名最为单一考虑对象,不会影响其他类名
5、事件操作
$ele.on(‘click‘, function() {}); // $box为jq对象 $box.click(function(ev) { }) // 注: jq对象如果包含多个页面元素对象, 可以一次性对所有对象绑定该事件 // ev事件为jq事件, 兼容js事件 // this为js对象, $(this)就转换为jq对象 // 内部可以通过$(this).index()获取自身在当前结构下的索引(从0开始)
6、动画操作
$ele.slideUp();
7、文档操作与文档结构关系
$ele.append("<b>Hello</b>");
// 父
$sup.parent()
// 父,父的父...
$sup.parents()
// 子们
$sup.children() *****
// 上兄弟
$sup.prev() ***
// 上兄弟们
$sup.prevAll()
// 下兄弟
$sup.next() ***
// 下兄弟们
$sup.nextAll()
// 同级别的兄弟们
$sup.siblings() ***
// 在sup下查找类名为inner的子级
$sup.children(‘.inner‘)
// 获得的结果都是jq对象, 还可以接着使用jq方法
五、JQ对象与JS对象
// js对象: box jq对象: $box // 将js对象转换为jq对象: $(box) // 将jq对象转换为js对象: $box[index] //第一种方式： $(‘box‘)[0] //第二种方式： $(‘box‘).get(0)
六、Ajax
-
server.py
from flask import Flask, request from flask_cors import CORS app = Flask(__name__) CORS(app, supports_credentials=True) ? def test_action(): usr = request.args[‘usr‘] ps = request.args[‘ps‘] if usr != ‘zero‘ or ps != ‘123456‘: return ‘login failed‘ return ‘login success‘ ? if __name__ == ‘__main__‘: app.run() // 安装Flask及Flask-Cors包
-
client.html
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script> $.ajax({ url: "http://127.0.0.1:5000/testAction", data: { usr: "zero", ps: "123456" }, success: function (data) { console.log(data); } }); </script>
七、轮播图
-
简易jQuery版
<style type="text/css"> .wrap { width: 300px; height: 200px; border: 1px solid black; overflow: hidden; position: relative; } ul { width: 1200px; height: 200px; list-style: none; margin: 0; padding: 0; position: absolute; left: 0; } li { width: 300px; height: 200px; float: left; font: bold 100px/200px arial; text-align: center; color: white; } </style> <div class="wrap"> <ul> <li style="background:red;">1</li> <li style="background:orange;">2</li> <li style="background:pink;">3</li> <li style="background:cyan;">4</li> </ul> </div> <div> <input type="button" value="图1" /> <input type="button" value="图2" /> <input type="button" value="图3" /> <input type="button" value="图4" /> </div> <script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(‘input‘).click(function() { $(‘ul‘).animate({ ‘left‘: -$(this).index() * $(‘li‘).width() }, 500); }) </script>
-
swiper的使用
// 轮播图框架
未完待续
以上是关于Javascript知识jQuery样式操作&案例：jQuery隔行换色的主要内容，如果未能解决你的问题，请参考以下文章
jQuery—— jQuery 概述 / jQuery 选择器 / jQuery 样式操作 / jQuery 效果
JavaScript之jQuery-3 jQuery操作DOM(查询样式操作遍历节点创建插入删除替换复制)