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. ast.literal_eval（转）

    eval函数在Python中做数据类型的转换还是很有用的.它的作用就是把数据还原成它本身或者是能够转化成的数据类型.那么eval和ast.literal_val()的区别是什么呢?本文将大家介绍关于P ...

  2. SpringBoot2.X 静态文件配置

    Spring Boot 默认会挨个从 META/resources > resources > static > public 里面找是否存在相应的资源,如果有则直接返回. 默认配置 ...

  3. Mac 下 Android Studio 连 夜神模拟器 调试

    1.运行夜神模拟器(自行搜索下载) 2.进入资源目录 cd /Applications/Nox\ App\ Player.app/Contents/MacOS 3.执行命令连接 adb connect ...

  4. 使用Navicat Premium 客户端绕过白名单限制mysql数据库

    针对有些数据库有白名单限制,但如果IP经常浮动的话,会要经常加白名单,但如果知道可以连接数据库的linux用户密码就能 通过SSH通道代理来连接数据库.保存密码后,这样就能直接连接数据库,减省很多麻烦 ...

  5. gitlab仓库的使用

    一.gitlab简介 gitlab是一个用于仓库管理系统的开源项目,使用git作为代码管理工具,并在此基础上搭建web服务. [管理命令] gitlab-ctl stop        gitlab- ...

  6. fastjson反序列化LocalDateTime失败的问题java.time.format.DateTimeParseException: Text '2019-05-24 13:52:11' could not be parsed at index 10

    本地java类 import org.springframework.format.annotation.DateTimeFormat; import java.time.LocalDateTime; ...

  7. 机器学习：gensim之Word2Vec 详解

    一 前言 Word2Vec是同上一篇提及的PageRank一样,都是Google的工程师和机器学习专家所提出的的:在学习这些算法.模型的时候,最好优先去看Google提出者的原汁Paper和Proje ...

  8. Swift基础知识点的学习

    每一个程序员都有一颗不满足当下知识的学习,学习Swift更是每一个iOS程序员必学技能!!! 一说道基础点的学习,当然涵盖的方面也是很多很多啦....然而每一个小知识点的学习,写一个博客,我也觉得没什 ...

  9. 乌班图18.04 LTS 版LAMP环境配置记录

    -- 2018.06.07 -- liujunhang lamp 环境包括:Apache服务器.php.Mysql数据库,linux服务器架构在虚拟机中.Tip:在进行环境配置之前最好进行镜像存储.1 ...

  10. PJzhang:如何在裸奔的年代找到一些遮羞布

    猫宁!!! 很久以前的一篇,搬过来. 我一直在“裸奔”,而且很久了,只是不太愿意承认. 想起了“皇帝的新装”,好奇何种经历和灵感让安徒生写出了如此精彩的故事. 一次百度了一个商品,不久接到了大规模电话 ...