jQuery讲解
在讲解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讲解的更多相关文章
- JavaScript中函数和类(以及this的使用<重点>，以及js和jquery讲解，原生js实现jquery)
1.javascript中以函数来表示类: 一般函数是小写开头:function foo() 类开头是大写:function Foo() 实例化类: obj = new Foo() 其他属性就同类是一 ...
- Web前端开发工程师课程大纲
PHP程序员雷雪松整理出来的一套独一无二的Web前端开发课程.本套Web前端开发课程专门为想励志成为优秀web前端工程师的学习者而总结归纳的,本套Web前端课程舍弃了一些不常用的即将废弃的HTML标签 ...
- 使用Jquery+EasyUI 进行框架项目开发案例讲解之五 模块（菜单）管理源码分享
http://www.cnblogs.com/huyong/p/3454012.html 使用Jquery+EasyUI 进行框架项目开发案例讲解之五 模块(菜单)管理源码分享 在上四篇文章 ...
- 使用Jquery+EasyUI 进行框架项目开发案例讲解之四 组织机构管理源码分享
http://www.cnblogs.com/huyong/p/3404647.html 在上三篇文章 <使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享> ...
- 使用Jquery+EasyUI 进行框架项目开发案例讲解之三---角色管理源码分享
使用Jquery+EasyUI 进行框架项目开发案例讲解之三 角色管理源码分享 在上两篇文章 <使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享> ...
- 使用Jquery+EasyUI 进行框架项目开发案例讲解之二---用户管理源码分享
使用Jquery+EasyUI 进行框架项目开发案例讲解之二 用户管理源码分享 在上一篇文章<使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享>我们分享 ...
- 【推荐】使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享
使用Jquery+EasyUI 进行框架项目开发案例讲解之一 员工管理源码分享 在开始讲解之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于jQuery的U ...
- 【jquery】 API讲解 内部培训资料
资料在百度云盘 一.jquery API讲解 1.jquery api如何使用 jquery api http://www.hemin.cn/jq/ 2.常用api讲解 选择器: 通过$()获取 ...
- jQuery&HTML&CSS3实现垂直手风琴折叠菜单方法讲解
在网页制作中我们常常需要折叠式的菜单,在折叠菜单中,手风琴特效的菜单是非常受欢迎,下面就讲解使用jQuery+HTML+CSS3实现垂直手风琴折叠菜单的方法. jQuery实现垂直手风琴折叠菜单示例代 ...
随机推荐
- 在sublime中使用less
高亮显示: 可以在Less文件中显示语法高亮,这样看起来会更舒服一些. 按下Ctrl+Shift+P调出命令面板:输入install调出Install Package选项并回车:输入less,选中并安 ...
- 采用asyncore进行实时同步
最近在维护项目的时候,发现某个实时数据同步功能非常容易失败,故静下心来彻底弄清楚该设计的实现原理,以及其中用到的python异步sockethandler : asyncore. 实时数据同步功能的设 ...
- AGS API for JavaScript 图表上地图
原文:AGS API for JavaScript 图表上地图 图1 图2 图3 -------------------------------------华丽丽的分割线--------------- ...
- Magento打印(配送单、退款单、发票)时PDF中的乱码问题
我使用Magento1.4.2,在其自带的TTF文件不能很好地解析中文字符,TTF文件的位置在网站根目录下的/lib/LinLibertineFont/中.打印的中文字符都是这样的 解决方法: 1.在 ...
- 我的第一个WCF程序，很简单适合我等菜鸟
1.首先我罗列一下网站搜索并经过自己理解的WCF的含义: 1)WCF:(WIndows Communication Foundation)是由微软是由微软发展的一组数据通信的应用开发接口,可以翻译为W ...
- C++经典编程题＃2：大象喝水
总时间限制: 1000ms 内存限制: 65536kB 描述 一只大象口渴了,要喝20升水才能解渴,但现在只有一个深h厘米,底面半径为r厘米的小圆桶(h和r都是整数).问大象至少要喝多少桶水才会解 ...
- 如何查看Servlet、JSP的版本（Tomcat V7.0.70）
1. 简要说明:Tomcat6.0 所支持的是Servlet2.5,Tomcat 7.0 所支持的Servlet3.0,Servlet2.5 和Servlet3.0的差异较大,对于Servlet3.0 ...
- iOS基础
1.属性readwrite,readonly,assign,retain,copy,nonatomic 各是什么作用,在那种情况下用? readwrite 是可读可写特性:需要生成getter方法和s ...
- MVC 读书笔记
一.路由 1.HttpApplication中的ASP.NET MVC .Net 3.5 引入了System.Web.Routing程序集,通过Url Routing的机制,可以实现将一个虚拟路径的请 ...
- Android --设置Toast消失时间
参考博客:Android开发,Toast重复显示(显示时间过长)解决方法 package com.dr.app.drseamoniter.toast; import android.content.C ...