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)