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 原型模式实现OOP的再研究
Apr 09 Javascript
浅谈Javascript面向对象编程
Nov 15 Javascript
Js操作Select大全(取值、设置选中等等)
Oct 29 Javascript
删除节点的jquery代码
Jan 13 Javascript
jQuery中事件与动画的总结分享
May 24 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
Nov 23 Javascript
vue修改vue项目运行端口号的方法
Aug 04 Javascript
bootstrap时间插件daterangepicker使用详解
Oct 19 Javascript
javascript代码优化的8点总结
Jan 29 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
Sep 21 Javascript
浅谈vue权限管理实现及流程
Apr 23 Javascript
Vue——前端生成二维码的示例
Dec 19 Vue.js
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和ACCESS写聊天室(一)
2006/10/09 PHP
用PHP实现读取和编写XML DOM代码
2010/04/07 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
PHP实现提高SESSION响应速度的几种方法详解
2019/08/09 PHP
CI框架简单分页类用法示例
2020/06/06 PHP
Alliance vs Liquid BO3 第一场2.13
2021/03/10 DOTA
javascript整除实现代码
2010/11/23 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
一个简单的动态加载js和css的jquery代码
2014/09/01 Javascript
BootStrap文件上传样式超好看【持续更新】
2016/05/10 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
2017/06/26 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
JS阻止事件冒泡的方法详解
2019/08/26 Javascript
使用vuex存储用户信息到localStorage的实例
2019/11/11 Javascript
解决vue2中使用elementUi打包报错的问题
2020/09/22 Javascript
在vue中通过render函数给子组件设置ref操作
2020/11/17 Vue.js
[00:55]2015国际邀请赛中国区预选赛5月23日——28日约战上海
2015/05/25 DOTA
Python中对象的引用与复制代码示例
2017/12/04 Python
Python遍历numpy数组的实例
2018/04/04 Python
python全栈要学什么 python全栈学习路线
2019/06/28 Python
如何使用Flask-Migrate拓展数据库表结构
2019/07/24 Python
python实现差分隐私Laplace机制详解
2019/11/25 Python
Python中的面向接口编程示例详解
2021/01/17 Python
Original Penguin英国官方网站:美国著名休闲时装品牌
2016/10/30 全球购物
如何进行有效的自我评价
2013/09/27 职场文书
商务英语专业自荐信
2013/10/14 职场文书
护理毕业生自荐信范文
2013/12/22 职场文书
通信工程专业毕业生推荐信
2013/12/25 职场文书
施工安全承诺书
2014/05/22 职场文书
给下属加薪申请报告
2015/05/15 职场文书
2015年污水处理厂工作总结
2015/05/26 职场文书
唐山大地震观后感
2015/06/05 职场文书
写好Python代码的几条重要技巧
2021/05/21 Python