在讲解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. String 与StringBuffer比较

    package String比较; /* * String 与StringBuffer比较 * String 不可变,一旦赋值,就不能被修改 * StringBuffer可变的字符串. * Strin ...

  2. [LeetCode] Substring with Concatenation of All Words(good)

    You are given a string, S, and a list of words, L, that are all of the same length. Find all startin ...

  3. 【C++】error C4146: 一元负运算符应用于无符号类型，结果仍为无符号类型

    刷leetcode 263.uglynumber时,代码如下: class Solution { public: bool isUgly(int num) { int temp = num; ) re ...

  4. 【转】TableLayout(表格布局)

    转自:http://www.cnblogs.com/zhangs1986/archive/2013/01/17/2864536.html TableLayout(表格布局) 表格布局模型以行列的形式管 ...

  5. SET Statements for SQLServer

    SET SHOWPLAN_ALL { ON | OFF } It will not execute the TSQL statements. It cannot be specified inside ...

  6. 解决【必须使用“角色管理工具”安装或配置Microsoft .NET Framework 3.5 SP1】的方法

    [摘要:正在Windows Server 2008下间接装置SQL Server 2008时,会涌现以下毛病: 必需应用“脚色治理对象”装置或设置装备摆设Microsoft .NET Framewor ...

  7. Android --LoginActivity模板登录

    Android Studio使用自带LoginActivity模板,制作登录界面 登录界面功能: 1.记住表单账户密码,并自动登录 //获得sp实例对象 sp = this.getSharedPref ...

  8. pymongo使用总结

    0. 何为pymongo pymongo是操作MongoDB的python模块 1.安装pymongo # easy_install pymongo 2.连接mongodb >>> ...

  9. C#实现根据IP 查找真实地址

    IPScanner.cs public class IPScanner { private byte[] data; Regex regex = new Regex(@"(((\d{1,2} ...

  10. 修改了系统自带头文件后,Xcode会报错

    1.Xcode自带头文件的路径 /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Develo ...