js与jquery的用法
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />后面加上
<script src="jquery-1.11.2.min.js"></script> <body>
<div id="a1" style="width:100px; height:200px;">11</div> <div class="aa" bs="1">aaaa</div>
<div class="aa" bs="2">bbbbb</div>
<div class="aa" bs="3">ccccc</div> <div name="cc"></div>
<div bs="1"></div>
<input type="text" id="p1" />
<input type="button" id="b1" value="挂事件" />
<input type="button" id="b2" value="移除事件" />
<script type="text/javascript"> //JS
//根据ID取元素,取到的是具体的元素
var a = document.getElementById("p1");
根据CLASS取
var a = document.getElementsByClassName("aa");
//根据标签名取
var a = document.getElementsByTagName("div");
//根据name取
var a = document.getElementsByName("cc");
alert(a); //操作元素
//操作内容
//非表单元素
a.innerText = "hello";
a.innerHTML = "<span style='color:red'>world</span>";
//表单元素
a.value = "hello";
//操作属性
a.setAttribute("bs","1");
a.getAttribute("bs");
a.removeAttribute("bs");
//操作样式
a.style.color = red; //三个DIV隐藏
var a = document.getElementsByClassName("aa"); for(var i=0;i<a.length;i++)
{
a[i].style.display = "none";
} //事件 //Jquery
//根据ID找元素,取到的是JQUERY对象
var b = $("#a1"); //根据CLASS取
var b = $(".aa"); //根据标签名取
var b = $("div"); //根据属性筛选
var b = $("[name=aa]"); //操作元素
//操作内容
//非表单元素
b.text();
b.html();
//表单元素
b.val();
//操作属性
b.attr("bs","1");
b.attr("bs");
b.removeAttr("bs");
//操作样式
alert(b.css("color"));
b.css("font-size","50px"); alert(b[0]); //取jquery对象用eq()取元素本身用[] //隐藏三个元素
$(".aa").css("display","none"); //Jquery【加】事件
//页面加载完成
$(document).ready(function(e) { /*//给a1加点击
$("#a1").click(function(){
alert('aa');
})
//给class为aa的所有元素加事件
$(".aa").click(function(){
//alert($(this).attr("bs"));
$(".aa").css("background-color","#39F");
$(this).css("background-color","red");
})*/ //第二种方式【挂】事件
$("#b1").click(function(){ $("#a1").bind("click",function(){ alert("我是挂上的事件"); }); })
$("#b2").click(function(){ $("#a1").unbind("click");
}) }); </script> </body>
js与jquery的用法的更多相关文章
- JQuery之append和appendTo的区别,还有js中的appendChild用法
JQuery之append和appendTo的区别 append()前面是要选择的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容且为Jquery对象,而后面是要选择的 ...
- JS和jQuery用法区别
目录 JS和jQuery用法区别 外观区别 查找元素 操作标签 操作内容 操作属性 操作位置 操作样式 事件 JS和jQuery用法区别 外观区别 jQuery与JS最直观的区别就是外观上jQuery ...
- jquery.cookie用法详细解析,封装的操作cookie的库有jquery.cookie.js
jquery.cookie用法详细解析 需要注意存入cookie前,对数据进行序列化, 得到后在反序列化: 熟练运用:JSON.stringify();和JSON.parse(): 通常分为如下几个步 ...
- 移动端用js与jquery实时监听输入框值的改动
背景: 在一次移动端H5开发中,需要监听输入框值的实时变动. onchange事件肯定抛弃,因为只能失去焦点才触发. 而keyPress在Android可以触发,iOS不可以. 又不想用Android ...
- JS和JQuery的总结
JS部分 一, 词法结构 区分大小 注意://单行 /*多行注释*/ 字面量(直接量literal) 12 // 数字 5.8//小数 "hello" 'hello' true ...
- jQuery $.each用法[转]
jQuery $.each用法 以下内容非原创,来自百度文库http://wenku.baidu.com/view/4796b6145f0e7cd18425368e.html 通过它,你可以遍历对象. ...
- JS和JQuery总结
目录目录 2js部分一.词法结构 1.区分大小写 2.注意 // 单行 /* 多行注释 */ 3.字面量(直接量 literal) 12 / ...
- [转]Jquery Ajax用法
原文地址:http://www.php100.com/html/program/jquery/2013/0905/6004.html jQuery学习之jQuery Ajax用法详解 来源: 时间 ...
- JQuery datepicker 用法
JQuery datepicker 用法 jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加 ...
随机推荐
- 2016HUAS暑假集训训练2 F - A Simple Problem with Integers
Description 给出了一个序列,你需要处理如下两种询问. "C a b c"表示给[a, b]区间中的值全部增加c (-10000 ≤ c ≤ 10000). " ...
- SQL Server 存储过程(转)
Transact-SQL中的存储过程,非常类似于Java语言中的方法,它可以重复调用.当存储过程执行一次后,可以将语句缓存中,这样下次执行的时候直接使用缓存中的语句.这样就可以提高存储过程的性能. Ø ...
- Windows内核 基本数据结构
驱动对象: 每个驱动程序都会有唯一的驱动对象与之对应,并且这个驱动对象是在驱动加载时被内核中的对象管理程序所创建的.驱动对象用DRIVER_OBJECT数据结构表示,它作为驱动的一个实例被内核加载,并 ...
- dom4j解析xml文档&保存数据的乱码问题
package itcast.dom4j; import java.io.File; import java.io.FileOutputStream; import java.io.FileWrite ...
- mongod 命令执行发现已经有进程在运行mongod数据库--errno:48 Address already in use for socket: 0.0.0.0:27017
错误信息: listen(): bind() failed errno:48 Address already in use for socket: 0.0.0.0:27017 27017端口已经被占用 ...
- How to generate ssh key only for github and not conflict with original key
3 生成SSH公钥 $ ssh-keygen -t rsa -C "your_email@youremail.com" #ssh-keygen -t dsa -C "y ...
- ruby 分析日志,提取特定记录
读取日志中的每一行,分析后存入hash,然后做累加 adx_openx=Hash.new(0) File.open('watch.log.2016-08-24-21').each do |line| ...
- JMeter学习-018-JMeter 配置元件之-HTTP信息头管理器-实现 Cookie 登录
之前写过一篇通过[HTTP Cookie管理器]实现登录态操作的文章,使用时需要配置每个键值对(如下图所示),相对来讲配置比较繁琐.其实,我们也可通过在[HTTP信息头管理器]添加 Cookie 信息 ...
- Python开发程序:FTP程序
作业:开发一个支持多用户在线的FTP程序 要求: 用户加密认证 允许同时多用户登录 每个用户有自己的家目录 ,且只能访问自己的家目录 对用户进行磁盘配额,每个用户的可用空间不同 允许用户在ftp se ...
- Coding过程中遇到的一些bug
1. 在使用layoutSubviews方法调整自定义view内部的子控件坐标时,最好不要使用子控件的centerX,centerY属性,否则会出现奇怪的bug. 如果一定要用,务必仔细检查,该子控件 ...