用jq添加或移除div

问题分析：

1、删除：使用jQuery的remove方法。

2、添加：使用jQuery的append、after等多个方法，这些不同的方法是用来决定标签添加的相对位置。

举例如下：

以内部追加方法append为例。

添加DIV：

$('body').append('<div id="name">我是被添加的DIV标签</div>')

删除刚刚添加的DIV：

$('#name').remove()

一共三步，具体如下：

1、HTML结构：设计三个li元素<ul id="test">、 <li>Glen</li>、<li>Tane</li、<li>John</li>、</ul>。

2、css样式：设计一个类selected，表示选中后的效果<style>.selected{font-weight:boldbackground: #ff99cccolor:#fff}</style。

3、jquery代码：$(function(){$("#test li").click(function() $(this).siblings('li').removeClass('selected') // 删除其他兄弟元素 $(this).addClass('selected') // 添加当前元素的样式 })

1、removeClass()定义和用法：removeClass() 方法从被选元素移除一个或多个类。如果没有规定参数，则该方法将从被选元素中删除所有类。

2、addClass()定义和用法：addClass() 方法向被选元素添加一个或多个类。该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性。如需添加多个类，请使用空格分隔类名。

复制代码

代码如下:

<meta

http-equiv="content-type"

content="text/html

charset=UTF-8">

<script

type="text/javascript"

src="jquery-1.9.1.min.js"></script>

<script

type="text/javascript">

/**

*

向上移动选中的option

*/

function

upSelectedOption(){

if(null

==

$('#where').val()){

alert('请选择一项')

return

false

}

//选中的索引,从0开始

var

optionIndex

=

$('#where').get(0).selectedIndex

//如果选中的不在最上面,表示可以移动

if(optionIndex

>

0){

$('#where

option:selected').insertBefore($('#where

option:selected').prev('option'))

}

}

/**

*

向下移动选中的option

*/

function

downSelectedOption(){

if(null

==

$('#where').val()){

alert('请选择一项')

return

false

}

//索引的长度,从1开始

var

optionLength

=

$('#where')[0].options.length

//选中的索引,从0开始

var

optionIndex

=

$('#where').get(0).selectedIndex

//如果选择的不在最下面,表示可以向下

if(optionIndex

<

(optionLength-1)){

$('#where

option:selected').insertAfter($('#where

option:selected').next('option'))

}

}

/**

*

移除选中的option

*/

function

removeSelectedOption(){

if(null

==

$('#where').val()){

alert('请选择一项')

return

false

}

$('#where

option:selected').remove()

}

/**

*

获取所有的option值

*/

function

getSelectedOption(){

//获取Select选择的Text

var

checkText

=

$('#where').find('option:selected').text()

//获取Select选择的Value

var

checkValue

=

$('#where').val()

alert('当前被选中的text='

+

checkText

+

',

value='

+

checkValue)

var

ids

=

''

var

options

=

$('#where')[0].options

for(var

i=0

i<options.length

i++){

ids

=

ids

+

'`'

+

options[i].id

}

alert('当前被选中的编号顺序为'

+

ids)

}

/**

*

添加option

*/

function

addSelectedOption(){

//添加在第一个位置

$('#where').prepend('<option

value="hbin"

id="where06">Haerbin</option>')

//添加在最后一个位置

$('#where').append('<option

value="hlj"

id="where07">HeiLongJiang</option>')

$('#where').attr('size',

7)

}

</script>

<div

id="updown">

<select

id="where"

name="where"

size="5">

<option

value="hk"

id="where01">Hong

Kong</option>

<option

value="tw"

id="where02">Taiwan</option>

<option

value="cn"

id="where03">China</option>

<option

value="us"

id="where04">United

States</option>

<option

value="ca"

id="where05">Canada</option>

</select>

</div>

<br/>

<input

type="button"

value="上移"

onclick="upSelectedOption()"/>

<input

type="button"

value="下移"

onclick="downSelectedOption()"/>

<input

type="button"

value="删除"

onclick="removeSelectedOption()"/>

<input

type="button"

value="确定"

onclick="getSelectedOption()"/>

<input

type="button"

value="添加"

onclick="addSelectedOption()"/>

---