<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. 1.4 jQuery方法,JSON介绍

    jQuery方法: jQuery添加元素: append()方法: $("元素").append("追加内容"); prepend()方法: $("元 ...

  2. SpringMVC框架下实现JSON(类方法中回传数据到jsp页面,使用jQuery方法回传)

    JSON的实现,即将需要的数据回传到jsp页面: 1>.加入实现Json的三个架包到lib中:2>.目标方法上边加入注解,需要返回的值3>.在jsp页面中书写jQuery方法: ec ...

  3. 形行色色的下拉菜单(HTML/CSS JS方法 jQuery方法实现)

    HTML/CSS方法实现下拉菜单来源:慕课网<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  4. JQuery 方法简写

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  5. Jquery方法load之后导致js失效解决方法

    Jquery方法load之后导致js失效解决方法 >>>>>>>>>>>>>>>>>>> ...

  6. Javascript或jQuery方法产生任意随机整数

    方法1:javascritp方法 1 2 3 4 5 6 //随机数    function diu_Randomize(b,e){        if(!b && b!=0 || ! ...

  7. jquery方法详解

    jquery方法详解 http://www.365mini.com/doc

  8. jQuery方法区别:click() bind() live() delegate()区别

    今天看到一篇jquery 事件的文章,自己写了个小例子,虽然2种方式都可以实现,但是不太明白,找了点资料 $("#box1").delegate("p",&qu ...

  9. jQuery()方法的第二个参数

    关于jQuery()方法的第二个参数,有下面这几种用法: 1.jQuery(selector, [context]) 这种用法,相当于 $(context).find(selector) 或者 con ...

  10. 原生JS取代一些JQuery方法的简单实现

    原生JS取代一些JQuery方法的简单实现 下面小编就为大家带来一篇原生JS取代一些JQuery方法的简单实现.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧   1.选 ...

随机推荐

  1. RECT 数据结构

    数据结构RECT定义了一个矩形的左上角和右下角的坐标 ? 1 2 3 4 5 6 7 8 typedef struct _RECT{         LONG left;         LONG t ...

  2. shell下添加计划性任务

    */1 * * * * /bin/sh /tmp/hello.sh ###每1分钟执行以下/tmp下的hello.sh脚本 service crond restart   重启任务计划 * 12  * ...

  3. Dev的DocumentManager 相关问题

    1.改变DocumentManager包含的窗体的排列方式 if (this.documentManager1.View.Type != ViewType.NativeMdi) { this.docu ...

  4. [leetcode]_Path Sum I && II

    都是考查DFS.经典回溯算法,问题在于我对该类型的代码不熟悉,目前以参考别人的代码,然后加上自己的实现为主,通过类似的题目加强理解. 一.给定一棵二叉树,判断是否存在从root到leaf的路径和等于给 ...

  5. DevExpress BarManager 部分用法

    1.创建一个BarManager会默认产生三个菜单.BarManager右键ShowDesignTime enhancements会显示[add]按钮,可对菜单进行编辑. 2.其中比较有用的属性: 选 ...

  6. DevExpress LookUpEdit和ComboBoxEdit部分用法

    LookUpEdit 1.绑定列 (注意点:LookUpEdit1的FieldName要和绑定的列明一致) 方式一: LookUpEdit1.Properties.DisplayMember = &q ...

  7. jQuery学习笔记(2)

    val() 当鼠标放上去的时候,文本消失,鼠标拿开,文本恢复 效果图: code as below: <html xmlns="http://www.w3.org/1999/xhtml ...

  8. 信驰达携“Zigbee Light Link灯控方案”亮相第18届广州国际照明展

    2013年6月9日至12日,第18届广州国际照明展览会在琶洲中国进出口商品交易会展馆举行,作为全球照明及LED行业风向标和晴雨表,本次展会吸引了来自27个国际及地区,共2600多家企业参展.我公司受T ...

  9. psql: 致命错误: 用户 "postgres" Ident 认证失败

    RedHat: 问题: psql -U postgres 时出现:psql: 致命错误:  用户 "postgres" Ident 认证失败 解决: 修改 /var/lib/pgs ...

  10. JQuery ----文档处理

    1.append(content|fn) 概述 向每个匹配的元素内部追加内容. 这个操作与对指定的元素执行appendChild方法,将它们添加到文档中的情况类似. 2.appendTo(conten ...