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

简介: 自定义博客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; /* 获取属性(“?”后面的分段) */


相关文章
|
1月前
|
前端开发 数据安全/隐私保护
.自定义认证前端页面
.自定义认证前端页面
10 1
.自定义认证前端页面
|
20天前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
17天前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
19天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
28 5
|
17天前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
47 1
|
21天前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
31 4
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
1月前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
31 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
1月前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
41 1
|
1月前
|
JavaScript 前端开发 API
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
31 1