今天下午讲了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. PHP简单分页类

    <?php /* * ********************************************* * @类名: page * @参数: $myde_total - 总记录数 * ...

  2. javascript的字符串操作

    一,把字符串的首字母大写返回一个新的字符串 1.1简单写法,把一个单词的首字母大写 String.prototype.firstUpperCase = function(){ return this[ ...

  3. win8系统换win7系统

    吐槽一下先,win8换win7好费事~第一次弄,不过总算弄好了,记录一下吧. 首先,最坑人的就是,win8没法像win7那样按F1或者别的,直接进入BIOS,也就没法设置U盘引导,据说是由于win8的 ...

  4. validform表单验证插件最终版

    做个笔记,以后直接用吧. 报名界面: <%@ page language="java" pageEncoding="UTF-8" contentType= ...

  5. SQL server 定时自动执行SQL存储过程

    当一个存储过程是为了生成报表,并且是周期性的,则不需要人工干预,由SQL作业定时自动执行些SQL存储过程即可. 本示例,假设已需要定时执行的存储过程为:Pr_test 工具/原料 SQL Server ...

  6. Pomelo术语解释

    gate服务器 一个应用的gate服务器,一般不参与rpc调用,也就是说其配置项里可以没有port字段,仅仅有clientPort字段,它的作用是做前端的负载均衡.客户端往往首先向gate服务器发出请 ...

  7. Flex组件的生命周期

    组件实例化生命周期描述了用组件类创建组件对象时所发生的一系列步骤,作为生命周期的一部分,flex自动调用组件的的方法,发出事件,并使组件可见. 下面例子用as创建一个btn控件,并将其加入容器中 va ...

  8. [html]关于html标签的一些总结

    以下内容纯属个人对项目细节的总结,因为只是为了自己回顾方便,所以比较杂乱. 1.img 如果不指定img的高度和宽度,则img显示的是原图片的大小:如果只指定了高度和宽度中的一者,则为指定的一者等比例 ...

  9. 免越狱tweak应用逆向开发

    对于已越狱的设备,系统默认安装了mobilesubstrate动态库,提供一个系统级的入侵管道,所有的tweak都可以依赖它来进行开发.而对于没有越狱的手机,我们需要向目标app注入libsubstr ...

  10. IP查询接口

    腾讯的: http://fw.qq.com/ipaddress直接返回本机的IP地址对应的地区新浪的:http://counter.sina.com.cn/ip?ip=IP地址返回Js数据,感觉不是很 ...