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实例教程(19) 使用HoTMetal(1)
Dec 23 Javascript
javascript之卸载鼠标事件的代码
May 14 Javascript
基于jquery的横向滚动条(滑动条)
Feb 24 Javascript
js模拟select下拉菜单控件的代码
May 08 Javascript
node.js中的fs.writeSync方法使用说明
Dec 15 Javascript
JS获取鼠标坐标位置实例分析
Jan 20 Javascript
简单介绍jsonp 使用小结
Jan 27 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
Jul 06 Javascript
jQuery实现页面顶部下拉广告
Dec 30 Javascript
微信小程序 首页制作简单实例
Apr 07 Javascript
详解axios在vue中的简单配置与使用
May 10 Javascript
bootstrap-table formatter 使用vue组件的方法
May 09 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
ThinkPHP添加更新标签的方法
2014/12/05 PHP
WordPress中&quot;无法将上传的文件移动至&quot;错误的解决方法
2015/07/01 PHP
jQuery TextBox自动完成条
2009/07/22 Javascript
jQuery 操作option的实现代码
2011/03/03 Javascript
Node.js编码规范
2014/07/14 Javascript
Ajax中解析Json的两种方法对比分析
2015/06/25 Javascript
jQuery实现的仿select功能代码
2015/08/19 Javascript
js命名空间写法示例
2015/12/18 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
2016/03/29 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
2017/01/18 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
webpack打包js的方法
2018/03/12 Javascript
Angular模版驱动表单的使用总结
2018/05/05 Javascript
Vue全局分页组件的实现代码
2018/08/10 Javascript
webpack 动态批量加载文件的实现方法
2020/03/19 Javascript
Python生成器(Generator)详解
2015/04/13 Python
Python编写简单的HTML页面合并脚本
2016/07/11 Python
Python的时间模块datetime详解
2017/04/17 Python
python使用itchat模块给心爱的人每天发天气预报
2019/11/25 Python
基于python纯函数实现井字棋游戏
2020/05/27 Python
python解释器安装教程的方法步骤
2020/07/02 Python
浅析Python 序列化与反序列化
2020/08/05 Python
python实现马丁策略的实例详解
2021/01/15 Python
python wsgiref源码解析
2021/02/06 Python
HTML5 canvas基本绘图之图形变换
2016/06/27 HTML / CSS
草莓网化妆品加拿大网站:Strawberrynet Canada
2016/09/20 全球购物
美国山地自行车、露营、户外装备和服装购物网站:Aventuron
2018/05/05 全球购物
户外用品商店创业计划书
2014/01/29 职场文书
大学生职业规划书的范本
2014/02/18 职场文书
奉献家乡演讲稿
2014/09/13 职场文书
2014年小学生迎国庆65周年演讲稿
2014/09/27 职场文书
幼儿园小班见习报告
2014/10/31 职场文书
学校财务管理制度
2015/08/04 职场文书
幼儿园中班教育随笔
2015/08/14 职场文书