<参考文档>
 
1、什么是?
   DOM的作用:提供了一种动态的操作HTML元素的方法。
   jQuery是一个优秀的js库。用来操作HTML元素的工具。
   jQuery和DOM关系:DOM--树。jQuery是多个DOM模型的集合。
   jQuery设计核心理念:write less,do more;
   DOM获取id的值:document.getElementById("id");
   jQuery获取id的值: $("#id");$=jQuery
   jQuery的缺点:效率会下降。
 
   注意点:jQuery可以和DOM混用。
   2005诞生-------11年了。
 
2、相关作用?
 
   1、获取HMTL元素---id,name,tag......
   2、动态改变页面中的css样式和属性。
      <p color="red" style="id:p1;" id="p1">
      css样式。name="p1" input disabled="disabled"
   3、动态的改变页面内容。
      var p1=document.getElementById("p1");
      p1.value="";
   4、事件响应。
      click;focus,blur......鼠标的移动等........
   5、快速实现通信
      ajax---对异步请求的支持非常的缜密。功能非常的完成。
   6、提供页面基本动画需求
      淡入,淡出,擦除,移动。。。。。。
 
3、怎么用?
   第一步:下载包......
  
第二步:配置
          本机配置:<script src="js/..."></script>
           联网配置:<  src="http://ajax.googleapis.com/ajax/jquery/1.6.4/jquery.min.js">
 
第一种:< script type= "text/javascript" src= "js/jquery-1.7.2.min.js" ></script >
 
第二种:< script type= "text/javascript" src= "./js/jquery-1.7.2.min.js" ></script >
 
 
      
第三步:测试;
 
 
4、选择器
 
   基本选择器
  • id选择器:$("#p1").css({"color":"red","font-size":"50px"});
  • 类选择器:$(".p1").css("color","red");
  • 标签选择:$("p").css("color","blue");
  • 选择后过滤:$("p[class='p1']").css("color","blue");
  • 通配符选择器:$("div *").css("color","blue");(注意,星号前有空格键)
  • 组选择器:$("h2,#div1,.p2,[title='p2']").css("color","yellow");
 
  伪类选择器:选择符前有一个 ":"(冒号)
       特定位置选择器::first,:last,:eq()
  • $("tr:last").css("background-color","red");    --------表格的最后一行变成红色
  • $("tr:first").css("background-color","red");
  • $("p").eq(0).css();  -----得到第一个<P>标签
 
       指定范围选择器:(多用表格)
  • :even,  //奇数行
  • :odd,      //偶数行
  • gt(),
  • lt()
       注意点:指定范围选择器在表格的使用中非常的方便。
 
< script type= "text/javascript" >
     $( function() {
            //随着页面自动加载
            //$("#p1").css({"color":"red","font-size":"20px"});
            //$(".p2").css("color","red");
            // $("p[class='p1']").css("color","blue");
            //$("div *").css("color", "green");
            //   $("h2,#div1,.p2,[title='p2']").css("color", "yellow");
 
            //        $("tr:first").css("background-color","red");
            //        $("tr:last").css("background-color","green");
            //        $("tr").eq(1).css("background-color","blue");
 
            //        $("tr:even").css("background-color","blue");
            //        $("tr:odd").css("background-color","green");
 
           $( "tr:gt(1)").css( "background-color" , "blue" );
           $( "tr:lt(1)").css( "background-color" , "red" );
 
     });
</ script>
 
 
5、属性和css操作
   属性操作: attr();
   css样式操作: css("","");css({"":"","":""});
 
6、获取文本和值?
   文本:text();<p>hello</p>  $("#p3").text()
   值 val() :主要正对于表单元素中的value中的值。
 
 
7、事件控制
   jQuery中定了bind统一的接口,来为每一个匹配的标签添加事件控制。
   案例:点击p标签,让字体变成红色。
    1、事件注册   
       bind
     $("p").bind();
    2、toggle
       可以为click是绑定两个方法
    3、hover:可以模仿悬停事件和鼠标移上去和鼠标离开。
 
 
8、综合案例。
   综合案例1:使用jQuery完成密码是否一致判断。
 
