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

Posted 阿菠萝阿瑶

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了自定义博客cnblogs样式的必备前端小知识——jsjq相关的知识,希望对你有一定的参考价值。

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样式的必备前端小知识——jsjq的主要内容,如果未能解决你的问题,请参考以下文章

自定义博客样式

两分钟搞定博客园自定义样式

博客园自定义样式(去广告公告栏加头像按钮样式)

博客园自定义样式

前端三件套——CSS基础网页开发必备知识

博客园自定义样式编辑