在讲解jQuery时，要和JavaScript进行对比的讲解，易于理解

JavaScript部分

<title>jquery讲解使用</title>

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

</head>

<body>

<div id="aa">hello</div>

<div class="bb">22</div>

<div class="bb">33</div>

<div class="bb">44</div>

<input type="text" name="cc" bs="dd"\>

</body>

<script type="text/javascript">

//根据id找元素,找到具体的DOM对象

var d=document.getElementById("aa");

var c=document.getElementsByClassName("bb");

c[0].style.Color="red";           //加索引是因为class数量多，以数组形势找

var div=document.getElementsByTagNameNS("div"); //根据标签名

var input=document.getElementsByName("cc");     //根据name找

//操作内容

//1.非表单元素：

d.innerHTML;  d.innerTEXT;  //获取内容； //添加内容，在后面加 ="";

//2.表单元素

d.value;   //获取内容；  //添加内容，在后面加="";

//操作属性

d.setAttribute("ps","pp");    //设置属性

d.getAttribute("ps");        //获取属性

d.removeAttribute("ps");    //移除属性

//操作样式

d.style.color="red";  //设置样式

d.style.backgroundColor="green";

alert(d.style.width);  //获取样式

　　

jQuery部分

//jQuery部分

$(document).ready(function(e) {

	//根据id找元素，找到JQUERY对象,数组形势；若果要去DOM对象，取索引0的元素

	var jd=$("#aa");  //根据id

	alert(jd[0]);

	var jc=$(".bb");  //根据class

	var div=$("div");  //根据标签名

	var ip=$("input[bs=dd]");  //根据属性筛选

	alert(ip.ep(0)[0]);     //第一个0代表数组索引，ep代表取第几个，第二个0代表取DOM对象

	for(var i=0;i<jc.length;i++)

	{

		jc.eq(i);//取数组里的第几个JQUERY对象

	}

//操作内容

	//1.非表单元素

	jd.text();//获取内容

	jd.text("hello"); //添加内容

	jc.html(); //获取内容

	jc.html("world"); //添加内容

	//2.表单元素

	jc.val(); //获取内容

	jc.val("hello,world"); //添加内容

//操作属性

	ip.attr("ps","bb"); //设置属性， 属性名，属性值

	ip.attr("ps");  //获取属性

	ip.removeAttr("ps"); //移除属性

	 jd.prop("color","red");//用法和attr()函数一样，

	 jd.prop("color");

//操作样式

	jc.css("background-color","red");

//给一个元素添加事件

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

		alert("正确！");

		})

//给多个元素添加事件

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

		alert($(this).text());

		})

//给多个元素设置相同的样式

	$(".bb").css("color","red");

});

　　

练习：使用jQuery实现“全选”等形式

前端页面显示

<title>JQ全选</title>

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

</head>

<body>

<input type="checkbox" id="all"/>全选<br />

<input type="checkbox" class="m" value="aa"/>aa 

<input type="checkbox" class="m" value="bb"/>bb 

<input type="checkbox" class="m" value="cc"/>cc 

<input type="checkbox" class="m" value="dd"/>dd 

<br />

<div>

     取选中的值：<input type="button" id="btn" value="点击测试"/>

</div>

<div>

    填写内容进行选中：<input type="text" id="tet"/>

                   <input type="button" id="tb" value="查找选中"/>

</div>

</body>

　　

一.全选功能jQuery代码

	//全选

    $("#all").click(function(){

		var jc=$(".m");

		var jd=$(this)[0].checked;

		jc.prop("checked",jd);   //设置属性：prop("属性名","属性值")函数，  //获取属性prop("属性名");

		})

});

二、取选中的值功能jQuery代码

//取选中的值

	$("#btn").click(function(){

		var jc=$(".m");

		for(var i=0;i<jc.length;i++)

		{

			if(jc.eq(i).prop("checked"))  //标签中都是固有属性，用prop()函数；含有自定义属性时用attr()函数

			{

				alert(jc.eq(i).val());

			}

		}

		})

　　

三、根据填写的内容进行选中

//填写内容进行选中

	$("#tb").click(function(){

		var v=$("#tet").val();

		var jc=$(".m");

		jc.prop("checked",false);

		for(var i=0;i<jc.length;i++)

		{

			if(jc.eq(i).val()==v)

			{

				jc.eq(i).prop("checked",true);

		    }

		}

		})

　　

在注册表单时，经常会看到

前端代码

<input type="checkbox" id="cr" />同意并接受注册协议

<input type="button" value="提交" id="btn" disabled="disabled"/>

　　

jq代码:

/*同意之后，按钮可用*/

	$("#cr").click(function(){

		var cr=$(this)[0];  //DOM方式

		if(cr.checked){

			$("#btn").removeAttr("disabled");

		}

		else{

			$("#btn").attr("disabled","disabled");

		}

        })

　　

	/*同意之后，按钮可用*/

	$("#cr").click(function(){

		var cr=$(this);     //jQuery方式

		if(cr.is(":checked")){

			$("#btn").removeAttr("disabled");

		}

		else{

			$("#btn").attr("disabled","disabled");

		}

	});

　　