< script type= "text/javascript" src= "js/jquery-1.7.2.min.js" ></script >
< script type= "text/javascript" >
     $( function() {
           $( "#username").focus( function(){
                 if($( "#username").val()== "请输入用户名" )
                     $( this).val( "");
           });
           $( "#username").blur( function(){
                 if($( "#username").val()== "")
                     $( this).val( "请输入用户名" );
           });
           $( "#pwd").focus( function(){
                 if($( "#pwd").val()== "请输入密码" )
                     $( this).val( "");
           });
           $( "#pwd").blur( function(){
                 if($( "#pwd").val()== "")
                     $( this).val( "请输入密码" );
                 if($( "#pwd").val()==$( "#username").val()){
                     $( "#s1").text( "用户名可用" ).css("color" ,"green" );
                } else{
                     $( "#s1").text( "用户名不可用" ).css("color" ,"red" );
                }
           });
     });
</ script>
</ head>
< body>
      <input id = "username" type= "text" value= "请输入用户名" />< span id = "s1"></ span>
      <br >
      <input id = "pwd" type= "text" value= "请输入密码" />
 
</ body>
 
   综合案例2:全选,反选,全部选,选中的值
 
< script type= "text/javascript" src= "js/jquery-1.7.2.min.js" ></script >
< script type= "text/javascript" >
     $( function() {
           $( "#qx").click( function(){
            var chks=$( "input[type='checkbox']" );
            for( var i=0; i<chks.length;i++){
                chks[i].checked= true;
           }
     });
           $( "#fx").click( function(){
            var chks=$( "input[type='checkbox']" );
            for( var i=0; i<chks.length;i++){
                chks[i].checked=!chks[i].checked;
           }
     });
           $( "#qbx").click( function(){
            var chks=$( "input[type='checkbox']" );
            for( var i=0; i<chks.length;i++){
                chks[i].checked= false;
           }
           });
 
           $( "#test").click( function(){
           $( "input:checkbox[name='chks']:checked" ).each(
                    function(){
                   alert($( this).val());
 
     });
     });
     });
 
</ script>
 
</ head>
< body>
      <input type = "checkbox" name= "chks" value= "100" />
      <input type = "checkbox" name= "chks"  value= "200" />
      <input type = "checkbox" name= "chks"  value= "300" />
      <input type = "checkbox" name= "chks"  value= "400" />
 
      <input type = "button" id= "qx" value= "全选" >
      <input type = "button" id= "fx" value= "反选" >
      <input type = "button" id= "qbx" value= "全不选" >
      <input type = "button" id= "test" value= "选中的值" />
</ body>
 
   综合案例3:隔行变色
   综合案例4:克隆。
 
< script type= "text/javascript" >
     $( function() {
            var i=0;
           $( "#tab1").click( function(){
                 /* var b2=$("table").clone();
                $("#tab1").append(b2); */ ----------克隆
 
                i++;
                $( "#tab1").append( "<p>我是" +i+"</p>" );
           });
     });
</ script>
< style type= "text/css" >
table {
      width: 800px;
      border: 1px solid black;
      border-collapse: collapse;
}
 
tr {
      height: 25px;
}
 
td {
      border: 1px solid black;
}
</ style>
 
</ head>
< body>
 
      <input type = "button" id= "b1" value= "" >
 
      <input type = "checkbox" id= "c1" value= "100" checked= "checked" />
      <input type = "checkbox" />
      <input type = "checkbox" />
      <input type = "checkbox" checked= "checked" />
 
      <table id = "">
            <tr >
                 <td ></td >
                 <td ></td >
                 <td ></td >
            </tr >
            <tr >
                 <td ></td >
                 <td ></td >
                 <td ></td >
            </tr >
            <tr >
                 <td ></td >
                 <td ></td >
                 <td ></td >
            </tr >
      </table >
< span id= "tab1" >点击我 </span >
</ body>

