文档章节

Jquery 第一章

hey--老妖
 hey--老妖
发布于 2017/02/10 17:40
字数 955
阅读 1
收藏 0

1.如果我们获取的是jQuery对象,那么我们在变量前面加上$符号。

例
var $variable=jquery 对象

2.如果获取的是DOM对象,那么?  

var variable=DOM 对象

3.jQuery库类型说明

jQuery.js  开发版(未经压缩)

jQuery.min.js    生产版(最小化和压缩版)

4.编写简单的jQuery代码

在jQuery库中,$就是jQuery的一个简写形式。$("#info") 和 jquery("#info") 是一样的。

5.当鼠标点击到a元素 (它是class含有leave1的子元素)的时候,给其添加一个名为current的class,然后将紧邻其后的元素显示出来,同时将它的父辈的同辈元素内部的子元素<a>都去掉一个名为current的class,并且将紧邻它们后面的元素都隐藏。

<body>
  <div class="box">
    <ul class="menu">
      <li class="leav1">
        <a href="#none">衬衫</a>
        <ul class="leav2">
          <li><a href="#none">白衬衫</a></li>
          <li><a href="#none">红衬衫</a></li>
          <li><a href="#none">蓝衬衫</a></li>
          <li><a href="#none">黑衬衫</a></li>
        </ul>
      </li>
      <li class="leav1">
        <a href="#none">裙子</a>
        <ul class="leav2">
          <li><a href="#none">短裙</a></li>
          <li><a href="#none">长裙</a></li>
          <li><a href="#none">超短裙</a></li>
        </ul>
      </li>
      
    </ul>
  </div>
  

 <script type="text/javascript">
    $(".leav1>a").click(function(){    //当鼠标点击到a元素(它是class含有leav1的子元素)的时候
      $(this).addClass("current")      //给当前元素添加"current"样式
      .next().show()                   //下一个元素显示
      .parent().siblings().children("a").removeClass("current")//父元素的同辈元素的子元素<a>移除"current"样式
      .next().hide();                //下一个元素隐藏
      return false;
    })
  </script>
</body>

addClass    和   addclass   的效果不一样

6.jQuery对象和DOM对象

DOM对象:通过JavaScript用getElementsByTagName 或 getElementById 获取的元素节点,就是DOM元素。DOM对象可使用JavaScript中的方法。示例如下:

var domobj=getElementById("id")     //获得DOM对象
var objHTML=domobj.innerHTML        //使用JavaScript中的属性——————innerHTML

jQuery对象:通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的,如果一个对象是jQuery对象,那么就可以使用jQuery里面的方法。例如:

$("#foo").html()       //获取ID为foo的元素内的HTML代码        // .html()  是jQuery里面的方法

7.jQuery对象和DOM对象 相互转换

jQuery对象转换DOM对象

var $cc = $("#cc");
var cc = $cc[0];
第二种方法:

var $cc=$("#cc")
var cc=$cc.get(0)
DOM对象转换jQuery对象

var cc=getElementById("id")
var $cc=$(cc)

8.作业  判断复选框是否被选中

<body>
  <input type="checkbox" name="" id="cc">
  <label for="">我已同意</label>
用DOM方法判断:
  <script type="text/javascript">
    $(document).ready(function(){        //等待DOM元素加载完毕
      var $cc=$("#cc");                  //把jQuery对象转换为DOM对象
      var cc=$cc[0];
      $cc.click(function(){
        if(cc.checked){                 //DOM方式判断
          alert("xiexie")
        }
      })
    })

  </script>
</body>

用jQuery方法判断:
<script type="text/javascript">
    $(document).ready(function(){      //等待DOM元素加载完毕
      var $cc=$("#cc");                  //把DOM对象转换为jQuery对象
      $cc.click(function(){
        if($cc.is(":checked")){         //DOM方式判断
          alert("谢谢")
        }
      })
    })

  </script>

is(“:checked”)是jQuery中的方法,判断jQuery对象是否被选中,返回Boolean值。

9.jquer库在其它库之后导入

  <!-- 先导入其它库 -->
  <script type="text/javascript" src="../lib/prototype.js"></script>
  <!-- 后导入jQuery库 -->
  <script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>
