Jquery 复习练习(02)Javascript 与jquery 互转 onclick 与click区别

时间:2021-02-16 20:51:42

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>