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的更多相关文章

  1. 自定义博客cnblogs样式的必备前端小知识——css

    css样式相关小知识 文字超出一行显示省略号 overflow: hidden; /*自动隐藏文字*/ text-overflow: ellipsis; /*文字隐藏后添加省略号*/ white-sp ...

  2. 前端小知识-js

    一.对象冒充 function student(name,age){ this.name = name; this.age = age; this.show = function(){ console ...

  3. 【转】CnBlogs自定义博客样式

    文章有一个好的排版,将能够增加阅读者对其内容的兴趣. 本文总结了如何美化博客园中文章的部分显示样式. 1.美化文章标题的显示样式 2.增添LaTex数学公式的显示 3.目录索引的显示 4.添加文章末尾 ...

  4. CnBlogs自定义博客样式

    弄了半个晚上的时间,总算马马虎虎搞好了博客的样式. 整个博客是蓝色的基调,比较激情,我喜欢. 比较郁闷的是,rightmenu 和 main都是position:absolute 布局的.要添加一个f ...

  5. web前端/移动端H5博客专家博客大全--值得收藏的前端技术大牛博客地址

    web前端/移动端H5博客专家博客大全--值得收藏的前端技术大牛博客地址   Huang Jie Blog .Com-前端开发 http://www.huangjieblog.com/?feed=rs ...

  6. 【技术博客】基于vue的前端快速开发(工具篇)

    一.Vue教程 vue.js是一套构建用户界面的渐进式框架.vue采用自底向上增量开发的设计.vue的核心库只关心视图层,非常容易学习,非常容易与其它库和已有项目整合.vue完全有能力驱动采用单文件组 ...

  7. 博客CSS样式 二

    预览 可自行更改颜色 背景图 页面定制 CSS 代码中加入: url为背景图地址,可下载心仪背景图后上传到博客园相册后获取地址 body { color: #000; background: url( ...

  8. Chrome 插件自定义博客编辑界面

    总觉得博客园的编辑器太白了,特别是在晚上,太明亮了刺眼.在后台设置里面找不到任何可以修改UI的地方,考虑用浏览器插件自己改一下.要是做得好,可以给大家一起用. 新建目录 E:/cnblog.js,添加 ...

  9. vue koa2 mongodb 从零开始做个人博客(一) 登录注册功能前端部分

    0.效果演示 插入视频插不进来,就很烦.可以出门右拐去优酷看下(点我!). 1.准备工作 1.1前端框架 前端使用了基于vue.js的nuxt.js.为什么使用nuxt.js? 首先我做的是博客的项目 ...

随机推荐

  1. 浅谈Python Django框架

    1.Django简介 Python下有多款不同的 Web 框架,Django是最有代表性的一种.许多成功的网站和APP都基于Django. Django是一个开源的Web应用框架,由Python写成. ...

  2. linux scull 的内存使用

    在介绍读写操作前, 我们最好看看如何以及为什么 scull 进行内存分配. "如何"是需要全 面理解代码, "为什么"演示了驱动编写者需要做的选择, 尽管 sc ...

  3. centos7 安装R和RstudioServer版

    参考: http://www.cnblogs.com/inspursu/p/4275701.html http://blog.csdn.net/u010022051/article/details/5 ...

  4. 【HTML/CSS】BFC

    块格式化上下文(Block formatting contexts) BFC是什么? 是Web页面中盒模型布局的CSS渲染模式.它的定位体系属于常规文档流. 至少满足条件之一: float 的值不为  ...

  5. 【23.68%】【hdu 2871】Memory Control

    Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submission ...

  6. 【p082】排座椅

    Time Limit: 1 second Memory Limit: 50 MB [问题描述] 上课的时候总有一些同学和前后左右的人交头接耳,这是令小学班主任十分头疼的一件事情.不过,班主任小雪发现了 ...

  7. Linux 内核class_simple 接口

    class_simple 接口意图是易于使用, 以至于没人会抱怨没有暴露至少一个包含设备的被 分配的号的属性. 使用这个接口只不过是一对函数调用, 没有通常的和 Linux 设备模型 关联的样板. 第 ...

  8. Qt3升至Qt4需要注意的几件事项浅谈

    Qt3升至Qt4需要注意的几件事项浅谈 公司以前的项目是用Qt3写的,随着时间的推移慢慢显示出Qt3有多方面的限制,因此先公司决定用Qt4来改写这个项目,并为软件添加新功能,在此背景先编写此文章. 先 ...

  9. nor flash之频率限制

    背景 支持一款nor flash时,出于性能考虑,一般会查看其nor支持的最高频率以及主控端spi控制器的最高频率,以选择一个合适的运行频率. 对于一款主控支持多款flash的情况,还得考虑好兼容性等 ...

  10. jquery中如何判断checkbox是否选中

    jquery代码: <script> $(document).ready(function() { $('#checkbox-id').click(function() { if($('# ...