jQuery讲解的更多相关文章

  1. JavaScript中函数和类(以及this的使用<重点>，以及js和jquery讲解，原生js实现jquery)

    1.javascript中以函数来表示类: 一般函数是小写开头:function foo() 类开头是大写:function Foo() 实例化类: obj = new Foo() 其他属性就同类是一 ...

  2. Web前端开发工程师课程大纲

    PHP程序员雷雪松整理出来的一套独一无二的Web前端开发课程.本套Web前端开发课程专门为想励志成为优秀web前端工程师的学习者而总结归纳的,本套Web前端课程舍弃了一些不常用的即将废弃的HTML标签 ...

  3. 使用Jquery+EasyUI 进行框架项目开发案例讲解之五 模块（菜单）管理源码分享

    http://www.cnblogs.com/huyong/p/3454012.html 使用Jquery+EasyUI 进行框架项目开发案例讲解之五  模块(菜单)管理源码分享    在上四篇文章 ...

  4. 使用Jquery+EasyUI 进行框架项目开发案例讲解之四 组织机构管理源码分享

    http://www.cnblogs.com/huyong/p/3404647.html 在上三篇文章  <使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享> ...

  5. 使用Jquery+EasyUI 进行框架项目开发案例讲解之三---角色管理源码分享

    使用Jquery+EasyUI 进行框架项目开发案例讲解之三 角色管理源码分享    在上两篇文章  <使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享> ...

  6. 使用Jquery+EasyUI 进行框架项目开发案例讲解之二---用户管理源码分享

    使用Jquery+EasyUI 进行框架项目开发案例讲解之二 用户管理源码分享   在上一篇文章<使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享>我们分享 ...

  7. 【推荐】使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享

    使用Jquery+EasyUI 进行框架项目开发案例讲解之一 员工管理源码分享   在开始讲解之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于jQuery的U ...

  8. 【jquery】 API讲解 内部培训资料

    资料在百度云盘 一.jquery  API讲解 1.jquery  api如何使用 jquery  api http://www.hemin.cn/jq/ 2.常用api讲解 选择器: 通过$()获取 ...

  9. jQuery&HTML&CSS3实现垂直手风琴折叠菜单方法讲解

    在网页制作中我们常常需要折叠式的菜单,在折叠菜单中,手风琴特效的菜单是非常受欢迎,下面就讲解使用jQuery+HTML+CSS3实现垂直手风琴折叠菜单的方法. jQuery实现垂直手风琴折叠菜单示例代 ...

随机推荐

  1. MongoDB常用操作总结

    ====================================MGDB的操作====================================== 0.创建数据库时使用(use 数据库 ...

  2. [LeetCode]题解（python）：083 - Remove Duplicates from Sorted List

    题目来源 https://leetcode.com/problems/remove-duplicates-from-sorted-list/ Given a sorted linked list, d ...

  3. LightOj 1138 - Trailing Zeroes (III) 阶乘末尾0的个数 & 二分

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1138 题意:给你一个数n,然后找个一个最小的数x,使得x!的末尾有n个0:如果没有输出 ...

  4. 判断cdn上的图片可以正常访问到

    昨天晚上cdn宕机1小时,要对上传的资检查,写了个简单的小脚本来实现上传过的资源都是正常的(其实非必须),就是练手防止生疏. arr.each do |a | res = Net::HTTP.get_ ...

  5. saltstack之(七)配置管理系统初始化init

    saltstack的配置管理分环境管理:①.base为基础环境,一般会存放一些所有服务器都使用的配置管理信息.②.dev为开发测试环境,一般会存放一些开发测试服务器使用的配置管理信息.③.pro为线上 ...

  6. kernel 模块与简单 hello 模块

    Kernel 模块与简单 hello 模块 kernel 模块的简介 Linux 内核进行扩展时,例如编写驱动程序.netfilter功能等,最方便的方式是通过编写模块,然后加载到内核中.由于 ker ...

  7. MVC项目实践,在三层架构下实现SportsStore-08,部署到IIS服务器

    SportsStore是<精通ASP.NET MVC3框架(第三版)>中演示的MVC项目,在该项目中涵盖了MVC的众多方面,包括:使用DI容器.URL优化.导航.分页.购物车.订单.产品管 ...

  8. 开发API文档相关问题(*.chm)

    在网上下了一个chm的文件,打开后只有目录,右侧不显示内容. 不知道是文件有问题,还是系统有问题. google了一下.解决了. 右键点击文件–属性 看到 最下面有一个提示 说是这个文件是来自其他计算 ...

  9. Java 线程池的介绍以及工作原理

    在什么情况下使用线程池? 1.单个任务处理的时间比较短 2.将需处理的任务的数量大 使用线程池的好处: 1. 降低资源消耗: 通过重复利用已创建的线程降低线程创建和销毁造成的消耗.2. 提高响应速度: ...

  10. VMware (威睿) 虚拟化产品简介

    VMware vSphere 是VMware(威睿)的一个虚拟化产品,VMware vSphere 是业界领先且最可靠的虚拟化平台.vSphere将应用程序和操作系统从底层硬件分离出来,从而简化了 I ...