JQuer的简单应用

最后一篇了 终于见到了成功的曙光在向我招手啊真是太兴奋啦!!!这次继续由我为大家带来JQuery的一些简单的应用吧

  <!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
  div div{
  /*color: red;*/
  }
  </style>
  </head>
  <body>
  <div>
  我是外部div
  <div>1111111</div>
  <div>2222</div>
  <div>33333333333</div>
  <div>44444444444444444</div>
  </div>
   
  <button >获取并显示第一个div下面的所有的子div元素,并提取显示每个子元素中的内容</button>
  <hr/>
  <table>
  <tr>
  <th>序号</th><th>姓名</th><th>性别</th>
  </tr>
  <tr>
  <td>1</td><td>历史1</td><td>男</td>
  </tr>
  <tr>
  <td>2</td><td>历史2</td><td>男</td>
  </tr>
  <tr>
  <td>3</td><td>历史3</td><td>女</td>
  </tr>
  <tr>
  <td>4</td><td>历史4</td><td>男</td>
  </tr>
  <tr>
  <td>5</td><td>历史5</td><td>男</td>
  </tr>
  </table>
  <button onclick="settable()">设置表格效果</button>
  <script src="js/jquery-1.12.2.min.js"></script>
  <script>
  function settable(){
  $("table").css(‘border‘,‘1px solid lightgray‘);
  $("table").css({
  ‘width‘:‘600px‘,
  ‘border-collapse‘:‘collapse‘,
  ‘text-align‘:‘center‘
  });
  $("table th, table td").css(‘border‘,‘1px solid lightgray‘);
  $(‘table tr:first‘).css(‘background-color‘,‘#d3d3d3‘);
  // $(‘table tr:not(:first):even‘).css(‘background-color‘,‘#eee‘);
  $(‘table tr:gt(0):even‘).css(‘background-color‘,‘#eee‘);
  $(‘table tr:not(:first):odd‘).css(‘background-color‘,‘#ggg‘);
  }
   
   
  // alert($(‘div div‘).length);
  // for(var i=0; i<$(‘div div‘).length; i++){
  // alert($(‘div div‘).eq(i).html());
  // }
  // jquery的循环,使用each函数
  // jQuery的each函数,循环所获取的原生的js元素对象
  // $(‘div div‘).each(function(i){
  //// alert(this.innerHTML);
  // alert($(this).html());
  // });
  // :first 指代获取第一个元素
  // alert($("div div:first").html());
  // alert($("div div").eq(0).html());
  // alert($("div div:eq(0)").html());
   
  // $("div div:not(:first)").each(function(i){
  // alert($(this).html());
  // });
   
  // :even 获取索引序号为偶数的元素
  // $("div div:even").each(function(i){
  // alert($(this).html());
  // });
   
  // $("div div:odd").css(‘color‘,‘red‘);
  </script>
  </body>
  </html>

      这次的代码是刚学习不久的JQuery代码 个人的话对此也不是太过熟悉 必须要加强对代码的熟练巩固了啊,真是太不好意思了,简单的来说,JQuery使得我们的代码学习书写简单了许多,方便了代码开发的工作者,使之更为快捷的使用编写,辛苦了大佛们。这次的代码则利用的JQuery实现了一个按钮更改页面上的表单元素,也就是css样式,更为轻便。

时间: 2024-10-17 01:37:04

JQuer的简单应用的相关文章

利用jquer+css简单实现购物网站的图片增大。

在我们浏览淘宝京东等网站的时候,浏览商品的图片时,当我们把鼠标移动到图片上的时候,会让其变大,利于消费者观察,接下来我将用jQuery+css技术对其功能进行一简单实现. 第一步:创建项目,并且在webapp下建立如下文件夹. 第二步:代码编译: HTML+CSS: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here<

Jquer基础之动画操作

Jquery的动画效果能够轻松的为网页添加动画效果,为网页带来了新的活力. 一.show()方法和hide()方法 show()方法和hide()方法是jquery中最基本的动画方法.使用show()方法会将隐藏的元素显示出来,使用hide()方法会将元素的属性设置为display:none.使用hide()方法会记住原来的display属性值,并把现在的display属性设置为none;show()方法会元素的属性设置为hide()前的属性值. 示例: $("btnShowHide"

C# Ping 简单使用

编程过程中,有时候需要判断主机是否在线,最简单的方法就是使用Windows的Ping命令看看能否ping通.看到网上很多文章,说用C#去调用windows的ping.exe,然后解析返回的字符串.我觉得这种方式太麻烦了,就做一下简单判断,不想弄那么麻烦. 查了一下,C#专门提供了一个Ping类,与Windows下的ping命令类似: 命令空间: System.Net.NetworkInformation; 使用方法: bool online = false; //是否在线 Ping ping =

自动生成简单四则运算的C语言程序

该程序是在博客园里面找的,具体是谁的找了半天没找到,无法提供它原本的链接.由于自己写的过于简单,且有一些功能暂时无法实现,所以就找了一个来应付作业,望原谅.在这个程序的源码中我改了一个错误的地方,源码中有这样一个随机数发生器的初始化函数的语句:"srand((unsigned)time(NULL))".srand函数是随机数发生器的初始化函数.但是正确的写法应该是:srand(unsigned( time(NULL))):为了防止随机数每次重复,常常使用系统时间来初始化,即使用time

Mysql的锁机制与PHP文件锁处理高并发简单思路

以购买商品举例: ① 从数据库获取库存的数量. ② 检查一下库存的数量是否充足. ③ 库存的数量减去买家购买的数量(以每个用户购买一个为例). ④ 最后完成购买. 仅仅这几行逻辑代码在并发的情况下会出现问题,自己可以想象一下. 这里暂时就不测试了,下面会针对并发的处理给出测试结果. 创建表: CREATE TABLE `warehouse` ( `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'id', `stock` int(11) NOT NULL

Winfrom 简单的安卓手机屏幕获取和安卓简单操作

为啥我要做这个东西了,是因为经常要用投影演示app ,现在有很多这样的软件可以把手机界面投到电脑上 ,但都要安装,比如说360的手机助手,我又讨厌安装,于是就自己捣鼓了下 做了这个东西, 实现了以下简单功能   1.屏幕获取(因为是截图方式获取的,所以有点卡顿) 2.实现点击功能,并在点击的时候出现一个手势图标,方便用户观看 3.实现简单的滑动功能 4.实现在界面上画图功能 5.实现拖拽安装apk功能 操作说明:鼠标左边 模拟手机点击,中键停止/开始刷新界面(画图的时候不能刷新),右键去掉画图内

iOS instruments之ui automation的简单使用(高手绕道)

最近使用了几次instruments中的automation工具,现记录下automation的简单使用方法,希望对没接触过自动化测试又有需求的人有所帮助.  UI 自动测试是iOS 中重要的附加功能,它由名为"Automation"的新的工具对象支持.Automation工具的脚本是用JavaScript语言编写,主要用于分析应用的性能和用户行为,模仿/击发被请求的事件,利用它可以完成对被测应用的简单的UI测试及相关功能测试. 一. 简单的录制脚本 打开xcode,这里用我为我家亲爱

Android ExpandableListView 带有Checkbox的简单应用

expandablelistview2_groups.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height=&qu

Android ExpandableListView的简单应用

Expandablelistview1Activity.java package com.wangzhu.demoexpandablelistview; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import android.app.Activity; import android.os.Bundle; import android.widg