Javascript 与jquery 互转

jquery 为<script src="jquery-1.8.3.js"></script>

以checkbox为例:

示例:<input type="checkbox" onClick="checkName()" name="ckGroup" id="ckGroup" checked="checked" />

需求:触发checkbox的onClick事件,在JS中分别调用 onclick() 和 click()方法

onclick :checkName()方法执行完毕以后设置checkbox.checked 为 true 或false

click :checkName()方法执行之前设置checkbox.checked 为 true 或false

在JQuery中,click()方法等同与调用onclick()方法,当你需要获取checked的属性值时需要注意他们之间的区别。

同时,

$("#ID input").each(

  function(){

    $(this)[0].click();

  }

);

与

$("#ID").each(

  function(){

    $(this).children(":checkbox")[0].click();

  }

);

之间,前者的click()方法类似于调用DOM对象的onclick()方法,后者的click()方法类似于调用DOM对象的click()方法
  <script type="text/javascript">
$(function () {
$("input").click(function () {
var a= $("#shang ul li span");
var b = a.get(0); //jq 对象转 js 对象
b.innerHTML = "张三"; var c = $(b); //js 对象转 jq对象
c.css("background-color", "green");
});
}); </script>
</head>
<body>
<input type="button" value="dianji"/>
<div id="shang">dddds
<ul>
<li>fasl</li>
<li> sssss<span> span hong</span></li>
</ul>
</div>
</body>

Jquery 复习练习(02)Javascript 与jquery 互转 onclick 与click区别的更多相关文章

  1. JavaScript和jQuery改变标签内容

    HTML: <div id="mazey">content</div> JavaScript: var mazey=document.getElementB ...

  2. jQuery基础之(一)jQuery概述

    1.jQuery的简介 就像上节所将到的Ajax框架一样,简单的说,jQuery是一个优秀的javascript框架,它能够让用户方便的处理html,events(冒泡)事件,动画效果,ajax交互等 ...

  3. Jquery 复习练习(01)

    Jquery 复习练习 window.onload = function() {} == $(function() {}); 千万注意:js对象和jq对象的区别,这也是常常犯的错误 js对象举例: w ...

  4. ②jquery复习

    # jQuery 复习--by 传智前端与移动开发学院 ## 1. jQuery是什么?(了解)+ www.github.com+ jQuery 其实就是一堆的js函数,是普通的js,只不过应用广泛, ...

  5. JavaScript和JQuery的区别

    一.本质上的区别 1.JavaScript 是通过<script></script>标签插入到HTML页面,可由所有的现代浏览器执行的一种轻量级的编程语言. 2.JQuery是 ...

  6. jQuery学习之路(7)- 用原生JavaScript实现jQuery的某些简单功能

    ▓▓▓▓▓▓ 大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写 ...

  7. 网页插件学javascript还是jquery好啊?

    文章的起因,也是在群内交流是回答一个小伙的问题,一扯就停不下来,但由于个人知识面覆盖有限,自身基础又不够扎实,仅供参考: 问这个问题之前,我个人建议先搞清什么是jquery,什么是js?     jq ...

  8. 流行的JavaScript库 ——jQuery

    1.为了简化 JavaScript 的开发, 一些 JavsScript 库诞生了. JavaScript 库封装了很多预定义的对象和实用函数.能帮助使用者建立有高难度交互的 Web2.0 特性的富客 ...

  9. jQuery $(document).ready()和JavaScript onload事件

    jQuery $(document).ready()和JavaScript onload事件 Why we need a right time? 对元素的操作和事件的绑定需要等待一个合适的时机,可以看 ...

随机推荐

  1. Mac 系统下cocos2dx 环境变量设置

    Mac 系统环境变量设置   vim ~/.bash_profile    export PATH=$PATH:/Users/wangchengcheng/Downloads/LearningSoft ...

  2. 如何在maven工程中加载oracle驱动

    maven中引入oracle驱动报错Missing artifact com.oracle:ojdbc14:jar:10.2.0.4.0 时间:2015年09月22日  浏览:9361次 在maven ...

  3. Python开发问题和解决方案汇集

    1.Sublime Text中用Tab批量替换空格Whitespace缩进:Ctrl+A全选代码,Ctrl+Shift+P打开下拉框,输入indent,找到Convert indentation to ...

  4. 数据库---MySQL练习题及答案

    一.            设有一数据库,包括四个表:学生表(Student).课程表(Course).成绩表(Score)以及教师信息表(Teacher).四个表的结构分别如表1-1的表(一)~表( ...

  5. IOS网络第二天 - 03-JSON显示数据,调用本地视频播放,数据转模型

    ********HMVideosViewController.m #import "HMVideosViewController.h" #import "MBProgre ...

  6. document获取节点byTagName

    /* *对于页面中的超链接,新闻链接通过新窗口打开 *当然是要获取其中被操作的超链接对象. *可是通过Document获取超链接,拿到的是页面中所有的超链接节点. *只想获取一部分如何办呢? *只要获 ...

  7. 【iCore3 双核心板_FPGA】例程八:触发器实验——触发器的使用

    实验指导书及代码包下载: http://pan.baidu.com/s/1bswW3c iCore3 购买链接: https://item.taobao.com/item.htm?id=5242294 ...

  8. Vim简要说明

    说明:在这篇文章里面,[C-X] 代表 Ctrl + X--就是按住 Ctrl 键然后再按 X.而且你可以在很多情况下使用 :help command 来获得大部分命令的帮助,这个是VIM的内部帮助文 ...

  9. Flex HTTPService json

    import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; import mx.rpc.http.HTTPService; i ...

  10. AngularJS 实现简单购物车

    使用AngularJS实现一个简单的购物车,主要感受强大的双向绑定和只关注对象不关注界面特性. 先看看界面: 点击+-操作和删除: 这些全部只需要操作数据源就行,不需要关注界面. 实现过程: 一.使用 ...