jQuery基础
一、jQuery简介
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的javascript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
模块 《=》类库
DOM/BOM/JavaScript的类库，所以jQuery也分为两部分：
- 查找元素
- 操作元素
二、jQuery和Dome关系以及jQueryv版本
1.jQuery版本
当前jQuery版本：这里使用的1.x系列最新版本
- 1.x系列 兼容性最好，1系列当前最新1.12
- 2.x系列
- 3.x系列 最新的版本，IE低版本不再支持
下载的时候有两个版本：一个标准版、一个min压缩版。测试时使用标准版，线上建议使用压缩版。
载后，引入jQuery类库：
<head> <link rel="stylesheet" href="1.css"> <!--引入css文件--> <style> /* 写css样式 */ </style> <script src="jquery-1.12.4.js"></script> <!--引入jQuery类库，JavaScript一般放到body尾部--> <script> // script 代码。调用使用 jQuery.xxx // jQuery.xxx <==> $.xxx $等同于jQuery关键字 </script> </head>
2.jQuery和Dom转换
> $('#i1') // jQuery获取 [<input type="text" id="i1">] > document.getElementById('i1') // dom获取 <input type="text" id="i1"> > $('#i1')[0] // jQuery对象转换为dom对象 <input type="text" id="i1"> > $(document.getElementById('i1')) // dom对象转换为jQuery对象 [<input type="text" id="i1">] // 转换： // jquery对象[0] => Dom对象 // Dom对象 => $(Dom对象)
三、jQuery选择器
1.基本和层级
-
id选择器
$('#id')
- class选择器
<div class='c1'></div>
$(".c1")
- 标签选择器
<a>f</a>
$('a')
- 组合
$(' a, .c1, #i10 ')
- $(‘#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.表单对象及其属性
<input type='text'/> <input type='text'/> <input type='file'/> <input type='password'/>
$("input[type='text']") // 不使用表单选择器，也能实现
$(':text') // 使用表单选择器
:enabled // 可编辑，默认就是 :disabled // 不可编辑 :checked // 被选中（单选框、复选框) :selected // 被选中（下拉框)
四、jQuery示例及其知识点
筛选器：
$('#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)
添加移除样式：
$('#i1').addClass(..) // 添加样式
$('#i1').removeClass(..)// 移除样式
文本操作：
$(..).text() // 获取文本内容
$(..).text("<a>1</a>") // 设置文本内容
$(..).html() // 获取
$(..).html("<a>1</a>") // 设置
$(..).val() // 获取
$(..).val(..) // 设置
样式操作：
addClass
removeClass
toggleClass 比如实现网页开关灯功能
属性操作：
// 专门用于做自定义属性
$(..).attr('n') // 获取
$(..).attr('n','v') // 设置
$(..).removeAttr('n') // 删除
<input type='checkbox' id='i1' />
// 专门用于chekbox,radio jQuery1、2版本checkbox使用attr的话有bug，所以用prop
$(..).prop('checked')
$(..).prop('checked', true)
文档处理：
append // 往后加
prepend // 往前加
after // 紧挨着后面
before // 紧挨着前面
remove // 删除
empty // 只清空内容
clone // 克隆一份数据
五、jQuery 扩展
如果想自定义jQuery功能，可以如下定义：
- $.extend $.方法
- $.fn.extend $(..).方法
<body> <script src="jquery-1.12.4.js"></script> <script> var v = $.wangsen(); alert(v); // $('#i1').css() // $.ajax() // 第二种写法：.fn.extend $.fn.extend({ "name1": function () { return 'fgf00'; } }); var v2 = $('#i1').hanyang(); alert(v); // 第一种写法：.extend $.extend({ 'name2': function () { return 'fgf01'; } }); var v1 = $.wangsen(); alert(v); </script> </body>
如果引入第三方jQuery扩展，全局变量、扩展名，可能重复，因此使用还是都定义自执行函数。
(function (arg) { var status = 1; arg.extend({ 'name': function () { return 'fgf'; } }); })(jQu$ery);
