文档章节

后端管理系统中常用前端知识/功能

Anymore
 Anymore
发布于 2017/09/06 23:03
字数 802
阅读 23
收藏 1
点赞 0
评论 0

1.DOM操作;

1.1查找节点

<div id="dom_1">1.id选择器</div>
<script>
$('#dom_1').css('color','red');
</script>
<div class="dom_2">2.类选择器</div>
<script>
$('.dom_2').css('color','green');
</script>
<div>3.父、子、兄弟节点查找</div>
<ul class="dom_3">
    <li>第1个子节点</li>
        <li class="child_2">第2个子节点</li>
    <li>第3个子节点</li>
</ul>
<script>
$('.dom_3').find('.child_2').css('color','red');//查找已知类名子节点
var len = $('.dom_3').children().length;
$(".dom_3 li").eq(2).css({"color":"green"});//查找已知索引子节点,索引从0开始
$('.child_2').parent().css({"font-size":"26px"});//查找父节点

$('.child_2').siblings().css('background-color','blue');   //当前元素所有的兄弟节点
$('.child_2').prev().css('background-color','blue');       //当前元素前一个兄弟节点
$('.child_2').prevAll().css('background-color','blue');  //当前元素之前所有的兄弟节点
$('.child_2').next().css('background-color','blue');       //当前元素之后第一个兄弟节点
$('.child_2').nextAll().css('background-color','blue');    //当前元素之后所有的兄弟节点
</script>

1.2删除节点

<div>4.删除节点</div>
<ul class="dom_4">
    <li title="one">第1个子节点</li>
    <li class="child_2" title="two">第2个子节点</li>
    <li title="three">第3个子节点</li>
</ul>
<script>
     var $li=$(".dom_4 li:eq(1)").remove();//删除ul节点中第2个元素节点
     $(".dom_4").append($li);//把刚删除的元素节点从新添加到ul元素中去
     $(".dom_4 li").remove("li[title!=three]");//将ul元素下title属性不等于"three"的li元素删除
</script>

1.3插入节点

<div>5.插入节点</div>
p:<p class="dom_5"></p>
<script>
    $(".dom_5").append("<span>A</span>");
    $("<span>B</span>").appendTo(".dom_5");
    $(".dom_5").prepend("<span>C</span>");//前置追加
    $("<span>D</span>").prependTo(".dom_5");
    $(".dom_5").after("<span>E</span>");
    $("<span>F</span>").insertAfter(".dom_5");
    $(".dom_5").before("<span>G</span>");
    $("<span>H</span>").insertBefore(".dom_5");
</script>

1.4替换节点

<div>6.替换节点</div>
<p class="dom_6">元素:<span>原来文本</span></p>
<script>
    $(".dom_6 span").replaceWith("<strong>替换文本</Strong>");
</script>

//另:替换文本内容可以使用.html()和.text()方法,但是尽量少用.html()方法,会使网站容易受到XSS攻击

2.数据收集;

说明:form表单中当有button时,就算type没有设置为submit,也会把这个按钮当成提交按钮
并在点击时触发form提交事件,阻止表单默认提交可以:
<form name="enquiry-user" onsubmit="return false;"></form>
//获取单个输入框的值
var cellphone = $('.cellphone').val();
//设置input的值
$('.cellphone').val(‘123456789’);
//type=hidden
<input type="hidden" class="itemId">
//document.querySelector(html5选择器)收集数据
    var form, inputArray, i, params, e;
    form = document.querySelector("#enquiry-user");
    inputArray = form.querySelectorAll('.field');
    params = {};
    for (i = 0; i < inputArray.length; i++) {
        e = inputArray[i];
        params[e.name] = e.value;
    }
   console.log(params);
//serializeArray收集数据
function form2Json(){
	var arr_all = $("#myForm").serializeArray();
	var json = {};
	for (var i = 0; i < arr_all.length; i++) {
		var item = arr_all[i];
		json[item.name] = item.value;
		}
        return JSON.stringify(json);
 }	

3.数据传输(ajax、调试);

        $.ajax({
            url: URL,
            type: "GET",
            headers: {
                Accept: "application/json;"
            },
           aynsc:true,//异步
            dataType: 'json',
            success: function (data) {
                console.log(data);
            }
        });
//注:这并不是原生ajax,而是jquery封装的ajax方法
$.get("YOUR-URL", {}, callBack, "json");
//1.跨域问题
//2.调试,如何打断点,测试网站:http://web.dev.songchechina.com/

4.数据解析或加工(对象、数组);

5.数据渲染(前端模板引擎);

6.常用功能;

© 著作权归作者所有

共有 人打赏支持
Anymore
粉丝 4
博文 55
码字总数 25382
作品 0
塘沽
前端工程师
【掘金小报】第十四期 坚持完成这套学习手册,你就可以去 Google 面试了

掘金小报主打分享优质深度技术内容,技术内容分:前端、后端、Android、iOS、产品设计、工具资源和一些有趣的东西。 与标题相关的文章为:[译] Google Interview University - 坚持完成这套学...

膜法小编 ⋅ 2017/05/15 ⋅ 0

shenzhanwang/SSM

SSM SpringMVC,Mybatis,Spring三大框架的整合总是很麻烦,在此提供一个已经整合好三大框架的包,可以直接下载导入Myeclipse使用,项目基于Maven做依赖管理。项目基于Mysql自带的Sakila数据库...

shenzhanwang ⋅ 2016/11/16 ⋅ 0

关于前端 - 收藏集 - 掘金

