JQUERY与JS的区别
2016-05-24 10:58
806 查看
JQUERY与JS的区别
例:
<style type="text/css">
#aa { width:200px; height:200px; } </style> <script src="jquery-1.11.2.min.js"></script> </head> <body> <div id="aa" style="">hello</div> <div class="bb">22</div> <div class="bb">33</div> <div class="bb">44</div> <input type="text" name="cc" bs="dd" /> </body> <script type="text/javascript"> JS: //根据ID找元素,找到具体的DOM对象 var d = document.getElementById("aa"); var c = document.getElementsByClassName("bb"); var div = document.getElementsByTagName("div"); var input = document.getElementsByName("cc"); //操作内容 //1.非表单元素 d.innerHTML; d.innerTEXT; //2.表单元素 d.value; //操作属性 d.setAttribute("bs","pp"); //添加属性 d.getAttribute("bs");//获取属性 d.removeAttribute("bs");//移除属性 //操作样式 //d.style.color = "red"; //d.style.backgroundColor = "yellow"; //alert(d.style.width); JQUERY: $(document).ready(function(e) { //根据ID找元素,找出的JQUERY对象,如果要取DOM对象,取索引0的元素 var jd = $("#aa"); //根据ID var jc = $(".bb"); //根据Class var di = $("div"); //根据标签名 var ip = $("input[bs=dd]");//根据属性筛选 for(var i=0;i<jc.length;i++) { jc.eq(i); //取数组里面的第几个JQUERY对象 } //操作内容 //1.非表单元素 jd.text(); jd.text("aa"); jd.html(); jd.html("vv"); //2.表单元素 jd.val(); //属性操作 jd.attr("bs","aa");//设置属性 jd.attr("bs"); //获取属性 jd.removeAttr("bs");//移除属性 //操作样式 jd.css("background-color","green"); //alert(jd.css("width")); //给一个元素加事件 /*$("#aa").click(function(){ alert("aa"); })*/ //给多个元素加事件 /*$(".bb").click(function(){ alert($(this).text()); })*/ //给多个元素设置相同样式(属性) //$(".bb").css("color","pink"); }); </script>
例:
<body> <input type="checkbox" id="all" /> 全选<br /> <input class="t" type="checkbox" value="aa" /> aa <input class="t" type="checkbox" value="bb" /> bb <input class="t" type="checkbox" value="cc" /> cc <input class="t" type="checkbox" value="dd" /> dd <input class="t" type="checkbox" value="ee" /> ee <input type="button" value="测试" id="btn" /> <input type="text" id="txt" /> <input type="button" value="设置选中" id="sel" /> </body>
<script src="jquery-1.11.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(e) { //全选 $("#all").click(function(){ var ck = $(".t"); var xz = $(this)[0].checked; ck.prop("checked",xz); }) //取选中项的值 $("#btn").click(function(){ var ck = $(".t"); for(var i=0; i<ck.length;i++) { if(ck.eq(i).prop("checked"))//ck.eq(i)[0].checked { alert(ck.eq(i).val()); } } }) //设置某项选中 $("#sel").click(function(){ var v = $("#txt").val(); var ck = $(".t"); ck.prop("checked",false); for(var i=0;i<ck.length;i++) { if(ck.eq(i).val()==v) { ck.eq(i).prop("checked",true); } } }) }); </script>
相关文章推荐
- Uploadify插件批量上传图片使用方法分析
- jQuery操作鼠标事件大全
- input-color与input-checkbox元素通过jquery获取值以及设定值(input属性的取值与设定)
- Jquery元素追加和删除的实现方法
- jquery中attr和prop的区别
- jquery html动态添加的元素绑定事件详解
- 浅析jquery unbind()方法移除元素绑定的事件
- jquery validator addMethod 方法的使用
- jQuery unbind 删除绑定事件详解
- 深入理解jQuery之防止冒泡事件
- jQuery中事件与动画的总结
- 深入理解jQuery中的事件冒泡
- jquery防止退回键返回
- Jquery小技巧
- Jquery选择器完全总结
- web前端35个jQuery小技巧!
- jquery ajax超时设置
- jquery mobile页面跳转缓存问题解决
- jQuery .attr() .prop() .data()区别及全选等问题
- jQuery 弹出层插件(推荐)