jQuery DOM操作实例


Posted in Javascript onMarch 05, 2014

都来加深印象吧,大家都知道jQuery很好使用,因为它简化了javascript代码,更重要的是它还兼容基本上所有的浏览器,网页开发最头疼的就是这个了,所以jQuery也因此深受码农的喜爱,不过首先你得要记住它才能更好的使用它不是吗,过久了没用的属性方法也会淡忘的,下面是jQuery的DOM操作方法属性的详解,看看加深下印象。

例子虽丑功能还俱全呢!

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        body {
            /*color: purple;*/
        }
        .a{
            color:red;
        }
        .b {
            color:purple;
        }
    </style>
    <script src="script/jquery-1.4.1.js"></script>
</head>
<body>
    <p id="div">class</p>
    <div id="all" class="a" >all
    <input type="text" value="text" name="text" id="text"/>
        <p id="p">p</p>
        <ul id="ul">
            <li id="a">苹果</li>
            <li id="b">脐橙</li>
            <li id="c">柚子</li>
        </ul>
        <div id="d">
            <p>内容</p>
        </div>
        <input type="button" value="鼠标悬浮效果" id="over" />
    </div>
    <script type="text/javascript">
        $().ready(function () {
            var p = $("#p");
            //alert(p.attr("id"));//attr("属性名")获取属性,attr("属性名","属性值")设置属性
            //p.attr("title","title");//设置属性
            //p.removeAttr("id");//删除指定元素属性名的元素属性
            //$("#all").attr("class", "class");//设置class属性,如此设置属性会替换前面的class属性(class='class')
            //$("#all").addClass("class");//设置class属性,在原来的class属性里面追加一个class(class='all class')如果一个class里面有相同的属性(比如color),那么后者会覆盖前者
            //$("#all").removeClass("all");//删除指定的class属性
            //$("#all").removeClass();//移除class里面所有的class属性
            //$("#all").toggle(//交替方法
            //    function () {
            //        $(this).css("color","red");
            //},  function () {
            //    $(this).css("color","purple");
            //});
            //$("#div").click(function () { $("#all").toggle();});//用于显示隐藏交替指定的元素
            //$("#all").click(function () { $("#div").text("class属性为:"+$("#all").attr("class"));});
            //$("#all").click(function () {
            //    $("#all").toggleClass("b")
            //});
            //alert($("#all").hasClass("all"));//判断是否有此class属性
            //alert($("#all").is(".all"));//效果同上
            //alert($("#all").html());//同等于InnerHTML效果
            //$("#all").html("设置成功");
            //alert($("#all").text());//获取所有的文本内容
            //$("#all").text("设置成功");
            //alert($("[name='text']:eq(0)").val());//同等于value属性(val("设置属性值"))
            var newP = $("<p id='newP'>newP</p>");//创建元素,创建单个元素时因(<p/>)加上/
            //p.append(newP);//追加元素到p内部后面(<p id='p'>p<p id='newP'>newP</p></p>)
            //newP.appendTo(p);//将newP追加到p内部后面
            //p.prepend(newP);//追加元素到p内部前面(<p id='p'><p id='newP'>newP</p>p</p>)
            //newP.prependTo(p);//将newp追加到p内部前面
            //p.after(newP);//追加元素到p元素的后面(<p id='p'>p</p><p id='newP'>newP</p>)
            //newP.insertAfter(p);//将newP追加到p元素的后面
            //p.before(newP);//追加到p元素的前面
            //newP.insertBefore(p);//将newP追加到p元素前面
            //苹果  脐橙  柚子 移动属性节点
            var a = $("#a");
            var c = $("#c");
            //c.insertBefore(a);//把c(柚子)元素移动到a(苹果)元素的前面
            //a.remove();//删除节点(所有的后代节点也将被删除)
            //a.remove();
            //c.after(a);//删除元素在添加回去
            //$("ul>li").remove("li[id='a']");//根据条件删除指定元素
            //a.empty();//清空元素里面的所有
            //a.clone().insertAfter(c);//把复制的节点a(苹果)添加到c(柚子)的后面
            //$("#d").replaceWith("<span>span</span>");//把id为#d元素里面的所有文本元素替换成指定的内容文本
            //$("<span>span</span>").replaceAll("#d");//同上,只是顺序反了
            //$("#ul").wrap("<b></b>");//把id为#ul的元素用<b>标签包裹起来(如果假设有多个ul元素的话此方法会将每个ul都用一个<b>包裹起来)
            //$("#ul").wrapAll("<b></b>");//把id为#ul的元素用<b>标签包裹起来(如果假设有多个ul元素的话此方法会将所有的ul用一个<b>包裹起来)
            //$("#ul").wrapInner("<b></b>")//将指定元素里面的内容用一个<b>标签包裹起来
            //alert($("#ul").children().length);//获取所有的子元素(next()是获取下一个同辈节点,prev()获取上一个同辈节点,siblings()获取所有的同辈节点)
            //$("#ul").closest("ul").css("color","red");//检索是否与当前元素匹配,如果部匹配则返回到父元素检索,否则返回空
            //alert($("#ul").css("height"));//css方法获取的高度可能有auto,且带有px,与css设置相关联,而用height()获取的高度是元素在页面上的实际高度,且不带px,width也是一样
            //offset()方法
            var ul = $("#ul").offset();
            //alert(ul.left);//获取元素离视窗的偏移值(top)
            //position()方法
            var ul = $("#ul").position();
            //alert(ul.left);//获取绝对定位的偏移值
            //$("#ul").scrollTop()  $("#ul").scrollLeft()获取滚动条距离顶端和左侧的位置距离
            //$("#ul").scrollTop(300)  $("#ul").scrollLeft(300)设置滚动条距离顶端和左侧的位置距离
            //alert(("aabaa").slice(-2));//slice()返回前两个字符串,2为返回索引开始后面的字符串
            $("#over").mouseover(function (e) {
                var tool = $("<div id='tool'>悬浮的内容</div>");
                $("body").append(tool);
                tool.css("position", "absolute").css("top", e.pageY+"px").css("left", e.pageX + "px");
                //tool.css({ "top": e.pageY + "px", "left": e.pageX + "px" }).show();
                //alert(e.pageX+" "+e.pageY);
            }).mouseout(function () {
                $("#tool").remove();
            });
        });
    </script>
