博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery 知识整理
阅读量:7027 次
发布时间:2019-06-28

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

大纲

一、jQuery简介
二、jQuery 和Dom关系及jQuery版本
1、jQuery版本
2、jQuery和Dom转换
三、jQuery 选择器
1.1、基本
1.2、层级
2、基本筛选器
3、属性选择器
4.1、表单
4.2、表单对象属性
四:jQuery 示例
1、示例:全选、反选、取消
2.1、筛选器示例:左侧菜单点击展开内容
2.2、筛选器
3.1、jQuery 文本、样式以、属性、文档处理操作
3.2、示例:模态对话框
4、示例:tab切换菜单
5、示例:点赞以及jQuery css操作
6、示例:拖动面板以及位置操作
7.1、jQuery绑定事件及示例
7.2、JQuery事件之阻止事件发生 及示例:表单验证
五、jQuery 扩展

一、jQuery简介

 

jQuery分为两部分:

  • 查找元素
  • 操作元素

二、jQuery 和Dom关系及jQuery版本

1、jQuery版本

当前jQuery版本:这里使用的1.x系列最新版本

1.x系列 兼容性最好,1系列当前最新1.12

2.x系列
3.x系列 最新的版本,IE低版本不再支持

下载的时候有两个版本:一个标准版、一个min压缩版。测试时使用标准版,线上建议使用压缩版。

下载后,引入jQuery类库:

    

 

2、jQuery和Dom转换

> $('#i1')     // jQuery获取[]> document.getElementById('i1')  // dom获取> $('#i1')[0]  // jQuery对象转换为dom对象> $(document.getElementById('i1')) // dom对象转换为jQuery对象[]// 转换:    // jquery对象[0]   => Dom对象    // Dom对象         => $(Dom对象)

 

三、jQuery 选择器

1.1、基本

    1. id 选择器

      $('#id')

    1. class 选择器

      <div class='c1'></div>

      $(".c1")

    1. 标签 选择器

      <a>f</a>

      $('a')

    1. 组合

      $(' a, .c1, #i10 ')

