jQuery DOM操作实例

都来加深印象吧,大家都知道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="https://www.jb51.net/script/jquery-1.4.1.js"></script>
</head>
<body>
    <p>class</p>
    <div >all
    <input type="text" value="text"/>
        <p>p</p>
        <ul>
            <li>苹果</li>
            <li>脐橙</li>
            <li>柚子</li>
        </ul>
        <div>
            <p>内容</p>
        </div>
        <input type="button" value="鼠标悬浮效果" />
    </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"));//效果同上

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdydzd.html