</head>
<body>
 <p id="pp">test-prototype将被隐藏</p>
 <p>test-jquery将被绑定单击事件</p>
  <script type="text/javascript" language="javascript">
    jQuery.noConflict(); //将变量$的控制权移交给prototype.js  // 使用另一个库的 $ 的代码
    jQuery(function(){   //使用jQuery
      jQuery("p").click(function(){
        alert(jQuery(this).text())
      })
    })
$("pp").style.display='none';  //使用prototype.js隐藏元素
  </script>
</body>

10.在其他库之前导入

 <!-- 先导入jQuery库 -->
  <script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>
  <!-- 后导入其它库 -->
  <script type="text/javascript" src="../lib/prototype.js"></script>

</head>
<body>
 <p id="pp">test-prototype将被隐藏</p>
 <p>test-jquery将被绑定单击事件</p>
  <script type="text/javascript" language="javascript">
    jQuery(function(){   //直接使用jQuery,无需调用"jQuery.onConflict()"函数
      jQuery("p").click(function(){
        alert(jQuery(this).text())
      })
    })
$("pp").style.display='none';  //使用prototype.js隐藏元素
  </script>
</body>
</html>

 

© 著作权归作者所有

共有 人打赏支持
上一篇: jQuery 第二章
hey--老妖
粉丝 3
博文 38
码字总数 21133
作品 0
潮州
前端工程师
私信 提问
Zepto.js 简介(第一章)

Zepto.js 简介(第一章) 在做C端-H5的时候,很多时候会用到Zepto.js,所以在这里,我就把它整理一下。 什么是Zepto zepto是轻量级的JavaScript库,专门为移动端定制的框架 与jquery有着类似...

张靖bibibi
2018/06/19
0
0
jQuery系列 第一章 jQuery框架简单介绍

第一章 jQuery框架简单介绍   1.1 jQuery简介   jQuery是一款优秀的javaScript库(框架),该框架凭借简洁的语法和跨平台的兼容性,极大的简化了开发人员对HTML文档,DOM,事件以及Ajax的...

文顶顶水水
2018/04/09
0
0
Web前端开发必备:《Jquery实战》第3版 介绍

目标读者 本书适合想深入学习jQuery的Web开发人员、全栈工程师、架构师。jQuery是互联网上最流行的JavaScript框架。本书的目标是希望读者成为Web高级开发人员,无论起点如何。本书深入介绍了...

frankxulei
2018/06/26
0
0
关于ajax动态刷新的内容保存问题

如图所示,一个选题页面,切换章节后下面的题跟着变,我现在的问题是,比如用户在第一章勾选后,再回到第一章时勾选的样式没了,怎么记录这个? 我用的jquery,当用户切换章时,post实时请求...

jquery-php
2016/04/21
56
1
240多个jQuery插件(1)

文件上传(File upload) Ajax File Upload. jQUploader. Multiple File Upload plugin. jQuery File Style. Styling an input type file. Progress Bar Plugin. 表单验证(Form Validation) j......

五味格子
2011/05/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

gcc -lm -lpthread 一类的理解

C代码调用math.h中的函数有问题,如sqrt函数。会出现问题(点击看问题)。 原因是调用<math.h>中的函数,编译时需要链接对应的库 libm -lm命令是使编译的时候,链接数学库; -lptread 链接线...

shzwork
36分钟前
0
0
关于360插件化Replugin Activity动态修改父类的字节码操作

近期在接入360插件化方案Replugin时,发现出现崩溃情况。 大概崩溃内容如下: aused by: java.lang.ClassNotFoundException: Didn't find class "x.x.x.xActivity" on path: 我自己在插件代码......

Gemini-Lin
今天
1
0
mybatis缓存的装饰器模式

一般在开发生产中,对于新需求的实现,我们一般会有两种方式来处理,一种是直接修改已有组件的代码,另一种是使用继承方式。第一种显然会破坏已有组件的稳定性。第二种,会导致大量子类的出现...

算法之名
昨天
21
0
单元测试

右键方法 Go To --> Test,简便快速生成测试方法。 相关注解 @RunWith(SpringRunner.class) 表示要在测试环境中跑,底层实现是 jUnit测试工具。 @SpringBootTest 表示启动整个 Spring工程 @A...

imbiao
昨天
4
0
欧拉公式

欧拉公式表达式 欧拉公式的几何意 cosθ + j sinθ 是个复数,实数部分也就是实部为 cosθ ,虚数部分也就是虚部为 j sinθ ,对应复平面单位圆上的一个点。 根据欧拉公式和这个点可以用 复指...

sharelocked
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部