jquery替换指定位置的内容【jquery 替换】 收藏 0

Javascript应用-jQuery Ajax DOM 元素、遍历、数据操作和方法

jQuery 库拥有完整的 Ajax 兼容套件。其中的函数和方法允许在不刷新浏览器的情况下从服务器加载数据，具体如下：

jQuery 遍历函数

jQuery 遍历函数包括了用于筛选、查找和串联元素的方法。

jQuery 数据操作函数

这些方法允许我们将指定的 DOM 元素与任意数据相关联。

jQuery DOM 元素方法

jQuery 核心函数

jQuery 属性

下面列出的这些方法设置或返回元素的 CSS 相关属性。

php手把手教你做网站（十五）vue，layui多级分类，无限级分类

目标：

1. 普遍适用，1级分类、2级分类甚至更多级的分类；
2. 选择1级分类的时候，后边的select全部消失，留下2级分类显示请选择状态；
3. 也是对2的补充，如果1级分类下有2级分类，2级分类显示请请选择，反之不出现2级分类下拉框；

思路：

这里完全抛弃jquery，但是思路是一样的，只不过用jquery改变的是节点，vue改变的是data基础原始数据，只是操作对象发生改变而已。

1. 获取点击的是第几个select，开始的想法是@change=‘getid（key）’但是经过layui渲染以后，发现这里是消失的（可以F12查看），也就没有办法使用change事件，只能是select加上参数:cindex=\”索引index\”，通过form监听select获得序号；
2. 通过splice删除基础数据，data中news_cat序号后边的数据我的分类是存放到news_cat里边；
3. 指定默认选择的option编号；

图1 多级分类效果图

html代码：

select说明：:cid=\”index\”，索引也就是我们要得到的序号，lay-filter=\”myselect\” 用于layui监听select的change事件，v-model=\”item.selist.selected\” 绑定默认选中。

1、vue代码：

要写入数据库的都放到了basemysql，其他的放到外边，提交的时候只需要提交basemysql中的数据；

items用于存放下拉框的信息也就是分类的数据；

news_cat存放了添加文章的时候选择的分类；

2、使用axios获取默认选中的同级分类信息，放到了mounted () {}

1. JSON.stringify(that.basemysql.news_cat )获取news_cat初始数据转成字符串作为参数传递给/api/newscat用于作为条件获取下级分类；
2. 返回值不为空则向data赋值覆盖以前的数据，that.items=response.data;，返回的json格式包含[]，所以直接覆盖以前的；
3. layui再次渲染；

3、php代码

传递过来的参数parid格式是[分类编号]，可以直接str_replace替换掉[]，我这里使用的截取；截取或者替换以后的字符串，前边要补充0,以获得父级分类，例如：传递过来参数为2,3,5，那么同级别的下拉分类，父级编号就应该是0,2,3；

$con=\” webid=17 and parentid=\”.(int)$catarr[$i]; 按照条件读取同级别分类的下拉框，我这里是分类比较多额外多加了 webid=17限制，存入数组，转json输出即可；

$catlist[\’selected\’]=$catarr[$i+1];这里是select默认选中的编号；

4、select下拉触发事件

由于不能在select上加@change方法，这里使用layui对select的监听，<select :cid=\”index\” lay-filter=\”myselect\” v-model=\”item.selist.selected\”> lay-filter=\”myselect\” myselect可以是任意名称，只需要对应下边的监听就好。

spid=data.elem.getAttribute(\”cid\”);获取索引，也就是第几个select，这里没想到办法直接操作data数据，只能通过layui操作dom了；

获取data.value；

删除vue初始数据news_cat:[16,23,28] ，索引后边的数据；

删除初始数据items索引后边的数据；

如果data.value不为空，要获取下级分类列表，获取到的数据不为空值，通过push方法追加到items，news_cat里边；

layui再次渲染；

axios获得返回值response.data这是固定的，如果你的返回值写到了msg里边，获取就是response.data.msg

splice的用法：

删除数组数据，并返回删除数据以后的数组

splice(start,count) ,start起始位置（索引），count删除个数

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com