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 写类方式之十
Jul 05 Javascript
functional继承模式 摘自javascript:the good parts
Jun 20 Javascript
js对table的td进行相同内容合并示例详解
Dec 27 Javascript
javaScript使用EL表达式的几种方式
May 27 Javascript
不同编码的页面表单数据乱码问题解决方法
Feb 15 Javascript
js实现固定显示区域内自动缩放图片的方法
Jul 18 Javascript
深入解析JavaScript中的数字对象与字符串对象
Oct 21 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
Mar 02 Javascript
解决vue中对象属性改变视图不更新的问题
Feb 23 Javascript
es6中比较有用的7个技巧小结
Jul 12 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
Oct 09 Javascript
element-ui 弹窗组件封装的步骤
Jan 22 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
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
JavaScript 指导方针
2007/04/05 Javascript
JS 分号引起的一段调试问题
2009/06/18 Javascript
jQuery 白痴级入门教程
2009/11/11 Javascript
JS 对象介绍
2010/01/20 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
2013/01/25 Javascript
js实现鼠标滑过文字链接色彩变化的效果
2015/05/06 Javascript
JavaScript在网页中画圆的函数arc使用方法
2015/11/13 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
2016/08/02 Javascript
VC调用javascript的几种方法(推荐)
2016/08/09 Javascript
微信小程序实现登录页云层漂浮的动画效果
2017/05/05 Javascript
微信小程序中post方法与get方法的封装
2017/09/26 Javascript
mac中利用NVM管理不同node版本的方法详解
2017/11/08 Javascript
fetch 使用及如何接收JS传值
2017/11/11 Javascript
详解Javascript 中的 class、构造函数、工厂函数
2017/12/20 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
2018/12/30 Javascript
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
JS块级作用域和私有变量实例分析
2019/05/11 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
2019/06/25 Javascript
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
Python设计模式编程中解释器模式的简单程序示例分享
2016/03/02 Python
python中hashlib模块用法示例
2017/10/30 Python
Python 实现某个功能每隔一段时间被执行一次的功能方法
2018/10/14 Python
python使用BeautifulSoup与正则表达式爬取时光网不同地区top100电影并对比
2019/04/15 Python
Django 实现admin后台显示图片缩略图的例子
2019/07/28 Python
python函数调用,循环,列表复制实例
2020/05/03 Python
Python3 Tensorlfow:增加或者减小矩阵维度的实现
2020/05/22 Python
python 写一个性能测试工具(一)
2020/10/24 Python
Boda Skins皮衣官网:奢侈皮夹克,全球配送
2016/12/15 全球购物
施工人员岗位职责
2013/12/12 职场文书
策划创业计划书
2014/02/06 职场文书
教师个人考察材料
2014/12/16 职场文书
先进事迹材料范文
2014/12/29 职场文书
员工工作能力评语
2014/12/31 职场文书
2015年宣传部工作总结范文
2015/03/31 职场文书
使用CSS设置滚动条样式
2022/01/18 HTML / CSS