jquery li 插入到ul中 jquery lt

转载

mob64ca141834d3 2023-12-12 23:08:08

文章标签 jquery li 插入到ul中 jquery 操作集合 html jQuery 文章分类 jQuery 前端开发

导言

在通过jQuery选择器获取到jQuery集合后，我们也许会想更加细致的划分集合，或者只要其中的单个元素，这时候就需要我们来用jQuery的函数对集合进行操作了。

1. 创建新HTML元素

一种典型的情况是：当需要从部获取数据时，使用Ajax后，返回的数据是JSON或者XML格式，需要我们显示为一个表格。

$('html')创建基础的html元素
* $('<div>')等价于$('<div/>')和$('<div></div>')
$('html', content)创建带有属性或事件的元素

$('<img>', {
    src:'imges/little.bear.png',
    alt:'Little Bear',
    title:'hello Bear',
    click:function(){
        alert($(this).attr('title'));
    }
}).appendTo('body');

2. 管理jQuery集合

2.1 确定集合的大小

jQuery提供了length属性，例如$('p').length

2.2 从集合获取元素

有时需要直接访问元素或者执行原生的JavaScript的操作

get(index),返回一个DOM元素，或者一个DOM元素数组
有时我们想获取一个指定元素的jQuery对象，而不是原始元素，可以用$($('p').get(2)),看起来有点奇怪，为此jQuery提供了eq()方法

方法	描述	返回
`eq(index)`	获取指定索引的元素	包含结果的`jQuery`集合
`first()`	获取集合中的第一个元素	包含结果的`jQuery`集合
`last()`	获取集合中的最后一个元素	包含结果的`jQuery`集合
`toArray()`	作为数组返回`DOM`元素的集合	以js数组的形式返回集合中的`DOM`元素
`index(element)`	反向操作确定集合中元素的索引值	集合中元素的索引值，没有找到，返回`-1`
`index()`	无参的，可以查找父节点中元素的索引(兄弟节点)	其在兄弟节点中的索引

index()无参的:

<ul id = "main-menu">
    <li id ="home-link"><a href="">sss</a></li>
    <li id = "pro-link"><a href="">www</a></li>
    <li id = "blog-link"><a href="">blog</a></li>
</ul>
var index = $('#blog-link').index();//结果是2

2.3 使用关系获取集合

jQuery允许根据DOM元素之间的层级关系获取新的集合

方法	描述
`parents([selector])`	以集合形式返回集合中所有元素的唯一祖先，结果既有直接父节点也有其他高级节点，如果设置选择器，则返回匹配的祖先节点
`parent([selector])`	返回集合中所有元素的直接父节点元素，结果以集合形式返回，如果设置选择器，则返回匹配的祖先节点
`find(selector)`	返回集合中每个元素的子节点作为一个集合
`nextUtil([selector[,filter]])`	返回指定元素的兄弟元素，但不包括匹配选择器的元素
`prev([selector])`	返回匹配元素的的直接前兄弟节点的集合，如果设置选择器，则只会选择匹配的前兄弟节点元素
`children([selector])`	返回集合中元素的所有子元素，过滤选择器的参数可选
`closest([selector])`	返回包含匹配指定选择器的每个元素最近上级节点的集合
`siblings([selector])`	以集合形式返回集合中元素的兄弟节点，元素可以被选择器过滤

2.4 分割集合

一旦有了集合，那么或许想通过添加或者删除来调整集合中的元素，那么就需要分割集合

方法	描述
`add(selector)`	创建`jQuery`对象，并且添加`selector`到指定元素到集合中，参数可以是多种
`addClass()`	接收一个样式名作为参数，然后把样式添加给集合中的元素
`not(selector)`	创建不包含选择器参数匹配元素的新集合，如果传递的是函数，那么会根据每个元素来执行函数，如果返回`true`删除元素
`filter(selector)`	和`not()`类似，只不过当不匹配时会删除元素，也就是返回`false`删除元素
`slice(start[,end])`	创建并返回匹配集合中部分元素的新集合
`has(selector)`	创建并返回新的集合，只包含匹配`selector`选择器的子元素
`map(callback)`	在集合中的每个元素上调用`callback`函数，返回到一个`jQuery`对象中
`each(iterator)`	遍历集合中的每个元素，然后为每个元素调入传入的迭代器函数

map():查询包含所有ID的jQuery对象，返回js数组

var $allIds = $('div').map(function(){
    return this.id;
}).toArray();

each():为匹配集合中的每一个元素设置一个属性值

$('img').each(function(i){
    this.alt = 'this is image['+ i +']with an id of' + this.id
})

2.5 集合的其他方法

方法	描述
`is(selector)`	确定集合中是否有元素匹配给定的选择器，包含返回`true`，不包含返回`false`
`end()`	在链式调用中使用该方法，可以将匹配的集合返回到之前的状态
`addBack([selector])`	把栈上前一个集合的元属添加到当前集合里，可以选择性提供选择器参数