JQuery的基础和应用的更多相关文章

  1. [DOM Event Learning] Section 3 jQuery事件处理基础 on(), off()和one()方法使用

    [DOM Event Learning] Section 3 jQuery事件处理基础 on(),off()和one()方法使用   jQuery提供了简单的方法来向选择器(对应页面上的元素)绑定事件 ...

  2. jQuery 插件基础

    jQuery 插件基础 翻译 How to Create a Basic Plugin 如果你需要在 jQuery 选择器上执行一系列重复操作, 这时候你需要编写 jQuery 插件. jQuery ...

  3. jquery插件开发基础入门

    jquery插件开发基础入门 入门 编写一个jquery插件开始于给jquery.fn加入新的功能属性,此处添加的对象属性的名称就是你的插件名称 jQuery.fn,myPlugin = functi ...

  4. jQuery官方基础教程笔记(转载)

    本文转载于阮一峰的博文,内容基础,结构清晰,是jquery入门不可多得的资料,非常好,赞一个. 阮一峰:jQuery官方基础教程笔记 jQuery是目前使用最广泛的javascript函数库. 据统计 ...

  5. jQuery DOM基础

    jQuery DOM基础 1.对元素内容的获取和修改: 表单用value(),普通元素用html()和text(). html()  html(value)设置和获取html内容,有html标签会自动 ...

  6. 新知识:JQuery语法基础与操作

     jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write ...

  7. jQuery之基础核心(demo)

    jQuery之基础核心     作者的热门手记 jQuery之基础核心(demo)   本文主要简单的介绍下jQuery一些基础核心,大致了解jQuery使用模式.适用于有HTML.CSS.javas ...

  8. 第一百六十三节,jQuery,基础核心

    jQuery,基础核心 一.代码风格 在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号“$”来起 始的.而这个“$”就是jQuery当中最重要且独有的对象:jQuery对象,所 ...

  9. 第一百六十九节,jQuery,基础事件

    jQuery,基础事件 学习要点: 1.绑定事件 2.简写事件 3.复合事件 JavaScript 有一个非常重要的功能,就是事件驱动.当页面完全加载后,用户通过鼠标 或键盘触发页面中绑定事件的元素即 ...

  10. 第一百六十六节,jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度、偏移、滚动条

    jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...

随机推荐

  1. react-router 组件式配置与对象式配置小区别

    1. react-router 对象式配置 和 组件式配置    组件式配置(Redirect) ----对应---- 对象式配置(onEnter钩子) IndexRedirect -----对应-- ...

  2. 【流量劫持】躲避 HSTS 的 HTTPS 劫持

    前言 HSTS 的出现,对 HTTPS 劫持带来莫大的挑战. 不过,HSTS 也不是万能的,它只能解决 SSLStrip 这类劫持方式.但仔细想想,SSLStrip 这种算劫持吗? 劫持 vs 钓鱼 ...

  3. 谈谈如何使用Netty开发实现高性能的RPC服务器

    RPC(Remote Procedure Call Protocol)远程过程调用协议,它是一种通过网络,从远程计算机程序上请求服务,而不必了解底层网络技术的协议.说的再直白一点,就是客户端在不必知道 ...

  4. ABP文档 - 目录

    ABP框架 概览 介绍 多层结构 模块系统 启动配置 多租户 集成OWIN 共同结构 依赖注入 会话 缓存 日志 设置管理 时间 领域层 实体 值对象(新) 仓储 领域服务 工作单元 领域事件(Eve ...

  5. js实现前端分页页码管理

    用JS实现前端分页页码管理,可以很美观的区分页码显示(这也是参考大多数网站的分页页码展示),能够有很好的用户体验,这也是有业务需要就写了一下,还是新手,经验不足,欢迎指出批评! 首先先看效果图: 这是 ...

  6. 算法与数据结构(十三) 冒泡排序、插入排序、希尔排序、选择排序(Swift3.0版)

    本篇博客中的代码实现依然采用Swift3.0来实现.在前几篇博客连续的介绍了关于查找的相关内容, 大约包括线性数据结构的顺序查找.折半查找.插值查找.Fibonacci查找,还包括数结构的二叉排序树以 ...

  7. ASP.NET Core project.json imports 是什么意思?

    示例代码: "frameworks": { "netcoreapp1.0.0": { "imports" : "portable- ...

  8. AndroidStudio — Error:Failed to resolve: junit:junit:4.12错误解决

    原博客:http://blog.csdn.net/u013443865/article/details/50243193 最近使用AndroidStudio出现以下问题: 解决:打开app下的buil ...

  9. git命令行操作

    从本地上传代码到仓库(假设已经建好仓库): 1.初始化: git init 2.将所有文件加入缓存区: git add * 3.提交当前工作空间的修改内容: git commit -m 'commit ...

  10. 基于SOA架构的TDD测试驱动开发模式

    以需求用例为基,Case&Coding两条线并行,服务(M)&消费(VC)分离,单元.接口.功能.集成四层质量管理,自动化集成.测试.交付全程支持. 3个大阶段(需求分析阶段.研发准备 ...