今天下午讲了Jquery的基本用法；在用Jquery方法时，首先要引用Jquery文件：

<script src="jquery-1.11.2.min.js"></script>；

引用文件的语句一定要放在最前面，即使写了新的js方法和引用的js文件，也要把Jquery文件的引用语句放在最前面。下面就说一下Jquery和js的区别：

1.找元素（两种方法一一对应）：

js方法：

var  a  = document.getElementById("id名");

var  a  = document.getElementsByClassName("class名");

document.getElementsByTagName("标签名");

var  a  = document.getElementsByName("name名");

Jquery方法：

var a = $("#id名");

var a = $(".class名");

var a = $("标签名");

var a = $("[属性名=属性值]");

最后一个方法非常方便，很实用，我们可以看到Jquery方法的代码量少了很多，也很方便。

2.操作内容：

js方法：

（1）.非表单元素：

alert(a.innerText); 获取文本

alert(a.innerHTML);HTML代码

（2）.表单元素：

alert(a.value);

a.value="hello";

Jquery方法：

（1）.非表单元素：

alert(a.text());

a.text("bbbbb");

alert(a.html());

（2）.表单元素：

a.val("hello");

3.操作属性：

js方法：

a.setAttribute("属性名","属性值");   添加属性

a.removeAttribute("属性名");        删除属性

alert(a.getAttribute("属性名"));     获取属性

Jquery方法：

a.attr("属性名","属性值");             添加属性

a.removeAttr("属性名");              删除属性

alert(a.attr("属性名"));                获取属性

或者别的方法：

a.prop("属性名","属性值");            添加属性

a.removeProp("属性名");             删除属性

alert(a.prop("属性名"));               获取属性

a.prop("checked",true);

alert(a.prop("checked"));            选择点击事件

4.操作样式：

js方法：

a.style.样式名="样式格式";

alert(a.style.样式名);

Jquery方法：

a.css("样式名","样式格式");

alert(a.css("样式名"));

5.统一操作样式：

js方法：

var d = document.getElementsByClassName("a1");
for(var i=0;i<d.length;i++)
{
d[i].style.fontSize = "30px";
}

Jquery方法：

$(".a1").css("font-size","30px");
$(".ck").prop("checked",true);

这里就可以看出Jquery方法的简便；

下面让我们做一个测试看一下：

<!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 src="jquery-1.11.2.min.js"></script>

<style type="text/css">

.aa{ width:200px; height:200px; float:left; background-color:green; margin:2px;}

</style>

</head>

<body>

<div class="aa"></div>

<div class="aa"></div>

<div class="aa"></div>

<div class="aa"></div>

<div class="aa"></div>

<div class="aa"></div>

<div class="aa"></div>

<div class="aa"></div>

<div class="aa"></div>

</body>

<script type="text/javascript">

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

    $(".aa").css("background-color","green");

    $(this).css("background-color","red");

    })

</script>

</html>

测试内容：建立多个div，在点击时，被点击的div变色，如果点击另一个，原本变色的变成原色，效果如下：

点击一个后会变成的样子：

再点击一个变成的样子：

也是说只有被点击的div会变色！！！

Jquery基本用法的更多相关文章

  1. jQuery $.each用法[转]

    jQuery $.each用法 以下内容非原创,来自百度文库http://wenku.baidu.com/view/4796b6145f0e7cd18425368e.html 通过它,你可以遍历对象. ...

  2. jQuery 事件用法详解

    jQuery 事件用法详解 目录 简介 实现原理 事件操作 绑定事件 解除事件 触发事件 事件委托 事件操作进阶 阻止默认事件 阻止事件传播 阻止事件向后执行 命名空间 自定义事件 事件队列 jque ...

  3. jquery cookie 用法

    jquery cookie 用法 $.cookie("name","value","options")  当不设置options时,此coo ...

  4. [转]Jquery Ajax用法

    原文地址:http://www.php100.com/html/program/jquery/2013/0905/6004.html jQuery学习之jQuery Ajax用法详解 来源:   时间 ...

  5. JQuery datepicker 用法

    JQuery datepicker 用法   jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加 ...

  6. jquery.cookie用法详细解析，封装的操作cookie的库有jquery.cookie.js

    jquery.cookie用法详细解析 需要注意存入cookie前,对数据进行序列化, 得到后在反序列化: 熟练运用:JSON.stringify();和JSON.parse(): 通常分为如下几个步 ...

  7. jquery.post用法补充(type设置问题)

    jquery.post用法 http://blog.csdn.net/itmyhome1990/article/details/12578275 当使用ajax获取data数据的时候,直接data.f ...

  8. jQuery -- 光阴似箭（一）：初见 jQuery -- 基本用法，语法，选择器

    jQuery -- 知识点回顾篇(一):初见jQuery -- 基本用法,语法,选择器 1. 使用方法 jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数. ...

  9. jQuery 动画用法

    jQuery动画: <head> <meta charset="UTF-8"> <title>Title</title> <s ...

  10. jquery cookie用法

    jquery cookie用法(获取cookie值,删除cookie) cookie在jquery中有指定的cookie操作类,下面我先来介绍我们在使用cookie操作类时的一些问题,然后介绍正确的使 ...

随机推荐

  1. PosixIO

    1.打开文件 int open(const char *pathname, int flags); int open(const char *pathname, int flags, mode_t m ...

  2. DataTimePicker

    日期时间控件 DataTimePicker 功能:拾取系统时间.日期,并以对应格式输出 重要属性: a. date,拾取的时间.  b. Time,拾取的系统时间 举例如:button2.Captio ...

  3. servlet中的8个Listener

    servlet中的8个Listener: Xml: <?xml version="1.0" encoding="UTF-8"?> <web-a ...

  4. lufylegend库 LBitmapData LBitmap LSprite

    lufylegend库 LBitmapData LBitmap LSprite <!DOCTYPE html> <html lang="en"> <h ...

  5. MyBatis浅尝笔记

    MyBatis应属于一种轻量级的java持久层技术,它通过简单的SQL xml或注解,将数据库数据映射到接口与POJO.最近项目要用到mybatis,所以学习之后在这里做个总结,文中的示例以xml配置 ...

  6. Crontab could not create directory .ssh

    最近在利用 crontab 构建自动备份时,遇到了一个问题.我的脚本中包含了用于服务器用户切换使用的 ssh 命令.当我登录到服务器上时,脚本执行正常:当我没有登录到服务器上时,脚本执行失败,错误提示 ...

  7. [笔记]A Practical Guide to Support Vector Classi cation

    <A Practical Guide to Support Vector Classication>是一篇libSVM使用入门教程以及一些实用技巧. 1. Basic Kernels: ( ...

  8. HTML5中的WebSocket

    在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API.WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术.这个新的API提供了一个方法 ...

  9. Swift 面向对象解析（一）

    面向对象总体概括: Swift 不仅能够面向过程编程,也能够面向对象编程(OOP).面向对象其实就是“以对象为核心”,把我们的客观世界想着是由一个个对象组成的,面向对象编程则为对象提供了属性和方法,属 ...

  10. 模仿jquery的fileupload插件

    仅需要new一个对象,将上传后台的url和点击触发上传的元素id传给对象,就可以自从实现上传 暂不支持IE <html> <body> <a href="#&q ...