在页面中操作DOM元素二

第三章：修改jquery对象的内容和样式。

修改元素样式：className attr()修改类。但是一般不这么改。

添加或修改class：addClass(names) removeClass(names)

 <style>
        .box{ width: 100px; height: 100px; background-color: #ccc}
        .red{ background-color: red;}
        .b10{ border: 10px solid #000}
        .m10{ margin: 10px}
        .p10{ padding: 10px}
        .hide{ display: none;}
</style>

<body>
<div class="box" id="demo">div</div>
<ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script>
    $(function(){
        var element=$('#demo');
        element.addClass('red b10 m10 p10');
        element.removeClass('red');
    })
</script>
</body>

使用函数：

<script>
    $(function(){
        var element=$('#demo');
        element.addClass(function(index,className){
            console.log(index)//0
            console.log(className)//box
            return 'red';//增加red的类。根据返回值来增加类
        })
    })
</script>
//removeClass()也一样。

判断是否包含某个类：hasClass() toggleClass(names[,switch]) switch表示是否切换

<script>
    $(function(){
        var element=$('#demo');
        if(element.hasClass('hide')){
            element.removeClass('hide');
        }else{
            element.addClass('hide');
        }
        //上下效果相等
        element.toggleClass('hide');
        /*$('li').toggleClass('hide');*/
        $('li').each(function(index){
            $(this).toggleClass('red',index%3===0);
        })
    })
</script>

toggleClass有这个类就删除，没有的话就增加。

获取或设置style：

.box{ width: 100px; height: 100px; background-color: #ccc}
<script>
    $(function(){
        var element=$('#demo');
        element.css('width',200);
        element.css({
            'background-color':'red',
            height:200,
            border:'10px solid #000',
            marginTop:200,
        });
//利用函数
        element.css('height',function(index,value){
            console.log(value)//200px
            return

        })
    })
</script>

<script>
    $(function(){
        var element=$('#demo');
        element.css('width',200);
        element.css({
            'background-color':'red',
            height:200,
            border:'10px solid #000',
            marginTop:200,
        });
        element.css('height',function(index,value){
            console.log(value)
            return parseInt(value,10)+50;//10就是十进制 现在height的值为250

        })
    })
</script>

获取或设置元素尺寸：设置尺寸、设置位置。

width(value)不包括内边距、外边距，边框的。
height(value)
innerHeight(value)包含内边距，不包含边框和外边距
innerWidth(value)
outerHeight()包含内边距和边框
outerWidth()
outerHeight(true)包含内边距和边框和外边距
outerWidth(true)

获取或设置位置和滚动：

 <style>
        body{
            margin: 0;
            padding: 0;
        }
        .box{
            position: relative;
            width: 100px;
            height: 100px;
            background: #cccccc;
            margin: 20px;
        }
        .item{
            position: relative;
            width: 50px;
            height: 50px;
            background: red;
        }
    </style>


<div class="box" id="demo">
    <div class="item"></div>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script>
    $(function(){
        var demo=$('#demo');
        var element=$('.item');
        console.log(element.offset())
    })
</script>

position():获取的离元素相对位置relative的父级元素的距离。

<style>
        body{
            margin: 0;
            padding: 0;
        }
        .box{
            position: relative;
            width: 100px;
            height: 100px;
            background: #cccccc;
            margin: 20px;
            overflow: hidden;
        }
        .item{
            position: relative;
            width: 50px;
            height: 50px;
            background: red;
            margin: 20px;
            top: 10px;
            left: 15px;
        }
    </style>
<body>
<div class="box" id="demo">
    <div class="item"></div>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script>
    $(function(){
        var demo=$('#demo');
        var element=$('.item');
        console.log(element.offset())//相对于文档
        console.log(element.position())//相对于父级元素，忽略外边距设置
    })
</script>

</body>

scrollLeft(value)

scrollTop(value)

<script>
    $(function(){
        var demo=$('#demo');
        //获取滚动条的位置
        console.log(demo.scrollTop())//默认都为0
        console.log(demo.scrollLeft())
        //设置某一个位置
        demo.scrollTop(100);
        demo.scrollLeft(300);

    })
</script>

两个方法对可见和隐藏元素都是有效的。

回到顶部就是设置scrollTop为0来实现整个的滚动条。

获取或设置元素内容：

html()
html(content)
text()
text(content)

<body>
<ul>
    <li class="item1">item-1</li>
    <li class="item2">item-2</li>
    <li class="item3">item-3</li>
    <li class="item4">item-4</li>
    <li class="item5">item-5</li>
    <li class="item6">item-6</li>
    <li class="item7">item-7</li>
    <li class="item8">item-8</li>
    <li class="item9">item-9</li>
</ul>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script>
    $(function(){
        var elements=$('li');
        console.log(elements.html());//只对获得elements第一个元素。item-1
        console.log(elements.text())//获得elements的所有值。item-1item-2item-3item-4item-5item-6item-7item-8item-9
</script>

<script>
    $(function(){
        var elements=$('li');
        console.log(elements.html('<strong>test</strong>'));
        /*console.log(elements.text('<strong>test</strong>'))*/

    })
</script>

<script>
    $(function(){
        var elements=$('li');
        console.log(elements.text('<strong>test</strong>'))

    })
</script>

text只设置文本代码段。

<script>
    $(function(){
        var elements=$('li');
        console.log(elements.eq(0).html('<script>alert(123)<\/script>'))

    })
</script>

/前加\，\是转义字符。

<html>
<head>
  <style>
  div { width:60px; height:60px; margin:10px; float:left;
        border:2px solid blue; }
  .blue { background:blue; }
  </style>
  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>

<body>
  <div></div>
  <div></div>
  <div></div>

  <div></div>
  <div></div>
  <div></div>

  <script>$("body").find("div").eq(2).addClass("blue");</script>
</body>
</html>

eq() 方法将匹配元素集缩减值指定 index 上的一个。

.eq(index)

index

整数，指示元素的位置（最小为 0）。

如果是负数，则从集合中的最后一个元素往回计数。

如果给定表示 DOM 元素集合的 jQuery 对象，.eq() 方法会用集合中的一个元素构造一个新的 jQuery 对象。所使用的 index 参数标示集合中元素的位置。

$('li').eq(2).css('background-color', 'red');

这个调用的结果是为项目 3 设置了红色背景。请注意，index 是基于零的，并且是在 jQuery 对象中引用元素的位置，而不是在 DOM 树中。

<script>$('li').eq(-2).css('background-color', 'red');</script>

第四章：jquery对象的文档处理。

移动或插入元素：

append() 元素内部的后面追加内容
prepend() 元素内部的前面追加内容
before()
after()

<body>
<h2>标题</h2>
<ul>
    <li class="item1">item-1</li>
    <li class="item2">item-2</li>
    <li class="item3">item-3</li>
    <li class="item4">item-4</li>
    <li class="item5">item-5</li>
    <li class="item6">item-6</li>
    <li class="item7">item-7</li>
    <li class="item8">item-8</li>
    <li class="item9">item-9</li>
</ul>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script>
    $(function(){
        var elements=$('ul');
        elements.append($('h2'))
        
    })
</script>


</body>

element.append($('h2')) append中为选择器，会把h2中的内容选择移动到element后边。

<script>
    $(function(){
        var elements=$('ul');
        elements.append('<p>p1</p>','<p>p2</p>',$('h2'),'<p>p3</p>')

    })
</script>

appendTo(target)
prependTo(target)
insertBefore(target)
insertAfter(target)

和上面四种方法一样。

$('h2').appendTo(elements);

包裹元素：wrap() 不会移动，把对象复制一份然后包裹。

wrap()
wrapAll()
wrapInner()
unwrap()取消包裹。

<body>
<p>hdajudanwuhdqqnduqbdqnxskwjdqnja</p>
<div class="item"></div>
<a href="#">link1</a>
<a href="#">link2</a>
<a href="#">link3</a>
<a href="#">link4</a>
<a href="#">link5</a>
<a href="#">link6</a>
<a href="#">link7</a>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script>
    $(function(){
        var elements=$('p');
        //wrap参数可以传一段HTML片段：
        //elements.wrap('<div class="box"></div>');
        //传jQuery对象
        elements.wrap($('.item'));
    })
</script>


</body>

<script>
    $(function(){
        var elements=$('a');
        //每个a都包裹一个p
        elements.wrap('<p></p>');
        //所有的a都包裹在一个p中
        elements.wrapAll('<p></p>');
    })
</script>

<script>
    $(function(){
        var elements=$('p');
        elements.wrapInner($('.item'));

    })
</script>

移除元素：

remove(selector);只是从页面上删除了，还是存在的。
detach(selector)
empty()保留元素，只是想把元素内容清除干净，不想扔掉元素。

<script>
    $(function(){
        var elements=$('p');
        elements.remove();
        console.log(elements);

    })
</script>

<script>
    $(function(){
        var elements=$('p');
        elements.click(function(){
            $(this).css('fontSize','+=5');
        }).data('demo','demo');
        /*elements.remove();*/
        elements.appendTo($('.item'));
        console.log(elements.data());

    })
</script>

加上

elements.remove();

remove之后，把事件和数据都删除了，elements还能用，并没有从jQuery对象中删除。

移除元素之后我们还想用事件和数据，我们可以用detach(selector)

detach(selector)和remove()方法很像都是移除，移除之后还保存了事件和数据。

var elements=$('p');
elements.remove();
//把p标签和内容删除了
elements.empty();
//把p标签中的内容删除了

复制和替换元素：

clone():有两个参数，第一个参数是否复制其本身的事件和数据，第二个参数是否深度复制其所有子元素的事件和数据。
replaceWith(content)
replaceAll(target)

clone(true) 方法是复制一个元素及其所有事件，
默认为false

<h2>标题</h2>
<div class="item">
    <p>一段话一段话，一段话。</p>
</div>
<ul>
    <li class="item1">item1</li>
    <li class="item2">item2</li>
    <li class="item3">item3</li>
    <li class="item4">item4</li>
    <li class="item5">item5</li>
    <li class="item6">item6</li>
    <li class="item7">item7</li>
    <li class="item8">item8</li>
    <li class="item9">item9</li>
</ul>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script>
    $(function(){
        var element=$('ul');
        $('.item').data('item','item');
        $('p').data('p','p');
        $('.item').clone().appendTo(element);
        console.log($('ul .item').data())
        console.log($('ul p').data())

    })
</script>

<script>
    $(function(){
        var element=$('ul');
        $('.item').data('item','item');
        $('p').data('p','p');
        $('.item').clone(true).appendTo(element);
        console.log($('ul .item').data())
        console.log($('ul p').data())

    })
</script>

clone(true,false),只是会对.item克隆，不会对p克隆。

replaceWith(content)会将所有匹配的元素换成指定的元素。

replaceAll(target)就是replaceWith的反方法。

<script>
    $(function(){
        var element=$('ul');
        $('h2').replaceWith('<p>hello</p>');
        $('<p>hello</p>').replaceAll($('h2'));
    })
</script>

appendTo()
prependTo()
insertBefore()
insertAfter()
replaceAll()

以上几个方法都执行了破坏性的操作。要想选择先前用的元素，要使用end()。

处理表单元素值的方法：

.val() 设置值

.val(value) 获取值

<body>
<form action="">
    <p><input type="text" name="text"/></p>
    <p>
        <input type="radio" name="radio" value="1"/>radio1
        <input type="radio" name="radio" value="2"/>radio2
    </p>
    <p>
        <input type="checkbox" name="checkbox" value="1"/>checkbox1
        <input type="checkbox" name="checkbox" value="2"/>checkbox2
    </p>
    <p>
        <select name="select" style="width: 200px">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </p>
    <p>
        <select name="multiSelect" multiple style="width: 200px">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </p>
</form>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script>
    $(function(){
        console.log($('[name="text"]').val());

        console.log($('[name="radio"]:checked').val());

        /*console.log($('[name="select"]').val());*/
        console.log($('[name="select"] option:selected').val());

        console.log($('[name="multiSelect"]').val());

        console.log($('[name="checkbox"]:checked').val());//如果只选择一个是正确的，如果选择两个，只获取到第一个的值
        console.log(
                $('[name="checkbox"]:checked').map(function(){
                    return $(this).val();
                }).toArray()
        );


    })
</script>

</body>

console.log($('[name="text"]').val('123'));//文本框出现123

console.log($('[name="text"]').val('123'));//文本框出现123
        console.log($('[name="select"]').val('2'));
        console.log($('[name="radio"]').val(['2']));
        console.log($('[name="multiSelect"]').val(['1','2']));
        console.log($('[name="checkbox"]').val(['1','2']));

总结：

修改元素的特性和属性
修改元素的样式和内容
插入、包裹、移除、复制和替换元素
获取和设置表单值

在页面中操作DOM元素二

猜你喜欢