页面开发过程jQuery常见操作

1.点击按钮，修改页面布局。

例：

点击后：

代码实现：

 $(".btn-change").click(function () {
                // 修改按钮变为确定按钮
                var buttonyes = document.createElement("button");//创建确定按钮
                var textnode1 = document.createTextNode("确定");//创建文本节点“确定”
                buttonyes.appendChild(textnode1)//将文本节点添加到按钮
                var btndiv = $(this).parent().get(0)//按钮的父元素jq对象转化为dom对象
                btndiv.replaceChild(buttonyes, this)//替换按钮
                var $buttonyes = $(buttonyes)
                $buttonyes.addClass('btn-item')
                $buttonyes.addClass('btn-yes')
                // p变为textarea   
                $btndiv = $(btndiv)
                var pdiv = $btndiv.parent().find("p").parent().get(0)
                var pobject = $btndiv.parent().find("p").get(0)
                var text = document.createElement("textarea")
                var yuanneirong = pobject.innerHTML
                var textnode2 = document.createTextNode(yuanneirong)
                text.appendChild(textnode2)
                pdiv.replaceChild(text, pobject)
                //设置textarea样式
                $text = $(text)
                $text.addClass('textareaClass')
｝

 2.筛选li偶数行

li偶数行设置背景颜色。

js:

$( "li" ).filter( ":even" ).css( "background-color", "red" );

3.jquery对象和dom对象互相转化。 

有时候我们需要利用jQuery的便利的选择器，但是需要用到dom对象的方法来实现一些操作。这时候就需要两种对象互相转化。

//jQuery对象转化为dom对象
var DOMdx = $(this).get(0)
//dom对象转化为jQuery对象
$DOMdx = $(DOMdx)