1-1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>

<script>

  window.onload = function(){};

  //$(document).ready(function() {}); == $(function(){});

  $(document).ready(function() {

    alert("welcome to jquery");

  });

  //区别...

  //1.执行时间不同--$(document).ready()在页面框架下载完毕后执行；window.onload必须在页面全部加载完毕后执行

  //2.执行数量不同

  //3.$(document).ready()简写

</script>

</head>

<body>

</body>

</html>

1-2  链式写法，两个功能实现通"."符号连接

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>事件的链式方法</title>

<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>

<style type="text/css">

 .divFrame{ width:260px; border:solid 1px #666; font-size:10pt;}

 .divTitle{ background-color:#eee; padding:5px;}

 .divContent{ padding:5px; display:none;}

 .divCurrColor{ background-color:red;}

</style>

<script>

  var jici =0;

  $(document).ready(function() {

    $(".divTitle").click(function(){

        //链式的写法...

        $(this).addClass("divCurrColor").next(".divContent").css("display","block");

        /*

        if(jici ==0)

        {

            $(".divContent").css("display","block");

            jici =1;

        }

        else

        {

            $(".divContent").css("display","none");

            jici =0;

            }

            */

        });

  });

</script>

</head>

<body>

  <div class="divFrame">

    <div class="divTitle">Title</div>

    <div class="divContent">

      <a href="#">111</a>

      <a href="#">222</a>

      <a href="#">333</a>

    </div>

  </div>

</body>

</html>

1-3 控制DOM对象

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<style type="text/css">

  .divFrame{ width:260px; border:solid 1px #666; font-size:10pt;}

  .divTitle{ background-color:#eee; padding:5px;}

  .divContent{ padding:8px; font-size:9pt;}

  .divTip{ width:244px; border:solid 1px #666; padding:8px; font-size:9pt; margin-top:5px; display:none;}

  .txtCss{ border:solid 1px #ccc;}

  .divBtn{ padding-top:5px;}

  .divBtn .btnCss{ border:solid 1px #535353; width:60px;}

</style>

<script>

   //use javascript

  function test(){

      var name = document.getElementById('Text1').value;

      var sex = (Radio1.checked)?"男":"女";

      var marry = (Checkbox1.checked)? "已婚":"未婚";

      document.getElementById('divTip').style.display ="block";

      document.getElementById('divTip').innerHTML = name+"<br />"+sex+"<br />"+marry;

      };

</script>

<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>

<script> $(document).ready(function() {

     $("#Button1").click(function () {

     var name = $("#Text1").val();

     var sex =$("#Radio1").is(":checked")?"男":"女";

     var marry =$("#Checkbox1").is(":checked")?"已婚":"未婚";

     $("#divTip").css("display","block").html(name+"<br />"+sex+"<br />"+marry);

     });

 });

</script>

<body>

 <div class="divFrame">

   <div class="divTitle">请输入如下信息</div>

   <div class="divContent">

     姓名:<input id="Text1" type="text" class="txtCss" /><br />

     性别：<input id="Radio1" name="rdoSex" type="radio" value="男" />男

     <input id="Radio2" name="rdoSex" type="radio" value="女" />女<br />

     婚否<input id="Checkbox1" type="checkbox" />

     <div class="divBtn"><input id="Button1" type="button" value="提交" class="btnCss"  /></div>

   </div>

 </div>

 <div id="divTip" class="divTip"></div>

</body>

</html>

1-4 控制CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

  .divDefault{ width:260px; font-size:10pt; padding:5px;}

  .divClick{ width:260px; border:solid 1px #666; font-size:10pt; background-color:#eee; padding:5px;}

</style>

<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>

<script>

// toggleClass  addClass

  $(function(){

      $(".divDefault").click(function(){

          $(this).toggleClass("divClick").html("点击后的样式");

          });

      })

</script>

</head>

<body>

  <div class="divDefault">点击前的样式</div>

</body>

</html>

第一篇 jQuery的更多相关文章

  1. 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器

    × 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...

  2. jquery jtemplates.js模板渲染引擎的详细用法第一篇

    jquery jtemplates.js模板渲染引擎的详细用法第一篇 Author:ching Date:2016-06-29 jTemplates是一个基于JQuery的模板引擎插件,功能强大,有了 ...

  3. Three.js 第一篇：绘制一个静态的3D球体

    第一篇就画一个球体吧 首先我们知道Three.js其实是一个3D的JS引擎,其中的强大之处就在于这个JS框架并不是依托于JQUERY来写的.那么,我们在写这一篇绘制3D球体的文章的时候,应该注意哪些地 ...

  4. 【第一篇】ASP.NET MVC快速入门之数据库操作（MVC5+EF6）

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  5. Python开发【第一篇】：目录

    本系列博文包含 Python基础.前端开发.Web框架.缓存以及队列等,希望可以给正在学习编程的童鞋提供一点帮助!!! Python开发[第一篇]:目录 Python开发[第二篇]:初识Python ...

  6. 前端—我的第一篇博客 梦开始的地方（面向对象版tab栏）

    这是我的第一篇博客 博客生涯才开始 但是人生已经过去了二十个年头了 才开始弄这个 也没搞得太懂 我原本的想法是想搞个源代码上来 但是看了半天好像就只能传html源代码 那我还有css js的部分呢 我 ...

  7. 从0开始搭建SQL Server AlwaysOn 第一篇（配置域控）

    从0开始搭建SQL Server AlwaysOn 第一篇(配置域控) 第一篇http://www.cnblogs.com/lyhabc/p/4678330.html第二篇http://www.cnb ...

  8. Python爬虫小白入门（四）PhatomJS+Selenium第一篇

    一.前言 在上一篇博文中,我们的爬虫面临着一个问题,在爬取Unsplash网站的时候,由于网站是下拉刷新,并没有分页.所以不能够通过页码获取页面的url来分别发送网络请求.我也尝试了其他方式,比如下拉 ...

  9. Android基础学习第一篇—Project目录结构

    写在前面的话: 1. 最近在自学Android,也是边看书边写一些Demo,由于知识点越来越多,脑子越来越记不清楚,所以打算写成读书笔记,供以后查看,也算是把自己学到所理解的东西写出来,献丑,如有不对 ...

随机推荐

  1. ZooKeeper分布式锁的实现原理

    七张图彻底讲清楚ZooKeeper分布式锁的实现原理[石杉的架构笔记] 文章转载自:https://juejin.im/post/5c01532ef265da61362232ed#comment(写的 ...

  2. php phpexcel 创建excel

    public function createExcel($result=[],$fileName=''){ \think\Loader::import('extend.excel.PHPExcel', ...

  3. python3.*之列表常用操作

    首先定义一个列表:names= ["xiaoming","xiaogang","xiaomei","xiaohong"] ...

  4. CMD命令行管道命令

    一.什么是管道命令 管道命令能够将一个命令的执行结果经过筛选,只保留我们需要的信息. 如 dir 命令会显示目录下所有文件夹和文件,可以使用管道命令| findstr "" 将di ...

  5. LC 833. Find And Replace in String

    To some string S, we will perform some replacement operations that replace groups of letters with ne ...

  6. ASP.NET解决跨域问题

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  7. JVM内存模型及配置参数

    JVM 分为堆.栈.方法区.程序计数器.本地方法栈 栈内存存放局部变量表.操作栈.动态链接.方法出口等信息 1.  局部变量表存放了编译期可知的各种基本数据类型(boolean.byte.char.s ...

  8. Python安装远程调试Android需要的扩展脚本

    http://android-scripting.googlecode.com/hg/python/ase/android.py 拷贝到/Python27/Lib/site-packages这个目录下 ...

  9. 5、kubernetes资源清单定义入门

    使用配置清单创建资源 定义pod时使用yaml格式 master ~]# kubectl get pod NAME READY STATUS RESTARTS AGE client / Error 1 ...

  10. ButterKnifer使用

    ButterKnifer使用 1.集成 github地址: https://github.com/JakeWharton/butterknife 1.1在主Moduel中的使用 在主moduel中的b ...