jquery学习的部分代码(二).doc

strong title=选择你最喜欢的水果. 你最喜欢的水果是?/strong ul li title=苹果苹果/li li title=橘子橘子/li li title=菠萝菠萝/li /ul 1.获取节点属性 ?var $para = $(p); // 获取p节点 ?var $li = $(ul li:eq(1)); ? // 获取第二个li元素节点 ?var p_txt = $para.attr(title); // 输出p元素节点属性title ?var ul_txt = ?$li.attr(title); // 获取ul里的第二个li元素节点的属性title ?var li_txt = ?$li.text(); ? // 输出第二个li元素节点的text 2.创建节点并添加 var $li_1 = $(li title=香蕉香蕉/li);//创建一个li元素包括元素节点,文本节点和属性节点 var $li_2 = $(li title=雪梨雪梨/li);//创建一个li元素包括元素节点,文本节点和属性节点 var $parent = $(ul); // 获取ul节点。li的父节点 $parent.append($li_1); ? ?// 添加到ul节点中，使之能在网页中显示 $parent.append($li_2); ? ?// 等价于：$parent.append($li_1).append($li_2); 3.插入节点 var $li_1 = $(li title=香蕉香蕉/li); // ?创建第一个li元素 var $li_2 = $(li title=雪梨雪梨/li); // ?创建第二个li元素 var $li_3 = $(li title=其它其它/li); // ?创建第三个li元素 var $parent = $(ul); // 获取ul节点，即li的父节点 var $two_li = $(ul li:eq(1)); // ?获取ul节点中第二个li元素节点 ?? $parent.append($li_1); ? ? // ?append方法将创建的第一个li元素添加到父元素的最后面 $parent.prepend($li_2); ? ? // ?prepend方法将创建的第二个li元素添加到父元素里的最前面 $li_3.insertAfter($two_li); ? // ?insertAfter方法将创建的第三个li元素元素插入到获取的li之后 4.删除节点 var $li = $(ul li:eq(1)).remove(); // 获取第二个li元素节点后，将它从网页中删除。 $(ul li).remove(li[title!=菠萝]); ?//把li元素中属性title不等于菠萝的li元素删除 remove()包含参数 $(ul li:eq(1)).empty(); // 获取第二个li元素节点后，清空此元素里的内容 $li.appendTo(ul); // 把刚才删除的又重新添加到ul元素里 //删除只是从网页中删除，在jQuery对象中，这个元素还是存在的，我们可以重新获取它 5.复制节点 $(ul li).click(function(){ ? ? $(this).clone().appendTo(ul); // 复制当前点击的节点，并将它追加到ul元素 ?}) ?? $(ul li).click(function(){ ?? ? $(this).clone(true).appendTo(ul); // 注意参数true??可以复制自己，并且他的副本也有同样功能。? }) 6.替换节点 ?$(p).replaceWith(strong你最不喜欢的水果是?/strong);? // 同样的实现：$(strong你最不喜欢的水果是?/strong).replaceAll(p);? 7.包裹 ?$(strong).wrap(b/b);//用b元素把strong元素包裹起来 $(strong).wrapInner(b/b); $(strong).wrapAll(b/b); 8.属性操作 ?? //设置p元素的属性title ??$(input:eq(0)).click(function(){ $(p).attr(title,选择你最喜欢的水果.); ??}); ?//获取p元素的属性title $(input:eq(1)).click(function(){ alert( $(p).attr(title) ); ?}); ?//删除p元素的属性title $(input:eq(2)).click(function(){ $(p).removeAttr(tit