jquery第三章.ppt

3.1.9 样式操作 1.attr("class") 获取属性和设置属性 <p class="myClass" title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> alert( $("p").attr("class") );//获取指定元素的class $("p").attr("class","high");//设置指定元素的class为high 3.1.9 样式操作 2.addClass() 追加样式 <p class="myClass" title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> $("p").addClass("another"); 3.1.9 样式操作 3.removeClass() 移除样式 <p class="myClass" title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> $("p").removeClass();//删除全部样式 $("p").removeClass("high");//删除指定样式 3.1.9 样式操作 4.toggleClass() 重复切换样式 <p class="myClass" title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> $("p").toggleClass("another"); 3.1.9 样式操作 5.hasClass() 判断是否含有某个样式 <p class="myClass" title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> alert( $("p").hasClass("another") ) alert( $("p").is(".another") ) 第三章.jQuery中的DOM操作 3.1 jQuery中的DOM操作 3.1 jQuery中的DOM操作 3.1.1 查找节点 1.查找元素节点 var $li = $("ul li:eq(1)"); // 获取第二个<li>元素节点 var li_txt = $li.text(); // 获取第二个<li>元素节点的text alert(li_txt); 3.1.1 查找节点 2.查找属性节点:attr() var $para = $("p"); // 获取<p>节点 var p_txt = $para.attr("title"); // 获取<p>元素节点属性title alert(p_txt); 3.1.2 创建节点 1.创建元素节点 var $li_1 = $("<li></li>"); // 创建第一个<li>元素 var $li_2 = $("<li></li>"); // 创建第二个<li>元素 3.1.2 创建节点 2.创建文本节点 var $li_1 = $("<li>香蕉</li>"); // 创建一个<li>元素，包括元素节点和文本节点 //“香蕉”就是创建的文本节点。 var $li_2 = $("<li>雪梨</li>"); // 创建一个<li>元素，包括元素节点和文本节点 //“雪梨”就是创建的文本节点。 $("ul").append($li_1); // 添加到<ul>节点中，使之能在网页中显示 $("ul").append($li_2); // 添加到<ul>节点中，使之能在网页中显示 3.1.2 创建节点 3.创建属性节点 var $li_1 = $("<li title='香蕉'>香蕉</li>");//创建一个<li>元素 ，包括元素节点,文本节点和属性节，其中title='香蕉' 就是创建的属性节点 var