javascript与jQuery对照学习总结(一)(一些常规操作)

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>javascript与jQuery对比学习</title>
    <script type="text/javascript" src="style/jquery.min.js"></script>
    <script type="text/javascript">
        function jQueryVsJs(){
        //取得子级元素的不同
            //javascript的方法
            var nodes = document.getElementById("div1").childNodes;//取得子级数组
            for(var i=0;i<nodes.length;i++){
                //alert(nodes.length);//注意这里取得了四个元素，不是三个,文字：click属于一个
                alert(nodes[i].innerHTML);
            }
            //jQuery的方法
            //返回一个jQuery对象,这里取得的元素个数是三个，文字：click不属于数组
            var nodes1 = $("#div1").children();
            for(var i=0;i<nodes1.length;i++){
                //alert(nodes1[i].html());//此法不可行，nodes[i]不是jQuery对象
                alert($(nodes1[i]).html());//通过$()将dom对象转化为jQuery对象
            }
        //取得父级元素,下一个元素，上一个元素
            //javascript的方法
            alert(document.getElementById("div1").parentNode.innerHTML);//父级
            alert(document.getElementById("div1").nextSibling.innerHTML);//下一个
            alert(document.getElementById("div1").previousSibling.innerHTML);//上一个
            //jQuery的方法
            alert($("#div1").parent().html());//父级
            alert($("#div1").next().html());//下一个
            alert($("#div1").prev().html());//上一个
        //根据类名取得元素,javacript不知道怎么实现
            alert($(".class1").get(0).innerHTML);//可以通过get(index)取得数组下标对象
            alert($(".class1")[0].innerHTML);//也可以直接用[下标]实现
            alert($($(".class1")[0]).html());//转化为jQuery对象
        //改变元素样式
            //javascript的方法
            document.getElementById("div1").style.color="red";
            document.getElementById("div1").style.backgroundColor="green";
            //jQuery的方法
            $("#div1").css({"color":"green","background-color":"red"});
        }
    </script>
</head>
<body>
<div>
    dom对象的基本操作<br />
    1.取元素，取子级，取父级，上一个，下一个。<br />
    2.根据id取，根据class取<br />
    3.改变元素样式，子元素内容
</div>

<div>前一个</div>
<div id="div1" onclick="jQueryVsJs();">click
    <div class="class1">1</div>
    <div class="class1">2</div>
    <div class="class1">3</div>
</div>
<div>后一个</div>
</body>
</html>

javascript与jQuery对照学习总结(一)(一些常规操作)相关推荐

【STM32】标准库与HAL库对照学习教程六--位带操作
[STM32]标准库与HAL库对照学习教程六--位带操作一.前言二.准备工作三.位带介绍 1.位带操作 2.STM32位带及位带别名区域四.位带区与位带别名区地址转换五.GPIO的位带操作 ...
JavaScript和jQuery的学习
还有12天就要回学校了,我的假期计划还能实现吗?在这12天里,需要把JavaScript和jQuery学完.我知道这两个技术对于前端网页开发非常重要.前期把HTML和CSS学完了,学的不是特别深,只是 ...
MVCWebForm对照学习：文件上传(以图片为例)
MVC&WebForm对照学习:文件上传(以图片为例) 在web应用中,文件上传是个很普遍的功能,那么今天就来小结一下asp.net中文件上传的方式.首先我们快速来回忆一下WebForm中的文 ...
jQuery框架学习第二天：jQuery中万能的选择器
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
jQuery框架学习第一天：开始认识jQuery
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
jQuery调试学习总结
如何对jQuery代码进行简单的调试在html开发中,jQuery可以说得上是神器了,几乎没有WEB开发者没有听过jQuery,它的强大无需多言!用发它,可以帮我们大大加快开发速度. 那么,对于初学 ...
jQuery快速学习
jQuery快速学习 1.$(document).ready 的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码,因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们 ...
JQuery进阶学习
JQuery进阶学习的内容 1. 动画 2. 遍历 3. 事件绑定 4. 案例 5. 插一. 动画三种方式显示和隐 ...
JavaScript那些事儿（1）：对比JavaScript和jQuery的Dom操作
正在着手看<javascript权威指南>,整理点儿笔记,也算是督促自己学习,每天看一点,特立此贴,希望自己能坚持下去. 对比:用javascript和jQuery分别判断某元素是否存在, ...

javascript与jQuery对照学习总结(一)(一些常规操作)

javascript与jQuery对照学习总结(一)(一些常规操作)相关推荐

最新文章

热门文章