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

你最喜欢的水果是?苹果橘子菠萝1.获取节点属性var $para = $(p);/ 获取节点var $li = $(ul li:eq(1); / 获取第二个元素节点var p_txt = $para.attr(title); / 输出元素节点属性titlevar ul_txt = $li.attr(title);/ 获取里的第二个元素节点的属性titlevar li_txt = $li.text(); / 输出第二个元素节点的text2.创建节点并添加var $li_1 = $(香蕉);/创建一个元素包括元素节点,文本节点和属性节点var $li_2 = $(雪梨);/创建一个元素包括元素节点,文本节点和属性节点var $parent = $(ul);/ 获取节点。的父节点$parent.append($li_1); / 添加到节点中，使之能在网页中显示$parent.append($li_2); / 等价于：$parent.append($li_1).append($li_2);3.插入节点var $li_1 = $(香蕉);/ 创建第一个元素var $li_2 = $(雪梨);/ 创建第二个元素var $li_3 = $(其它);/ 创建第三个元素var $parent = $(ul);/ 获取节点，即的父节点var $two_li = $(ul li:eq(1); / 获取节点中第二个元素节点 $parent.append($li_1); / append方法将创建的第一个元素添加到父元素的最后面$parent.prepend($li_2); / prepend方法将创建的第二个元素添加到父元素里的最前面$li_3.insertAfter($two_li); / insertAfter方法将创建的第三个元素元素插入到获取的之后4.删除节点var $li = $(ul li:eq(1).remove(); / 获取第二个元素节点后，将它从网页中删除。$(ul li).remove(lititle!=菠萝); /把元素中属性title不等于菠萝的元素删除 remove()包含参数$(ul li:eq(1).empty(); / 获取第二个元素节点后，清空此元素里的内容$li.appendTo(ul);/ 把刚才删除的又重新添加到元素里/删除只是从网页中删除，在jQuery对象中，这个元素还是存在的，我们可以重新获取它5.复制节点$(ul li).click(function() $(this).clone().appendTo(ul); / 复制当前点击的节点，并将它追加到元素) $(ul li).click(function() $(this).clone(true).appendTo(ul); / 注意参数true可以复制自己，并且他的副本也有同样功能。)6.替换节点$(p).replaceWith(你最不喜欢的水果是?);/ 同样的实现：$(你最不喜欢的水果是?).replaceAll(p);7.包裹$(strong).wrap();/用元素把元素包裹起来$(strong).wrapInner();$(strong).wrapAll();8.属性操作 /设置元素的属性title$(input:eq(0).click(function()$(p).attr(title,选择你最喜欢的水果.););/获取元素的属性title$(input:eq(1).click(function()alert( $(p).attr(title) ););/删除元素的属性title$(input:eq(2).click(function()$(p).removeAttr(title);); 9.样式操作 /获取样式 $(input:eq(0).click(function()alert( $(p).attr(class) );); /设置样式$(input:eq(1).click(function()$(p).attr(class,high);$(p).css(background,red);); /追加样式$(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) )10.设置和获取HTML,文本和值 /获取元素的HTML代码 $(input:eq(0).click(function()alert( $(p).html() );); /获取元素的文本$(input:eq(1).click(function()alert( $(p).text() );); /设置元素的HTML代码$(input:eq(2).click(function()$(p).html(你最喜欢的水果是?);); /设置元素的文本$(input:eq(3).click(function()$(p).text(你最喜欢的水果是?);); /设置元素的文本$(input:eq(4).click(function()$(p).text(你最喜欢的水果是?);); /获取按钮的value值$(input:eq(5).click(function()alert( $(this).val() );); /设置按钮的value值$(input:eq(6).click(function() $(this).val(我被点击了!););/非空验证 $(#address).focus(function() / 地址框获得鼠标焦点 var txt_value = $(this).val(); / 得到当前文本框的值if(txt_value=请输入邮箱地址) $(this).val(); / 如果符合条件，则清空文本框内容);$(#address).blur(function()/ 地址框失去鼠标焦点 var txt_value = $(this).val(); / 得到当前文本框的值if(txt_value=) $(this).val(请输入邮箱地址);/ 如果符合条件，则设置内容) $(#address).focus(function() / 地址框获得鼠标焦点var txt_value = $(this).val(); / 得到当前文本框的值if(txt_value=this.defaultValue) $(this).val(); / 如果符合条件，则清空文本框内容); /设置单选下拉框选中 $(input:eq(0).click(function()$(#single).val(选择2号);); /设置多选下拉框选中$(input:eq(1).click(function() $(#multiple).val(选择2号, 选择3号);); /设置单选框和多选框选中$(input:eq(2).click(function()$(:checkbox).val(check2,check3);$(:radio).val(radio2););/设置单选下拉框选中 $(input:eq(0).click(function() $(#single option).removeAttr(selected); /移除属性selected$(#single option:eq(1).attr(selected,true); /设置属性selected); /设置多选下拉框选中$(input:eq(1).click(function() $(#multiple option).removeAttr(selected); /移除属性selected$(#multiple option:eq(2).attr(selected,true);/设置属性selected$(#multiple option:eq(3).attr(selected,true);/设置属性selected); /设置单选框和多选框选中$(input:eq(2).click(function()$(:checkbox).removeAttr(checked); /移除属性checked$(:radio).removeAttr(checked); /移除属性checked$(value=check2:checkbox).attr(checked,true);/设置属性checked$(value=check3:checkbox).attr(checked,true);/设置属性checked$(value=radio2:radio).attr(checked,true);/设置属性checked); 11.遍历节点树var $ul = $(ul).children(); var $p1 = $(p).next();alert( $p1.html() ); / 紧邻元素后的同辈元素var $ul = $(ul).prev();alert( $ul.html() ); / 紧邻元素前的同辈元素var $p2 = $(p).siblings();alert( $p2.html() ); / 紧邻元素的唯一同辈元素 $(document).bind(click, function (e) $(e.target).closest(li).css(color,red);)12.CSS-DOM /获取元素的color $(input:eq(0).click(function()alert( $(p).css(color) );); /设置元素的color$(input:eq(1).click(function()$(p).css(color,red); /设置元素的fontSize和backgroundColor$(input:eq(2).click(function()$(p).css(fontSize:30px ,backgroundColor:#888888); /获取元素的高度$(input:eq(3).click(function()alert( $(p).height() );); /获取元素的宽度$(input:eq(4).click(function()alert( $(p).width() );); /获取元素的高度$(input:eq(5).cl