自定义博客cnblogs样式的必备前端小知识——js、jq
JQ、JS相关小知识
任意元素自动点击
$(".editicon").trigger('click')
添加子元素
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
删除、清空子元素
$(".p").empty(); //不会删除自己 //删除内部所有子节点
$(".p").remove(); //会删除自己 //删除当前子节点(绑定的不能用)
$(".p").detach(); //会删除自己 //删除当前子节点(绑定的能用)
获取图片的src属性值
var demoJQ = $('#demo');
demoJQ.attr('src')
or
demoJQ[0].src
延迟执行
setTimeout(function(){
console.log("延迟600ms 执行");
},600);
定时执行
setInterval(function(){
console.log("600ms执行一次");
}, 600)
JS打开新标签页
window.open("http://www.wlzhys.com", "_blank"); //注意第二个参数
判断字符串中是否包含某个字符串
方法一:indexOf()
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现,则该方法返回 -1。
var str = "123";
console.log(str.indexOf("3") != -1 ); // true
方法二:search()
search() 方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串。如果没有找到任何匹配的子串,则返回 -1。
var str = "123";
console.log(str.search("3") != -1 ); // true
方法三:match()
match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。
var str = "123";
var reg = RegExp(/3/);
if(str.match(reg)){
// 包含
}
页面加载完后执行JS的方式
方式一:js自带方法
<script type="text/javascript">
window.onload = function () {
//方法内容
}
</script>
方式二:jq常用方式
<script type="text/javascript">
$(function () {
alter("123qew");
})
</script>
获取当前页面URL
url = window.location.href; /* 获取完整URL */
/* http://127.0.0.1:8020/Test/index.html#test?name=test */ url = window.location.pathname; /* 获取文件路径(文件地址) */
/* /Test/index.html */ url = window.location.protocol; /* 获取协议 */
/* http */ url = window.location.host; /* 获取主机地址和端口号 */
/* http://127.0.0.1:8020/ */ url = window.location.hostname; /* 获取主机地址 */
/* http://127.0.0.1/ */ url = window.location.port; /* 获取端口号 */
/* 8020 */ url = window.location.hash; /* 获取锚点(“#”后面的分段) */
/* #test?name=test */ url = window.location.search; /* 获取属性(“?”后面的分段) */
自定义博客cnblogs样式的必备前端小知识——js、jq的更多相关文章
- 自定义博客cnblogs样式的必备前端小知识——css
css样式相关小知识 文字超出一行显示省略号 overflow: hidden; /*自动隐藏文字*/ text-overflow: ellipsis; /*文字隐藏后添加省略号*/ white-sp ...
- 前端小知识-js
一.对象冒充 function student(name,age){ this.name = name; this.age = age; this.show = function(){ console ...
- 【转】CnBlogs自定义博客样式
文章有一个好的排版,将能够增加阅读者对其内容的兴趣. 本文总结了如何美化博客园中文章的部分显示样式. 1.美化文章标题的显示样式 2.增添LaTex数学公式的显示 3.目录索引的显示 4.添加文章末尾 ...
- CnBlogs自定义博客样式
弄了半个晚上的时间,总算马马虎虎搞好了博客的样式. 整个博客是蓝色的基调,比较激情,我喜欢. 比较郁闷的是,rightmenu 和 main都是position:absolute 布局的.要添加一个f ...
- web前端/移动端H5博客专家博客大全--值得收藏的前端技术大牛博客地址
web前端/移动端H5博客专家博客大全--值得收藏的前端技术大牛博客地址 Huang Jie Blog .Com-前端开发 http://www.huangjieblog.com/?feed=rs ...
- 【技术博客】基于vue的前端快速开发(工具篇)
一.Vue教程 vue.js是一套构建用户界面的渐进式框架.vue采用自底向上增量开发的设计.vue的核心库只关心视图层,非常容易学习,非常容易与其它库和已有项目整合.vue完全有能力驱动采用单文件组 ...
- 博客CSS样式 二
预览 可自行更改颜色 背景图 页面定制 CSS 代码中加入: url为背景图地址,可下载心仪背景图后上传到博客园相册后获取地址 body { color: #000; background: url( ...
- Chrome 插件自定义博客编辑界面
总觉得博客园的编辑器太白了,特别是在晚上,太明亮了刺眼.在后台设置里面找不到任何可以修改UI的地方,考虑用浏览器插件自己改一下.要是做得好,可以给大家一起用. 新建目录 E:/cnblog.js,添加 ...
- vue koa2 mongodb 从零开始做个人博客(一) 登录注册功能前端部分
0.效果演示 插入视频插不进来,就很烦.可以出门右拐去优酷看下(点我!). 1.准备工作 1.1前端框架 前端使用了基于vue.js的nuxt.js.为什么使用nuxt.js? 首先我做的是博客的项目 ...
随机推荐
- fatal: Not a git repository (or any of the parent directories)
当从github.com上面下载下了Firmware后,无意中删除了Firmware目录下的.git文件夹,再去编译就会出现: fatal: Not a git repository (or an ...
- springboot中使用spring-session实现共享会话到redis(二)
上篇文章介绍了springboot中集成spring-session实现了将session分布式存到redis中.这篇在深入介绍一些spring-session的细节. 1.session超时: 在t ...
- Fast Stone截图工具使用教程
下面是Fast Stone的显示面板,很小巧,但功能强大 一.特殊功能 1.1 添加水印 (1)选择功能栏的"Edge" (2)将要水印的图片选中,选择水印图片的放置位置,应用即可 ...
- H3C调试信息输出的例子
- Echarts构建图表
Echarts学习-构建图表 相信有很多的前端开发人员在开发Echarts图表的过程中都遇到对图表结构过无从下手,面对一大堆的专业词汇一脸懵逼的样子,在经过了一段时间的踩坑后,终于摸索出了一套完善的学 ...
- Codevs 均分纸牌(贪心)
题目描述 Description 有 N 堆纸牌,编号分别为 1,2,…, N.每堆上有若干张,但纸牌总数必为 N 的倍数.可以在任一堆上取若于张纸牌,然后移动. 移牌规则为:在编号为 1 堆上取的纸 ...
- Linux 内核 低级 sysfs 操作
kobject 是在 sysfs 虚拟文件系统之后的机制. 对每个在 sysfs 中发现的目录, 有一个 kobject 潜伏在内核某处. 每个感兴趣的 kobject 也输出一个或多个属性, 它出现 ...
- vue-learning:24 - component - 目录
component 组件 组件的概念 Vue 组件同时也都是 Vue 实例,可接受相同的选项对象option (除了一些根级特有的选项) 和使用相同的生命周期钩子,以及模板调用方式. 组件的构建和注册 ...
- codeforces 1167B Lost Numbers
传送门:https://codeforces.com/contest/1167/problem/B 题意: 交互题:现在你有6个数4, 8, 15, 16, 23, 42组成的某种组合,你可以询问系统 ...
- SpringBoot如何优雅的使用RocketMQ
目录 SpringBoot如何优雅的使用RocketMQ SpringBoot如何优雅的使用RocketMQ MQ,是一种跨进程的通信机制,用于上下游传递消息.在传统的互联网架构中通常使用MQ来对上下 ...