• jQuery学习(二)


    操作DOM对象:

    修改文本:

    jQuery对象的text()和html()方法可以用来获取节点的文本内容和HTML文本。而当你给方法传入参数时,这两个方法可以被用于设置jQuery的文本内容。

    还是以之前的代码为例:

    1 <div id="test-div">
    2 <p class="color-red">JavaScript</p>
    3 <p class="color-green">Python</p>
    4 <p class="color-red color-green">Erlang</p>
    5 <p class="color-black" name="haskell">Haskell</p>
    6 </div>
    1 <script>
    2 var langs = $('[class^=color]');
    3 langs.each(function(){
    4     var text = "lang_" + $(this).text();
    5     $(this).text(text);
    6 });
    7 </script>

    这里我们选出了全部的语言,并将每个语言的文本内容加个"lang_"前缀。

    修改CSS:

    jQuery可以通过css()和addClass()方法来修改DOM对象的CSS样式。

    addClass()是直接将一个样式作为参数传入,为DOM设置样式,而css()方法则是将样式通过键值对的方式传入设置样式。

    先定义样式:

    1 .red_syle{
    2 color:#ff0000;
    3 }
    4 </style>

    对某一jQuery对象通过addClass()方法应用该样式。

    1 langs.addClass('red_syle');

    上述的编程语言将显示为红色。

    1 langs.css('color','#0000ff');

    编程语言将显示为蓝色。

    注意,css()的优先级要高于addClass()。

    显示和隐藏DOM对象,

    hide()和show()方法可以用来隐藏和显示DOM对象。

    toggle()方法用来切换显示和隐藏状态。

    操作DOM节点的属性:attr(),removeAttr();

    1 // <div id="test-div" name="Test" start="1">...</div>
    2 <script>
    3 var div = $('#test-div');
    4 div.attr('data'); // undefined, 属性不存在
    5 div.attr('name'); // 'Test'
    6 div.attr('name', 'Hello'); // div的name属性变为'Hello'
    7 div.removeAttr('name'); // 删除name属性
    8 div.attr('name'); // undefined
    9 </script>

    jQuery还支持prop()方法。prop()和attr()类似,只是在个别行为上有所差异。

    1 var radio = $('#test-radio');
    2 radio.attr('checked'); // 'checked'
    3 radio.prop('checked'); // true

    对于表单元素,jQuery对象统一提供val()方法获取和设置对应的value属性,类似于text()方法。

    操作DOM结构:

    jQuery的append()可以增加新的DOM节点。

    1 <div id="test-div">
    2 <p class="color-red">JavaScript</p>
    3 <p class="color-green">Python</p>
    4 <p class="color-black" name="haskell">Haskell</p>
    5 </div>

    我们可以通过下列代码在div下增加一个子节点。

    1 <script>
    2 var div = $('#test-div');
    3 div.append('<p class=color-black>Haskell</p>');
    4 </script>

    除了直接传入字符串构造一个节点外,我们可以直接传入一个DOM对象。

    1 <script>
    2 var h = $(document.createElement('p'));//自己构造DOM对象并转成jQuery对象
    3 h.text('Haskell');//设置属性
    4 h.attr('class','color-black');
    5 var div = $('#test-div');
    6 div.append(h);//添加节点
    7 </script>

    当然,可以获取页面中的DOM对象,在通过append()插入。这时,会先在原位置删除该节点,然后在指定位置插入。

    prepend()和append()都是插入节点,只不过prepend是将节点插到最前,而append()是插到最后。

    同级节点可以用after()和before()来插入。

    删除DOM节点可以用remove()。如果一个jQuery对象中包括多个DOM对象,那么将全部被删除。

  • 相关阅读:
    android spinner学习
    cookie的学习笔记三(做俩个小练习);
    Cookie的细节具体保存的有效时间
    cookie技术核心! 就是四个类的应用 搞懂这个基本上就把这个搞定了!
    学习Servlet的重要应用 在什么地方用写路径
    数组空值empty
    ios学习杂记
    ios广告封装
    Runtime
    UIImage分类,设置边框
  • 原文地址:https://www.cnblogs.com/insaneXs/p/5210198.html
Copyright © 2020-2023  润新知