js动态添加与删除ul中的li

1、使用jquery脚本库，因此先引入jquery脚本文件。

2、html代码里，就是一个ul列表，里面有二个img控件，还有一个按钮。要注意的是给ul加了一个样式名。

3、使用jquery，先为按钮添加一个点击事件。

4、在点击事件函数里，我们直接使用js代码就能获取到img控件了，var imgs = $(".jy_ul li img")

这就是使用jquery的方便，ul列表的样式名，然后按层次 li img的控件名，就能获取到图片控件了。

5、用alert输入图片的src属性来验证获取到的数据是否准确。因为有两个图片控件，所以代码里获取到的是一个数组，我们输出第二个图片的src。

6、运行页面，可以看到有二个图片和一个按钮，点击按钮。

7、点击后d出了第二张图片的src属性，对比代码，数据正确。

1、使用html()

$("#id").html("<ul><li>jfoweig</li></ul>")//元素原来内容会被清空，添加html()里的内容

2、使用append()

var ul=$("<ul><li>jfeigej</li></ul>")

$("#id").append(ul)//ul会添加在元素里的最后

1)使用一个大盒子(div 将元素都装起来

2)盒子中使用2个无序标签分别搭建选项卡头部与内容

图例:

1)消除网页(盒子 默认边距

2)若无序列表中使用li标签,需要给ul添加d性盒子属性(方法不唯一)

3)给每个li标签添加鼠标cursor: pointer(鼠标指针小手)属性

4)为标题盒子(ul class=title)里的第一个子元素(li)添加颜色样式(默认为第一个子元素

5)给所有的内容盒子(ul class=content)添加此元素不会被显示的属性(display:none)

6)给内容盒子里的第一个元素添加 显示为块级元素(display: block)

图例:

点击相应的标题会显示相应的内容

1)引入jquery框架

2)获取标题(ul)中的每一项(li),并且为他们注册点击事件(-

3)点击事件里先移除之前的高亮标题样式,添加当前当前的高亮标题样式

(根据this指针的指向来添加和移除样式)

4)获取内容盒子的第一项元素

5)移除之前显示内容的样式,添加当前显示内容的样式

(根据this指针的指向来添加和移除样式,使用eq方法根据this的指向找到对应元素的索引)

注意:eq() 方法将匹配元素集缩减值指定 index 上的一个。

图例:

总结:使用jquery方法需注意:

this的指向性问题与选择器的使用问题

---