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实现垂直手风琴折叠菜单示例代 ...
随机推荐
- [LeetCode]题解（python）：092 Reverse Linked List II
题目来源 https://leetcode.com/problems/reverse-linked-list-ii/ Reverse a linked list from position m to ...
- Android笔记： Android版本号
由于有2套版本号 总是对应不准 记下来做过标记 Android 4.3 ----18 Android 4.2---17 Android 4.1---16 Android 4.0.3---15Andro ...
- 2014-4-25 运行号：837344 ASCII码排序
#include <iostream> #include <cstdio> #include <cstdlib> #include <string> # ...
- C语言：其他进制数转换为十进制（方法一）
#include<stdio.h> #include<math.h> #include<string.h> //其他任意进制转换为十进制 int main() { ...
- disable jboss JMXInvokerServlet .
jboss 默认有几个控制台,都是可能存在漏洞被黑客利用,除了web console .jmx console. 还有JMXInvokerServlet,访问路径是ip/invoker/JMXInvo ...
- Kafka使用入门教程 简单介绍
介绍 Kafka是一个分布式的.可分区的.可复制的消息系统.它提供了普通消息系统的功能,但具有自己独特的设计.这个独特的设计是什么样的呢? 首先让我们看几个基本的消息系统术语: Kafka将消息以 ...
- Java基础——数组应用之字符串String类
字符串String的使用 Java字符串就是Unicode字符序列,例如串“Java”就是4个Unicode字符J,a,v,a组成的. Java中没有内置的字符串类型,而是在标准Java类库中提供了一 ...
- 入手Intel 750
要装虚拟机,入了块intel750 测速: C盘闪迪至尊超级速ssd,保修10年 D盘 intel 750,保修5年 E盘 西数2T红盘 呵呵,还没有装intel驱动,就用的win10自带的nvme驱 ...
- PHP框架Yii2.0安装（基础版、高级版）
最近农成也是切入了yiiframework 2.0,就是安装yii2.0就花费了不少的时间,为此做了很多的弯路,特此写一篇博文来给后面学习的同学少走一点的弯路.写的不好的地方欢迎各位学习的同学们能够指 ...
- dojo使用笔记: 自定义ConfirmDialog
前言: dojo1.10已经有了原生的ConfirmDialog 做gui应用开发,肯定要用到"确认"对话框, 无论是winForm, swing,还是web,也不管理你用什么技术 ...