1.2、层级

  • $(‘#i10 a’) 子子孙孙(i10里所有a标签)
  • $(‘#i10>a’) 儿子(只取子标签里的a标签)
  • prev + next 下一个标签
  • prev ~ siblings 兄弟标签

2、基本筛选器

:first          // 获取匹配的第一个元素:last:not(selector)  //去除所有与给定选择器匹配的元素// 在jQuery 1.3中,已经支持复杂选择器了(例如:not(div a) 和 :not(div,a)):even           // 匹配所有索引值为偶数的元素,从 0 开始计数:odd            // 匹配所有索引值为奇数的元素,从 0 开始计数:eq(index)      :gt(index)      :lt(index) // 等于           大于          小于:header         // 匹配如 h1, h2, h3之类的标题元素

 

3、属性选择器

之前的内容,没有对自定义属性进行查找的,如:<a fgf='22'></a>

jQuery 支持对自定义属性的获取查找

$('[fgf]')       // 具有fgf属性的所有标签$('[fgf="22"]')  // fgf属性等于22的标签[attribute!=value][attribute^=value][attribute$=value][attribute*=value][attrSel1][attrSel2][attrSelN]

 

4.1、表单

 

$("input[type='text']")    // 不使用表单选择器,也能实现$(':text')             // 使用表单选择器

 

4.2、表单对象属性

:enabled        // 可编辑,默认就是:disabled       // 不可编辑:checked        // 被选中(单选框、复选框):selected       // 被选中(下拉框)

 

四:jQuery 示例

1、示例:全选、反选、取消

相关知识点:

- 选择器- .prop    $('#tb:checkbox').prop('checked');        获取值    $('#tb:checkbox').prop('checked', true);  设置值- .each    jQuery方法内置循环: $('#tb:checkbox').xxxx- $('#tb:checkbox').each(function(k){
// k当前索引 // this,DOM,当前循环的元素 $(this) })- 三元运算 var v = 条件 ? 真值 : 假值
                
选项 IP PORT
1.1.1.1 80
1.1.1.1 80
1.1.1.1 80

2.1、筛选器示例:左侧菜单点击展开内容

筛选器:

$(this).next()         // 下一个$(this).prev()         // 上一个$(this).parent()       // 父$(this).children()     // 孩子$('#i1').siblings()    // 兄弟(不包含自己)$('#i1').find('#i1')   // 子子孙孙中查找

 

添加移除样式:

$('#i1').addClass(..)  // 添加样式$('#i1').removeClass(..)// 移除样式

示例:

        
标题一
内容
标题二
内容
标题三
内容

 

2.2、筛选器

$('#i1').next()				// 下一个			$('#i1').prev()    //往上找$('#i1').nextAll()			// 下面所有		   $('#i1').prevAll()$('#i1').nextUntil('#ii1')	// 下面直到哪里	 $('#i1').prevUntil('#ii1')$('#i1').parent()          // 父标签$('#i1').parents()         // 取得一个包含着所有匹配元素的祖先元素的元素集合$('#i1').parentsUntil()        //查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。$('#i1').children()$('#i1').siblings()$('#i1').find()$('li').eq(1)   <——>  $('li:eq(1)')first()last()hasClass(class)

 

3.1、jQuery 文本、样式以、属性、文档处理操作

  • 文本操作:
$(..).text()            // 获取文本内容$(..).text("1")  // 设置文本内容$(..).html()           // 获取$(..).html("1")  // 设置$(..).val()                // 获取$(..).val(..)          // 设置

 

  • 样式操作:

addClass

removeClass
toggleClass 比如实现网页开关灯功能

开关灯示例:

                
asdfasdf

 

  • 属性操作:
// 专门用于做自定义属性$(..).attr('n')          // 获取$(..).attr('n','v')      // 设置$(..).removeAttr('n')    // 删除// 专门用于chekbox,radio  jQuery1、2版本checkbox使用attr的话有bug,所以用prop$(..).prop('checked')$(..).prop('checked', true)

 

  • 文档处理:
append    // 往后加prepend   // 往前加after     // 紧挨着后面before    // 紧挨着前面remove    // 删除empty     // 只清空内容clone     // 克隆一份数据

 

3.2、示例:模态对话框

    
Title 添加
1.1.1.11 80 80 编辑 | 删除
1.1.1.12 80 80 编辑 | 删除
1.1.1.13 80 80 编辑 | 删除

4、示例:tab切换菜单

    
Title
内容一
内容二
内容三

 

上面是通过自定义属性实现的,下面不用自定义属性,用索引也能实现。

index 获取索引位置

    
Title
内容一
内容二
内容三

 

5、示例:点赞以及jQuery css操作

Query css处理操作

$('t1').css('样式名称', '样式值')            点赞:                 - $('t1').append()                 - $('t1').remove()                 - setInterval                 - 透明度 1 》 0                 - position                 - 字体大小,位置

 

点赞示例

    
Title

 

6、示例:拖动面板以及位置操作

  • 位置操作:
$(window).scrollTop()   // 获取windows滑轮位置  // 注意是谁的滑轮$(window).scrollTop(0)  // 设置windows滑轮位置scrollLeft([val])       // 左右滚动滑轮设置$('#i1').offset()      // 获取标签位置offset().left           // 指定标签在html中的坐标位置offset().top            // 指定标签在html中的坐标位置
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

 

7.1、jQuery绑定事件及示例

  • 绑定事件知识点:
// DOM: 三种绑定方式  // jQuery:四种    // 第一种:    $('.c1').click()    $('.c1').....    // 第二种:    $('.c1').bind('click',function(){
// 绑定 }) $('.c1').unbind('click',function(){
// 解绑 }) // 第三种:*******有特殊功能,看示例(一开始并没有绑定事件,当点击的时候才给绑定事件) $('.c').delegate('a', 'click', function(){
// 绑定、委托 }) $('.c').undelegate('a', 'click', function(){
// 解绑 }) // 第四种:上面调用的实际上都是这种 $('.c1').on('click', function(){
}) $('.c1').off('click', function(){
})

 

  • 示例:添加内容,并自动绑定事件
                  
  • 1
  • 2

 

7.2、JQuery事件之阻止事件发生 及示例:表单验证

a标签是不是默认有个onclick事件,如果再给绑定一个onclick事件会怎么样?

默认:先执行绑定事件,在执行a标签的默认事件。

阻止事件发生    return false# 当页面框架加载完成之后,自动执行$(function(){    $(...)})

示例:

    
走你1
走你2

 

  • 示例:表单验证
    
Title

 


五、jQuery 扩展

如果想自定义jQuery功能,可以如下定义:

  • $.extend $.方法
  • $.fn.extend $(..).方法
        

 

如果引入第三方jQuery扩展,全局变量、扩展名,可能重复,因此使用还是都定义自执行函数。

(function (arg) {
var status = 1; arg.extend({ 'name': function () {
return 'fgf'; } });})(jQu$ery);

 

转载于:https://www.cnblogs.com/ziyide/p/9095804.html

你可能感兴趣的文章
Swift - 06 - 数值类型转换和类型别名
查看>>
华为3G模块EM770W在LINUX下的驱动安装
查看>>
omnet++4.0安装使用
查看>>
Jquery JSOPN在WebApi中的问题
查看>>
[React Testing] Conditional className with Shallow Rendering
查看>>
a or an
查看>>
Coursera课程《大家的python》(Python for everyone)课件
查看>>
PHP程序猿必须学习的第二课——站点安全问题预防
查看>>
2016第5周三
查看>>
Spring学习10-SpringMV核心组件2及SpringMVC项目示例
查看>>
hdu 5620 KK's Steel(推理)
查看>>
(笔记)电路设计(十五)之基本电路单元的认识
查看>>
nginx 日志获取不到远程访问ip问题解决
查看>>
有若干个字符串,比較找出当中最大者
查看>>
开源 免费 java CMS - FreeCMS2.0 会员我的评论
查看>>
Servlet 工程 web.xml 中的 servlet 和 servlet-mapping 标签 《转载》
查看>>
数据库读写分离的初步理解
查看>>
[转]window下使用SetUnhandledExceptionFilter捕获让程序的崩溃
查看>>
Codeforces Beta Round #9 (Div. 2 Only) A. Die Roll 水题
查看>>
代码的组织机制
查看>>