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 相关文章推荐
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
Mar 27 Javascript
一起来写段JS drag拖动代码
Dec 09 Javascript
JavaScript—window对象使用示例
Dec 09 Javascript
jquery控制display属性为none或block
Mar 31 Javascript
javascript实现无限级select联动菜单
Jan 02 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
Jun 14 Javascript
Swiper自定义分页器使用详解
Dec 28 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
Mar 22 Javascript
JS实现字符串中去除指定子字符串方法分析
May 17 Javascript
小程序红包雨的实现示例
Feb 19 Javascript
Vue退出登录时清空缓存的实现
Nov 12 Javascript
JavaScript修改注册表实例代码
Jan 05 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
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
php下使用iconv需要注意的问题
2010/11/20 PHP
PHP strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
CI框架源码解读之URI.php中_fetch_uri_string()函数用法分析
2016/05/18 PHP
PHP将页面中点击数量高的链接进行高亮显示的方法
2016/05/30 PHP
PHP学习笔记之php文件操作
2016/06/03 PHP
JavaScript对象学习经验整理
2013/10/12 Javascript
jQuery中[attribute]选择器用法实例
2014/12/31 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
2015/03/04 Javascript
Js数组排序函数sort()介绍
2015/06/08 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
使用AngularJS处理单选框和复选框的简单方法
2015/06/19 Javascript
深入理解JavaScript中的对象复制(Object Clone)
2016/05/18 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
详谈js中数组(array)和对象(object)的区别
2017/02/27 Javascript
原生js实现拖拽移动与缩放效果
2020/08/24 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
JavaScript中遍历的十种方法总结
2020/12/15 Javascript
[03:07]2015国际邀请赛选手档案EHOME.rOtK 是什么让他落泪?
2015/07/31 DOTA
Python生成随机验证码的两种方法
2015/12/22 Python
Numpy截取指定范围内的数据方法
2018/11/14 Python
pandas中的series数据类型详解
2019/07/06 Python
Django之提交表单与前后端交互的方法
2019/07/19 Python
详解Anconda环境下载python包的教程(图形界面+命令行+pycharm安装)
2019/11/11 Python
Python图片的横坐标汉字实例
2019/12/04 Python
在pytorch 中计算精度、回归率、F1 score等指标的实例
2020/01/18 Python
css3 中的新特性加强记忆详解
2016/04/16 HTML / CSS
生态学毕业生自荐信
2013/10/27 职场文书
创业计划书六个要素
2013/12/26 职场文书
财务部副经理岗位职责
2014/03/14 职场文书
班组长竞聘书
2014/03/31 职场文书
初中学生期末评语
2014/04/24 职场文书
做人民满意的公务员活动方案
2014/08/25 职场文书
Redis 的查询很快的原因解析及Redis 如何保证查询的高效
2022/03/16 Redis
vue判断按钮是否可以点击
2022/04/09 Vue.js