Jquery方法的应用
<body>
<div id="one"><span>one</span></div>
<div class="test" bs="aa">two</div>
<div class="test">three</div>
<div class="test">four</div>
<input type="text" name="uid" bs="aa" id="uid" />
<input type="button" id="btn" value="取消绑定" />
<input type="button" id="add" value="绑定事件" />
</body>
书写位置在JS代码中
<script type="text/javascript">
书写格式:
$(document).ready(function(e) {
//JS方式
//1.根据ID取元素,DOM对象
//var div = document.getElementById("one");
//2.根据class取元素
//var div = document.getElementsByClassName("test");
//3.根据name取
//var bd = document.getElementsByName("uid");
//4.根据标签名取
//var div = document.getElementsByTagName("div");
//操作内容
//1.非表单元素
//alert(div.innerText);
//div.innerText = "aaaa";
//div.innerHTML;
//2.表单元素
//div.value
//操作属性
//div.setAttribute("","");
//div.removeAttribute("");
//div.getAttribute("");
//操作样式
//div.style.backgroundColor = "red";
//alert(div.style.color);只能获取内联样式
//在数组里面如果要取DOM对象使用索引的方式,如果要取Jquery对象使用eq()
//JQUERY方式
//1.根据ID取元素,Jquery对象
var div = $("#one");
//2.根据class取
//var div = $(".test");
//3.根据属性取
//var bd = $("[bs='aa']");
//4.根据标签名取
//var div = $("div");
//5.组合选取
//var div = $("div span");
//操作内容
//1.非表单元素
//alert(div.text());
//div.text("aaaa"); ——文本
//div.html(); —— html代码
//2.表单元素
//div.val("aaa");
//操作属性
//div.attr("属性名","属性值"); ——添加、设置属性
//div.removeAttr("属性名"); ——移除属性
//div.attr("属性名"); ——获取属性
//操作样式
//div.css("样式名","样式值"); ——添加样式
//div.css("样式名"); ——获取样式
//操作元素
//var str = "<div id='a' style='width:100px; height:100px; background-color:red'></div>";
//div.append(str); //追加元素
//$("#a").remove(); //移除某个元素
$(".test").click(function(){
$(this).text();
})
绑定事件:
$(".test").bind("click",function(){
$(this).text();
});
取消绑定:
$("#btn").click(function(){
$(".test").unbind("click");
});
绑定事件:
$("#add").click(function(){
$(".test").bind("click",function(){
$(this).text();
});
});
});
</script>
Jquery方法的应用的更多相关文章
- 1.4 jQuery方法,JSON介绍
jQuery方法: jQuery添加元素: append()方法: $("元素").append("追加内容"); prepend()方法: $("元 ...
- SpringMVC框架下实现JSON(类方法中回传数据到jsp页面,使用jQuery方法回传)
JSON的实现,即将需要的数据回传到jsp页面: 1>.加入实现Json的三个架包到lib中:2>.目标方法上边加入注解,需要返回的值3>.在jsp页面中书写jQuery方法: ec ...
- 形行色色的下拉菜单(HTML/CSS JS方法 jQuery方法实现)
HTML/CSS方法实现下拉菜单来源:慕课网<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
- JQuery 方法简写
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- Jquery方法load之后导致js失效解决方法
Jquery方法load之后导致js失效解决方法 >>>>>>>>>>>>>>>>>>> ...
- Javascript或jQuery方法产生任意随机整数
方法1:javascritp方法 1 2 3 4 5 6 //随机数 function diu_Randomize(b,e){ if(!b && b!=0 || ! ...
- jquery方法详解
jquery方法详解 http://www.365mini.com/doc
- jQuery方法区别:click() bind() live() delegate()区别
今天看到一篇jquery 事件的文章,自己写了个小例子,虽然2种方式都可以实现,但是不太明白,找了点资料 $("#box1").delegate("p",&qu ...
- jQuery()方法的第二个参数
关于jQuery()方法的第二个参数,有下面这几种用法: 1.jQuery(selector, [context]) 这种用法,相当于 $(context).find(selector) 或者 con ...
- 原生JS取代一些JQuery方法的简单实现
原生JS取代一些JQuery方法的简单实现 下面小编就为大家带来一篇原生JS取代一些JQuery方法的简单实现.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 1.选 ...
随机推荐
- 【转】Linux Writeback机制分析
1. bdi是什么? bdi,即是backing device info的缩写,顾名思义它描述备用存储设备相关描述信息,这在内核代码里用一个结构体backing_dev_info来表示. bdi,备用 ...
- 一个伪ajax图片上传代码的例子
一个伪ajax图片上传实现代码. 复制代码代码如下: <?php if($_FILES){ ?> <script> window.parent.ajaxUploadPi ...
- js对象与this指向
创建对象的方法 1.对象字面量法 var obj={} var obj={ 'first-name':'Tom', 'last-name':'bush', age:24, Family:{ Broth ...
- 取消界面的title
在setContentView(R.layout.activity_main)方法上面添加代码(继承Activity的写法): requestWindowFeature(Window.FEATURE_ ...
- ASP.NET MVC4学习笔记路由系统实现
一.路由实现 路由系统实际是一个实现了ASP.NET IHttpModule接口的模块,通过注册HttpApplication的PostResolveRequestCache 事件对Url路由处理.总 ...
- R语言中判断是否是整数。以及读写excel
今天接手一个重复性工作, 需要手工把产品运营们在excel里写的活动规则, 插入数据库表中.为了减少出错, 提高效率. 再加上最近刚刚学R语言, 就用R练练手, 自动生成mysql的sql语句. 一次 ...
- 19.python的编码问题
在正式说明之前,先给大家一个参考资料:戳这里 文章的内容参考了这篇资料,并加以总结,为了避免我总结的不够完善,或者说出现什么错误的地方,有疑问的地方大家可以看看上面那篇文章. 以下说明是针对于pyth ...
- SQL Server 一些关键字详解(一)
1.CROSS APPLY 和OUTER APPLY MSDN解释如下(个人理解不是很清晰): 使用 APPLY 运算符可以为实现查询操作的外部表表达式返回的每个行调用表值函数.表值函数作为右输入,外 ...
- [原创]Postgres-XC集群笔记-概念与环境搭建
文所描述的Postgres-XC版本:v1.2.1项目主页地址:http://sourceforge.net/projects/postgres-xc/ pdf文件下载: Postgres-XC集群搭 ...
- css权重及优先级问题
css权重及优先级问题 几个值的对比 初始值 指定值 计算值 应用值 CSS属性的 指定值 (specified value)会通过下面3种途径取得: 在当前文档的样式表中给这个属性赋的值,会被优先使 ...