扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
不能触发click事件最常见的三种情况:
成都创新互联主要从事网页设计、PC网站建设(电脑版网站建设)、wap网站建设(手机版网站建设)、成都响应式网站建设、程序开发、网站优化、微网站、小程序开发等,凭借多年来在互联网的打拼,我们在互联网网站建设行业积累了丰富的网站设计、做网站、网站设计、网络营销经验,集策划、开发、设计、营销、管理等多方位专业化运作于一体。
选择器使用错误,没有选择到标签;(请分享html代码分析);
标签比jquery方法慢加载,也就是 先加载的方法 , 后加载的标签;解决方法(将script标签与js方法 写在页面的底部 也就是 body 标签的下面)或者如下代码
!DOCTYPE html
html
head
meta charset="utf-8"
script src="js/jquery-1.9.1.min.js"/script
script
$(document).ready(function(){
$(".test").click(function(){
alert("333");
});
});
/script
title点击事件测试/title
/head
body
button class="test" 点击弹出/button
/body
/html
jquery文件或者js文件 导入路径错误或者没有导入 (新手低级错误);
(纯手打,求采纳,已测试代码。梦魂清风 @author:dream breeze)!!
可以看张晓菲的《锋利的jQuery》,重点是自己理解函数用法并自行实现一些常用的效果。
如果需要快速查阅可以用这个api,每个函数都附有简单的示例: (注:这个jQuery库的版本不是最新的delegate等函数在这儿查不到。欢迎补充别的api~)
jQuery侧重点就是选择器和基本的DOM操作,还有一些动画操作,但是js中非DOM操作的部分基本没有涉及。
其实jQuery的门槛很低,我在看jQuery的时候对原生js的东西也知之甚少,在看的过程中遇到不会的多求助搜索引擎,多尝试,当然最好做一下笔记。
测试代码推荐直接在jsfiddle上测试,左侧你可以自行选择需要的jQuery库版本:
//=======================
有一点需要注意,jQuery只是工具,jQuery学的再好也无法替代原生的js,比如jQuery翻遍了你也不会知道
JavaScript语言中共有几种基本类型
什么是原型
什么是闭包
什么是原型链,作用域链
js只有函数作用域,没有块作用域该怎么理解
之于上面的问题,需要再去阅读js的基础书籍:《JavaScript权威指南》,《JavaScript高级程序设计》,《JavaScript语言精粹》等
本文实例讲述了jQuery实现模糊查询的方法。分享给大家供大家参考,具体如下:
需求:list列表内容很多,用户需要找出列表内容中的某些条目,只有当与用户输入值匹配的条目才显示出来。(后台无分页,直接异步接口返回数据添加形成的内容列表)
虽然可以通过传参再调用查询出来,但这里主要记录的是前端处理进行模糊查询而无需再次调用接口的实现方法。
html部分:
div
class="search-form"
input
type="text"
placeholder="请输入关键词"
span
class="icon-clear"/span
/div
div
class="content"
div
class="title
row
no-gutter"
div
class="col-20"列表一/div
div
class="col-20"列表二/div
div
class="col-20"列表三/div
div
class="col-20"列表四/div
div
class="col-20"列表五/div
/div
div
class="list-content"
ul
li
div
class="code"00001/div
div
class="name"内容1/div
div内容2/div
div内容3/div
div内容4/div
/li
li……/li
/ul
/div
/div
js部分:
queryList:
function(){
$(".search-input").on("input
propertychange",
function()
{
var
queryStr
=
$.trim($(".search-input").val());
if(queryStr
===
''){
$(".list-content
li").show();
}else{
//
以下是匹配某些列的内容,如果是匹配全部列的话就把find()和.parent()去掉即可
$(".list-content
li").hide().find(".code,
.name").filter(":contains('"+queryStr+"')").parent("li").show();
//$(".list-content").refresh();
//重新刷新列表把隐藏的dom结构去掉。
}
});
}
分析:以上即实现了前端js的模糊查询功能啦,哈哈。代码中监听事件中多加了input,据说是为兼容iOS的,具体没测试,有哪位大神测试了可以告知一声哈,谢谢了。
还有个问题就是,以上实现方法,当列表内容多大几千条数目或者更多时,表单输入时会出现卡顿的情况,因为要通过js操作大量的DOM结构啊(隐藏或显示),PC上或许情况还没有那么严重,在手机上测试时那真的是“怎一个卡字了得”,如果哪位大神有更好的法子,还望加以完善!
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
您可能感兴趣的文章:jQuery实现select模糊查询(反射机制)jQuery基于xml格式数据实现模糊查询及分页功能的方法jQuery实现id模糊查询的小例子jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例jquery
zTree异步加载、模糊搜索简单实例分享jquery
ztree实现模糊搜索功能jquery
easyui
combobox模糊过滤(示例代码)jQuery实现多级联动下拉列表查询框JQuery+Ajax实现数据查询、排序和分页功能jquery处理页面弹出层查询数据等待操作实例
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流