JQuery的一些简单使用
2018-02-28 23:43
155 查看
一、使用JQ完成表格的隔行换色
1.需求分析
在页面加载的时候让显示用户的表格进行隔行换色显示,效果如下:使用JQ实现2.技术分析
需要使用jquery的选择器(基本选择器、基本过滤选择器)还需要使用jquery的CSS的方法(css(name,value))
如果CSS样式已经由美工写好,此时可以使用jquery的CSS类操作
3.步骤分析
第一步:引入jquery的类库第二步:直接写页面加载函数
第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行)
第四步:分别使用CSS的方法(css(name,value))对奇数行和偶数行设置背景颜色。
4.代码实现
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> <link rel="stylesheet" type="text/css" href="../css/style.css"/> <script> $(function(){ $("tbody tr:even").addClass("even"); $("tbody tr:odd").addClass("odd"); }); </script>
二、使用JQ完成全选和全不选
1.需求分析
在系统后台进行人员管理时,进行批量删除,使用jq完成全选和全不选2.技术分析
需要使用jquery的选择器(id选择器、类选择器)需要使用jquery的属性操作方法 prop()
3.步骤分析
第一步:引入jquery文件第二步:书写页面加载函数
第三步:为上面的复选框绑定单击事件
第四步:将下面所有的复选框的选中状态设置成跟上面的一致!
4.代码实现
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> <script> $(function(){ //找到下面所有的复选框并设置属性checked() /*if($("#select")[0].checked==true){ $(".selectOne").attr("checked",true) }*/ $("#select").click(function(){ $(".selectOne").attr("checked",this.checked); }); }); </script>
相关文章推荐
- jQuery基础之一些简单使用
- 下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现。
- Jquery的一些简单使用记录
- Visual Studio 2017中使用正则修改部分内容 如何使用ILAsm与ILDasm修改.Net exe(dll)文件 C#学习-图解教程(1):格式化数字字符串 小程序开发之图片转Base64(C#、.Net) jquery遍历table为每一个单元格取值及赋值 。net加密解密相关方法 .net关于坐标之间一些简单操作
- Oracle 日期的一些简单使用
- java.util.Properties 的一些简单使用
- 关于使用PRO*C编程的一些简单说明和例子
- Request对象的一些简单使用
- 学习新事物:使用jquery+xml实现ajax简单实例
- 一个简单的动态编译器,支持C#和VB.NET。当你想测试一些简单的代码的时候可以使用。
- jQuery一些简单的代码简化,循环链接的完整例子
- 在使用jQuery+HTML+Javascript的简单例子---很容易的制作双色表格
- 关于使用PRO*C编程的一些简单说明和例子
- jQuery 图像裁剪插件Jcrop的简单使用
- jQuery的图像裁剪插件Jcrop的简单使用
- Oracle中日期的一些简单使用
- symbian中活动对象的一些简单的使用
- symbian中活动对象的一些简单的使用
- 关于使用PRO*C编程的一些简单说明和例子
- symbian中活动服务对象的一些简单的使用