</body>
</html>
Javascript 相关文章推荐
JavaScript prototype属性使用说明
May 13 Javascript
jquerymobile局部渲染的各种刷新方法小结
Mar 05 Javascript
Javascript学习笔记之数组的遍历和 length 属性
Nov 23 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
Jul 01 Javascript
理解AngularJs指令
Dec 10 Javascript
BootstrapValidator不触发校验的实现代码
Sep 28 Javascript
基于jQuery实现左侧菜单栏可折叠功能
Dec 27 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
May 18 Javascript
vue 子组件向父组件传值方法
Feb 26 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
Jan 17 Javascript
JS中的防抖与节流及作用详解
Apr 01 Javascript
openlayers 3实现车辆轨迹回放
Sep 24 Javascript
JS父页面与子页面相互传值方法
Mar 05 #Javascript
JS和函数式语言的三特性
Mar 05 #Javascript
jquery 使用简明教程
Mar 05 #Javascript
jquery form表单序列化为对象的示例代码
Mar 05 #Javascript
js对文章内容进行分页示例代码
Mar 05 #Javascript
JavaScript获取XML数据附示例截图
Mar 05 #Javascript
js通过八个点 拖动改变div大小的实现方法
Mar 05 #Javascript
You might like
php中数字、字符与对象判断函数用法实例
2014/11/26 PHP
PHP基于新浪IP库获取IP详细地址的方法
2017/05/04 PHP
使用php自动备份数据库表的实现方法
2017/07/28 PHP
如何用javascript判断录入的日期是否合法
2007/01/08 Javascript
JavaScript 格式字符串的应用
2010/03/29 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
jquery $.each() 使用小探
2013/08/23 Javascript
JavaScript设计模式之装饰者模式介绍
2014/12/28 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
2014/12/31 Javascript
基于jQuery Tipso插件实现消息提示框特效
2016/03/16 Javascript
微信小程序 Button 组件详解及简单实例
2017/01/10 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
2019/02/19 Javascript
vue-cli3添加模式配置多环境变量的方法
2019/06/05 Javascript
微信小程序获取用户绑定手机号方法示例
2019/07/21 Javascript
pygame 精灵的行走及二段跳的实现方法(必看篇)
2017/07/10 Python
简单实现python数独游戏
2018/03/30 Python
Python实现正弦信号的时域波形和频谱图示例【基于matplotlib】
2018/05/04 Python
Python反射和内置方法重写操作详解
2018/08/27 Python
对Python 窗体(tkinter)树状数据(Treeview)详解
2018/10/11 Python
NumPy 基本切片和索引的具体使用方法
2019/04/24 Python
Python Web框架之Django框架Model基础详解
2019/08/16 Python
python numpy中cumsum的用法详解
2019/10/17 Python
python内置模块collections知识点总结
2019/12/19 Python
python异常处理和日志处理方式
2019/12/24 Python
Python 模拟生成动态产生验证码图片的方法
2020/02/01 Python
Django Channel实时推送与聊天的示例代码
2020/04/30 Python
python利用线程实现多任务
2020/09/18 Python
孕妇内衣和胸罩:Cake Maternity
2018/07/16 全球购物
毕业自我鉴定
2013/11/05 职场文书
外贸业务员工作职责
2014/01/06 职场文书
森马旗舰店双十一营销方案
2014/09/29 职场文书
思想政治表现评语
2015/01/04 职场文书
2015年党员创先争优承诺书
2015/01/22 职场文书
2015年政教主任工作总结
2015/07/23 职场文书
JavaScript实现简单图片切换
2021/04/29 Javascript