十分钟-Nginx入门到上线 - 掘金 前言 新书Java并发编程系统与模型已上线,欢迎拜读。   由于微信小程序要使用Https,但是又不能修改已有线上的配置。所以最简单的方法就是使用nginx转发,在...

掘金官方 ⋅ 2017/08/02 ⋅ 0

开源的在线客服平台--PPMessage

PPMessage - 皮皮消息,即插即用,在线客服,移动应用内即时通讯,私有的·微信·,自建的·钉钉·,开源,纯Python实现。 PPMessage 是一个开源的在线客服平台。PPMessage能够帮助你在第一时...

dingguijin ⋅ 2016/05/04 ⋅ 15

spring boot restful + react antd

这阵子由于任务要求,使用了spring boot 搭建restful api服务,前端用了tb的antd pro 框架 记录一下其中的几个容易忘的知识点,想到了就记下来 随时补充,主要是为了以后自己随时翻阅的。各位...

Wantobetter ⋅ 06/05 ⋅ 0

vue-quasar-admin 一个包含通用权限控制的后台管理系统

vue-quasar-admin   Quasar-Framework 是一款基于vue.js开发的开源的前端框架, 它能帮助web开发者快速创建以下网站:响应式网站,渐进式应用,手机应用(通过Cordova),跨平台应用(通过Ele...

若邪 ⋅ 05/17 ⋅ 0

在对比中理解 Node

之前知识星球有同学问道了这样一个问题:Node 环境和浏览器环境有什么区别?这样的思考很值得鼓励,在对比中学习,很容易将一个抽象的知识具象化。当时的回答只是简单的画了个图,感觉有必要...

小虫巨蟹 ⋅ 2017/10/04 ⋅ 0

Node.js 快速开发框架--ibird

简介 ibird是一套基于Node设计的应用构建方案,它包含了从项目开发到部署上线的全套流程设计。ibird选择MongoDB作为应用数据库,选择Redis作为缓存工具,使用Docker作为应用部署方案。 ibir...

yinfxs ⋅ 2017/05/30 ⋅ 1

荔枝(lychee)后台管理系统 5 月 11 日正式发布

荔枝(lychee)后台管理系统基于 Layui 1.0.9 实现,lychee 取 Layui 中的 ly,恰好荔枝(lychee)含 ly 开头,那就叫 lychee 后台管理系统模板咯。 lychee 后端使用 Jboot+Beetl+MySQL,前端...

IT小香猪 ⋅ 05/11 ⋅ 0

创视/WidgetsPlayground

WidgetsPlayground 前端组件管理系统,前端基于Vue2/Vue-router/Vuex实现,界面基于Flow-UI实现,后端基于野狗云实现 功能 组件管理 二级分类 标签筛选 时间/名称排序 关键词搜索 组件演示 ...

创视 ⋅ 2016/12/12 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

jsonrpc-4j代码解析

解析文件 AutoJsonRpcServiceImplExporter JsonServiceExporter AutoJsonRpcServiceImplExporter 路径:com.googlecode.jsonrpc4j.spring.AutoJsonRpcServiceImplExporter AutoJsonRpcServi......

郭恩洲_OSC博客 ⋅ 38分钟前 ⋅ 0

百度搜索

from selenium import webdriver import time brower=webdriver.Firefox() brower.get('http://www.baidu.com') input=brower.find_element_by_id('kw') input.send_keys('中南大学') time.s......

南桥北木 ⋅ 45分钟前 ⋅ 0

tomcat 日志记录器

1、日志记录器是记录消息的组件 日志记录器需要与某个servlet 容器相关联 2、Logger 接口 共定义了5种日志级别:FATAL、ERROR、WARNING、INFORMATION、DEBUGGER setVerbosity 设置级别 setC...

职业搬砖20年 ⋅ 46分钟前 ⋅ 0

Thrift RPC实战(三) Thrift序列化机制

1.Thrift基础架构 Thrift是一个客户端和服务端的架构体系,数据通过socket传输; 具有自己内部定义的传输协议规范(TProtocol)和传输数据标准(TTransports); 通过IDL脚本对传输数据的数据结构...

lemonLove ⋅ 46分钟前 ⋅ 0

网站建设就要像2018世界杯的俄罗斯队大杀四方[图]

今天心情不错,因为昨天晚上观看了世界杯比赛,尤其是对俄罗斯队的大杀四方感到十分霸气侧漏啊,因此我联想到了自己的博客网站,我的博客是去年年底上线的,一直想建设一个关于读书和读后感作...

原创小博客 ⋅ 55分钟前 ⋅ 0

Greenplum 三节点安装教程(非root用户)

Greenplum 三节点安装教程(非root用户) 环境准备 安装vmware,装三台centos 虚拟机设置: 主机名 IP 内存 硬盘 node1 Xxx1 2G 80G node2 Xxx2 2G 80G node3 Xxx3 2G 80G CSDN下载greenplum...

仔仔1993 ⋅ 56分钟前 ⋅ 0

linux 信号机制

signal(SIGPIPE, SIG_IGN); TCP是全双工的信道, 可以看作两条单工信道, TCP连接两端的两个端点各负责一条. 当对端调用close时, 虽然本意是关闭整个两条信道, 但本端只是收到FIN包. 按照TCP协...

xxdd ⋅ 57分钟前 ⋅ 0

SpringWind

环境搭建和系统部署

颖伙虫 ⋅ 今天 ⋅ 0

vim命令用法

第五章 vim命令 vim和vi几乎是一样的,唯一的区别就是当编辑一个文本时,使用vi不会显示颜色,而使用vim会显示颜色。 vim有三个模式:一般模式,编辑模式,命令模式。 系统最小化安装时没有安...

弓正 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部