jquery查找节点和创建节点的方式

查找节点和创建节点
1、查找节点
1.查找元素节点
查找元素节点非常简单,用 jQuery 择器即可完成。

  var $li = $('ul li:eq(1)');
  var li_txt = $li.text();
  alert(li_txt);

2.查找属性节点
利用选择器查找到需要的元素之后,就可以使用attr()方法来获取它的各种属性值。

    var $para = $('p');
    var p_text = $para.attr('title');
    alert(p_text);

2、创建节点
1.创建元素节点
使用 jQuery 的工厂函数$()来完成创建,然后使用append()方法插入文档中。

    var $li_1 = $('<li>1</li>');
    var $li_2 = $('<li>2</li>');
    $('ul').append($li_1);
    $('ul').append($li_2);

2.创建属性节点
创建属性节点也是直接在创建元素时一起创建。

    var $li_1 = $('<li title="香蕉">香蕉</li>');
    var $li_2 = $('<li title="雪梨">雪梨</li>');
    $('ul').append($li_1);
    $('ul').append($li_2);

插入节点和删除节点
1、插入节点的方法

    var $li_1 = $("<li title='香蕉'>香蕉</li>");
    var $li_2 = $("<li title='雪梨'>雪梨</li>");
    var $li_3 = $("<li title='其他'>其他</li>");

    var $parent = $('ul');
    $parent.append($li_1);
    $parent.prepend($li_2);
    var $two_li = $('ul li:eq(1)');
    $li_3.insertAfter($two_li);

2、删除节点
jQuery提供了三种方法删除节点:remove(),detach(),empty()。

1.remove()方法

remove()方法的返回值是被删除节点的引用。
var li= (‘ul li:eq(1)’).remove();//删掉第二个
li.append(ul);remove() (‘ul li’).remove(‘li[title!=菠萝]’);
2.detach()方法
同样是从DOM中去掉所有匹配的元素,但不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。

     $('ul li').click(function(){
        alert($(this).html());
     });
     var $li = $('ul li:eq(1)').detach();
     $li.appendTo('ul');//绑定事件还在

3.empty()方法
严格来讲,empty()方法并不是删除节点,而是清空节点,它能清空元素中所有后代节点。
var li= (‘ul’).empty();
复制节点和替换节点
1.复制节点
可以使用clone()方法完成,赋值节点后,被复制得新元素并不具备任何行为。
在clone()方法中传递一个参数true,复制元素的同时复制元素中所有绑定事件。

$('ul li').click(function(){
        $(this).clone(true).appendTo('ul');
    });

2.替换节点
替换节点可以使用replaceWith()和replaceAll()。
relpaceWith()是将所有匹配的元素都替换成指定的HTML或者DOM元素。
$(‘p’).replaceWith(‘你最不喜欢的水果是?‘);
$(‘你最不喜欢的水果是?‘).replaceAll(‘p’);
包裹节点和属性操作
1、包裹节点
可以用wrap()方法将某个节点用其他标记包裹起来。
$(‘strong’).wrap(‘‘);
1.wrapAll()方法
该方法会将所有匹配的元素用一个元素来包裹。
$(‘strong’).wrapAll(‘‘);
2.wrapInner()方法
该方法将每一个匹配的子元素(包括文本节点)用其他结构化的标记包裹起来。
$(‘strong’).wrapInner(‘‘);
2、属性操作
1.获取属性和设置属性
在jQuery中,用attr()方法获取和设置元素属性,removeAttr()方法来删除元素属性。
如果要获取

元素的属性title,那么只需要在attr()方法中传入属性名。
var para= (“p”);
var p_txt = $para.attr(‘title’);
console.log(p_txt);
如果要设置

元素的属性值,也使用同一个方法。
(p).attr(title,yourtitle);// (‘p’).attr({‘title’:’your title’,’name’:’aaa’});
2.删除属性
删除属性可以用removeAttr()方法来完成。
(p).removeAttr(name);1.classattr() (“p”).attr(“class”)
(p).attr(class,high);2.jQueryaddClass() (“p”).addClass(“another”);
3.移除样式
相对应的,使用removeClass()方法来删除 class 的某个值,他的作用是从匹配的的元素中删除全部或指定的 class 。
//删除所有样式
(p).removeClass();// (“p”).removeClass(“high”);
4.切换样式
jQuery 提供了toggleClass()方法控制样式上的重复切换。如果类名存在则删除它,如果类名不存在则添加它。
(p).toggleClass(another);5.hasClass()class (“p”).hasClass(“another”);
本节所有代码:
jqueryDomStyle.html
(function(){  
      //获取样式
(“input:eq(0)”).click(function(){
alert( (“p”).attr(“class”) );  
      });  
      //设置样式
(“input:eq(1)”).click(function(){
(“p”).attr(“class”,”high”);  
      });  
      //追加样式
(“input:eq(2)”).click(function(){
(“p”).addClass(“another”);  
      });  
      //删除全部样式
(“input:eq(3)”).click(function(){
(“p”).removeClass();  
      });  
       //删除指定样式
(“input:eq(4)”).click(function(){
(“p”).removeClass(“high”);  
      });  
      //重复切换样式
(“input:eq(5)”).click(function(){
(“p”).toggleClass(“another”);  
      });  
      //判断元素是否含有某样式
(“input:eq(6)”).click(function(){
alert( (p).hasClass(another))alert( (“p”).is(“.another”) )
});
});
设置和获取HTML、文本和值
1.html()方法
此方法类似于javascript中的innerHTML属性,可以用来读取和设置元素中的HTML内容。

你喜欢的水果是?

$p_html = $('p').html();
lg($p_html);
$('p').html('<strong>你最喜欢的水果是???</strong>');

2.text()方法
text()方法类似于javascript中的innerText属性,可以用来读取或设置元素中的文本内容。

你喜欢的水果是?

var p_text = $('p').text();
lg(p_text);
$('p').text('你最不喜欢的水果是?');

3.val()方法
此方法类似于javascript中的value属性,可以用来设置和获取元素的值。
无论元素是文本框,下拉列表还是单选框,都可以返回元素的值。如果元素为多选,则返回一个包含所有选择的值的数组。
jqueryVal.html

(“#address”).focus(function(){         // 地址框获得鼠标焦点  
            var txt_value =
(this).val(); // 得到当前文本框的值
if(txt_value==this.defaultValue){
$(this).val(“”); // 如果符合条件,则清空文本框内容
}
});

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值