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 相关文章推荐
JS维吉尼亚密码算法实现代码
Nov 09 Javascript
javascript开发技术大全-第1章javascript概述
Jul 03 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
Nov 13 Javascript
javascript实现的元素拖动函数宿主为浏览器
Jul 21 Javascript
node.js中的fs.renameSync方法使用说明
Dec 16 Javascript
在AngularJS中使用AJAX的方法
Jun 17 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 Javascript
angular2+node.js express打包部署的实战
Jul 27 Javascript
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
vue实现菜单切换功能
May 08 Javascript
Vue 实现从文件中获取文本信息的方法详解
Oct 16 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
Dec 10 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
采用memcache在web集群中实现session的同步会话
2014/07/05 PHP
深入理解PHP中的count函数
2016/05/31 PHP
thinkPHP模板引擎用法示例
2016/12/08 PHP
自己开发Dojo的建议框架
2008/09/24 Javascript
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
javascript 按回车键相应按钮提交事件
2009/11/02 Javascript
详解JavaScript中的表单验证
2015/06/16 Javascript
jQuery实现本地预览上传图片功能
2016/01/08 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
2016/03/05 Javascript
浅析JavaScript中的对象类型Object
2016/05/26 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
正则 js分转元带千分符号详解
2017/03/08 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
2017/08/22 Javascript
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
JS/jQuery实现简单的开关灯效果【案例】
2019/02/19 jQuery
微信小程序input抖动问题的修复方法
2021/03/03 Javascript
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
python下读取公私钥做加解密实例详解
2017/03/29 Python
浅谈DataFrame和SparkSql取值误区
2018/06/09 Python
Python爬虫小技巧之伪造随机的User-Agent
2018/09/13 Python
浅谈python str.format与制表符\t关于中文对齐的细节问题
2019/01/14 Python
Django 实现将图片转为Base64,然后使用json传输
2020/03/27 Python
2014年圣诞节倒计时网页的制作过程
2014/12/05 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
2019/01/24 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
2020/07/20 HTML / CSS
DAWGS鞋官方网站:鞋,凉鞋,靴子
2016/10/04 全球购物
职专应届生求职信
2013/11/16 职场文书
大学毕业生最详细的自我评价分享
2013/11/18 职场文书
十八大感想感言
2014/02/10 职场文书
基本公共卫生服务健康教育工作方案
2014/05/22 职场文书
班训口号大全
2014/06/18 职场文书
读群众路线的心得体会
2014/09/03 职场文书
党的群众路线教育实践活动对照检查材料(四风)
2014/09/27 职场文书
村主任当选感言
2015/08/01 职场文书
Python下opencv库的安装过程及问题汇总
2021/06/11 Python
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