博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Python菜鸟之路:JQuery基础
阅读量:6087 次
发布时间:2019-06-20

本文共 4993 字,大约阅读时间需要 16 分钟。

前言

  JQuery可以理解为是一个模块,里边封装了DOM以及JavaScript,可以方便的对JQuery对象进行操作。

版本

  尽量选择1.X系统的Jquery版本,例如1.12.jquery.js。因为1.X系列的兼容性最好。

  2.X系列的版本,不再考虑兼容IE9以下的版本。

JQuery操作

  Ps:具体操作参考链接:http://www.php100.com/manual/jquery/index.html。本文不会有太多举例,仅作小结。

查找-选择器

  JQuery的选择器常用的有以下几种:

- ID选择器            - 标签选择器            - 类选择器            - 组合选择器            - 层级选择器            - 基本筛选器$('#i1:first')            - 属性选择器

查找-筛选器

  筛选器其实是对于选择器的一个补充,用来进一步筛选对象

操作

操作CSS
addClass(class|fn)removeClass([class|fn])toggleClass(class|fn[,sw])
操作属性
attr(name|pro|key,val|fn)removeAttr(name)prop(n|p|k,v|f)removeProp(name)
文本操作
内部插入append(content|fn)appendTo(content)prepend(content|fn)prependTo(content)外部插入after(content|fn)before(content|fn)insertAfter(content)insertBefore(content)包裹wrap(html|ele|fn)unwrap()wrapAll(html|ele)wrapInner(html|ele|fn)替换replaceWith(content|fn)replaceAll(selector)删除empty()remove([expr])detach([expr])复制clone([Even[,deepEven]])

事件

1. 基本事件

blur([[data],fn])change([[data],fn])click([[data],fn])dblclick([[data],fn])error([[data],fn])focus([[data],fn])focusin([data],fn)focusout([data],fn)keydown([[data],fn])keypress([[data],fn])keyup([[data],fn])mousedown([[data],fn])mouseenter([[data],fn])mouseleave([[data],fn])mousemove([[data],fn])mouseout([[data],fn])mouseover([[data],fn])mouseup([[data],fn])resize([[data],fn])scroll([[data],fn])select([[data],fn])submit([[data],fn])unload([[data],fn])

2.  当文档加载完毕后,自动执行

$(function(){				...			});

3. 延迟绑定

    
事先绑定
    
  • 123
  • 456
  • 789
延迟绑定

JQuery扩展的两种方法、即“插件机制”

  自定义JQuery扩展的正确方法主要包含两要素:自执行、闭包  

 方法1:扩展 “$” 的方法

$.extend({        'function_name1': function(arg){};        'function_name2': function(arg){};      })

  调用方法:

$.function_name1(arg);

  实际案例:改造上边的表单验证,最终以扩展方法实现绑定事件

1  2  3  4     
5 6 26 27 28 29
30
31
32
33
34
35
36
37
38
39
40
41
42 43
44 45 46 47 54 55
HTML部分
1 /** 2  * Created by ACER on 2016/8/28. 3  */ 4 (function(jq){ 5  6     function ErrorMessage(inp,message){ 7         var tag = document.createElement('span'); 8         tag.innerText = message; 9         inp.after(tag);10     }11 12     jq.extend({13         valid:function(form){14             // #form1 $('#form1')15             jq(form).find(':submit').click(function(){16 17                 jq(form).find('.item span').remove();18 19                 var flag = true;20                 jq(form).find(':text,:password').each(function(){21 22                     var require = $(this).attr('require');23                     if(require){24                         var val = $(this).val();25 26                         if(val.length<=0){27                             var label = $(this).attr('label');28                             ErrorMessage($(this),label + "不能为空");29                             flag = false;30                             return false;31                         }32 33                         var minLen = $(this).attr('min-len');34                         if(minLen){35                             var minLenInt = parseInt(minLen);36                             if(val.length
JS部分:扩展自定义方法

方法2:对选择器结果执行方法的扩展,也就是对选择器的选择结果的对象,进行方法扩展。适用于需要传递选择器参数的时候

$.fn.extend({        'function_name1': function(arg){//this是特殊值,代指选择器结果};        'function_name2': function(arg){};      })

  调用方法:

$(选择器).function_name1(arg);

Ajax

  偷偷发请求(后续待补)

循环

要点:

    在JQuery的循环中,有一点和Python中有些不同。在Python中,如果遇到“return”,无论有没有返回值,函数都将终止执行。

  但是在JQuery中,如果出现单独的“return”,则相当于continue,仅仅是跳过本次循环。当return 有返回值的时候,相当于break,函数会终止执行

选择器

基本选择器

#id

  作用:根据给定的ID匹配一个元素

测试代码:

id="notMe"

# 普通id类型
id="myDiv"
# 带有特殊符号的id类型

方式1:查找普通ID

$("#myDiv");

方式2:查找带有特殊字符(如 !"#$%&'()*+,./:;<=>?@[\]^`{|}~)的ID, 它必须被两个反斜杠转义:\\

$("#foo\\[bar\\]")

 

转载于:https://www.cnblogs.com/jishuweiwang/p/5774119.html

你可能感兴趣的文章
php中的短标签 太坑人了
查看>>
[译] 可维护的 ETL:使管道更容易支持和扩展的技巧
查看>>
### 继承 ###
查看>>
数组扩展方法之求和
查看>>
astah-professional-7_2_0安装
查看>>
函数是对象-有属性有方法
查看>>
uva 10107 - What is the Median?
查看>>
Linux下基本栈溢出攻击【转】
查看>>
c# 连等算式都在做什么
查看>>
使用c:forEach 控制5个换行
查看>>
java web轻量级开发面试教程摘录,java web面试技巧汇总,如何准备Spring MVC方面的面试...
查看>>
使用ansible工具部署ceph
查看>>
linux系列博文---->深入理解linux启动运行原理(一)
查看>>
Android反编译(一) 之反编译JAVA源码
查看>>
结合当前公司发展情况,技术团队情况,设计一个适合的技术团队绩效考核机制...
查看>>
python-45: opener 的使用
查看>>
cad图纸转换完成的pdf格式模糊应该如何操作?
查看>>
Struts2与Struts1区别
查看>>
网站内容禁止复制解决办法
查看>>
Qt多线程
查看>>