jQuery

最新推荐文章于 2024-05-08 02:39:14 发布

bigcupwater

最新推荐文章于 2024-05-08 02:39:14 发布

阅读量112

点赞数

分类专栏： JavaWeb 文章标签： javascript jquery

本文链接：https://blog.csdn.net/bigcupwater/article/details/117327167

版权

JavaWeb 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

jQuery不同版本
- 1.X
  1. 兼容老版本IE
  2. 文件更大
- 2.X
  1. 部分IE8及以下不支持
  2. 文件小，执行效率更高
- 3.X
  1. 完全不在支持IE8及以下版本
  2. 提供了一些新的API
  3. 提供不包括AJAX/动画API的版本

jQuery核心函数$()

// 作为函数使用$()
// 1. 参数是一个函数：DOM加载完成后，执行此回调函数
$(function() {});
// 2. 参数是选择器字符串：查找所有匹配的标签，并将它们封装成jQuery对象
// 将id为btn的DOM对象封装成一个jQuery对象
$("#btn");
// 3. 参数是DOM对象：将DOM对象转换成jQuery对象
var dom = document.getElementById("id");
$(dom);
// 4. 参数是一段HTML节点字符串，创建标签对象并封装成jQuery对象
var div = $("<div>这是一段div</div>");

原生JS和jQuery入口函数的区别
1. 入口函数的加载模式不同
  - 原生JS会等到DOM元素加载完毕，并且图片也加载完毕才会执行
  - jQuery会等到DOM元素加载完毕，但不会等到图片也加载完毕就会执行
2. 多个入口函数
  - 原生：后写会覆盖先写的
  - jQuery：按顺序执行，不会覆盖

jQuery入口函数多种写法

$(document).ready(function() {});
jQuery(document).ready(function() {});
$(function() {});
jQuery(function() {});

jQuery冲突问题（其他框架也用到$符号，并且后引入其他框架）
1. 写jquery代码之前释放$的使用权
```
jQuery.noConflict();
// 之后的$都要使用jQuery
```
2. 自定义访问符号
```
var nj = jQuery.noConflict();
// 之后的的$都要使用nj
```

jQuery核心对象
- 常用的属性/方法
  1. 基本行为
    - size()/length 获取每部包含的DOM元素个数
    - [index]/get(index) 获取DOM元素(不是jQuery对象)
    - each(callback) 遍历封装的DOM元素，可以在回调函数中用return结束遍历
    - index([selector|element]) 返回索引位置
      1. $(selector).index() 获得第一个匹配元素相对于其同胞元素的index位置
      2. $(selector).index(element) 获得元素相对于选择器的index位置
选择器
- 基本选择器
  1. #id 根据给定的ID匹配一个元素
  2. element 根据给定的元素标签名匹配所有元素
  3. .class 根据给定的css类名匹配元素
  4. element.class 匹配lement标签中指定class类名的元素
  5. * 匹配所有元素
  6. selector1, selector2, slectorN 将每一个选择器匹配到的元素合并后一起返回
- 层次选择器
  1. ancestor descendant 在给定的祖先元素下匹配所有的后代元素
  2. parent > child 在给定的父元素下匹配所有的子元素
  3. prev + nex+t 匹配所有紧接在prev元素后的兄弟元素
  4. prev ~ siblings 匹配prev元素之后的所有兄弟元素
- 筛选过滤器，在已经指定的元素中去筛选，不是去找子元素
  1. 基本筛选
    - :first/:last 获取第一个元素/获取最后一个元素
    - :not(selector) 去除所有与给定选择器匹配的元素
    - :even/:odd 匹配所有索引值为偶数的元素/匹配所有索引值为奇数的元素，从 0 开始计数
    - :eq(index) 匹配一个给定索引值的元素
    - :gt(index)/:lt(index) 匹配所有大于给定索引值的元素/匹配所有小于给定索引值的元素
  2. 按内容筛选
    - :contains(text) 匹配包含给定文本的元素
    - :empty/:parent 匹配所有不包含子元素或者文本的空元素/匹配含有子元素或者文本的元素
    - :has(selector) 匹配含有选择器所匹配的元素的元素
  3. 按可见性筛选
    - :visible/:hidden 匹配所有的可见元素/匹配所有不可见元素，或者type为hidden的元素
  4. 按属性筛选
    - [attribute] 匹配包含给定属性的元素(元素标签有没有写这个属性)
    - [attribute=value] 匹配给定的属性是某个特定值的元素
    - [attribute!=value] 匹配所有不含有指定的属性
    - [attribute^=value] 匹配给定的属性是以某些值开始的元素
    - [attribute$=value] 匹配给定的属性是以某些值结尾的元素
    - [attribute*=value] 匹配给定的属性是以包含某些值的元素
    - [selector1][selector2][selectorN] 复合属性选择器，需要同时满足多个条件时使用
- 子元素过滤器也不是去找元素的子元素，是在已经匹配的元素中进行筛选，默认这些已经被选中的元素是存在父元素的
  1. :first-child 匹配所给选择器(:之前的选择器)的第一个子元素
  2. :last-child 匹配最后一个子元素
  3. :nth-child 匹配其父元素下的第N个子或奇偶元素
    - :nth-child从1开始的，而:eq()是从0算起的！
    - :nth-child(even)
    - :nth-child(odd)
    - :nth-child(3n)
    - :nth-child(2)
    - :nth-child(3n+1)
    - :nth-child(3n+2)
  4. :only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配。如果父元素中含有其他元素，那将不会被匹配。
```
/*
0和7的p标签是body的子标签
$(p) 是选中了所有的p标签，如果这个p标签是父元素所包裹的第一个或者最后一个元素
那么first-child和last-child就会生效
*** 记住 :first 返回第一个(单个)，:fitst-child 返回所有是子的第一个(多个)
<body>
    <p>0</p>
    <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </div>
    <div>
        <p>4</p>
        <p>5</p>
        <p>6</p>
    </div>
    <p>7</p>
</body>
*/
$(function() {
    console.log($("p:first-child").text()); // 014
    console.log($("p:last-child").text()); // 367
});
```
- 表单选择器针对表单元素input的type属性
  1. :input 匹配所有input元素
  2. :text 匹配所有的单行文本框
  3. :password 匹配所有密码框
  4. :radio 匹配所有单选按钮
  5. :checkbox 匹配所有复选框
  6. :submit 查找所有提交按钮
  7. :image 匹配所有图像域，image是定义图像形式的提交按钮
  8. :reset 匹配所有重置按钮
  9. :button 匹配所有按钮
  10. :file 匹配所有文件域
- 表单对象属性选择器
  1. :enabled 匹配所有可用元素
  2. :disabled 匹配所有不可用元素
  3. :checked 匹配所有选中的被选中元素(复选框、单选框等，select中的option)，对于select元素来说，获取选中推荐使用 :selected
  4. :selected 匹配所有选中的option元素
$工具方法
- $.each(object,[callback]) 通用遍历方法，可用于遍历对象和数组
  1. object：需要遍历的对象或数组
  2. callback：每个成员/元素执行的回调函数。回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容
- $.trim(str) 去掉字符串起始和结尾的空格，直接影响str本身
- $.type(obj) 检测obj的数据类型
- $.isArray(obj) 测试对象是否为数组
- $.isFunction(obj) 测试对象是否为函数
- $.parseJSON(str) 接受一个JSON字符串，返回解析后的对象
操作元素节点的属性
- attr() 设置或返回被选元素的属性值
- removeAttr() 从每一个匹配的元素中删除一个属性
- addClass() 为每个匹配的元素添加指定的类名
- removeClass() 从所有匹配的元素中删除全部或者指定的类
- toggleClass() 如果存在（不存在）就删除（添加）一个类
- html() 取得第一个匹配元素的html内容
- text() 取得所有匹配元素的内容
- val() 获得匹配元素的当前值，多用于input的value
操作元素节点的样式
- css() 访问或设置匹配元素的样式属性
- offset() 获取匹配元素相对于页面的相对偏移
  1. 会返回一个对象，对象内部封装了属性left和top
- position() 获取匹配元素相对父元素的偏移
  1. 会返回一个对象，对象内部封装了属性left和top
- scrollTop() 获取匹配元素滚动条顶部的偏移
- scrollLeft() 获取匹配元素滚动条左边的偏移
- height() height
- width() width
- innerHeight() height+padding(top+bottom)
- innerWidth() width+padding(left+right)
- outerHeight() height+padding+margin
- outerWidth() width+padding+margin
筛选元素在jQuery封装的DOM节点中再添加规则筛选，效果同选择器，但是这里是调用的方法
- eq(index|-index) 根据索引筛选，0是第一个，-1是最后一个
- first()/last() 获取第一个元素/获取最后一个元素
- hasClass(class) 检查当前的元素是否含有某个特定的类
- filter() 根据满足传入的过滤规则再筛选
- has() 元素的子元素应该满足传入的过滤规则
- not() 根据不满足传入的过滤规则再筛选
查找元素，查找元素的父，子，兄弟
- children() 找子元素
- find() 找后代元素
- next()/prev() 找紧跟后面的一个兄弟元素/找排在前面的一个兄弟元素
- nextAll()/prevAll() 找紧跟后面的所有兄弟元素/找排在前面的所有兄弟元素
- parent() 找父元素
- parents() 找祖先元素
- siblings() 找兄弟元素，不管在前面还是后面
文档增删改
- append() 添加子元素到最后
- prepend() 添加子元素到最前面
- after() 添加兄弟元素到后面
- before() 添加兄弟元素到前面
- replaceWith() 将所有匹配的元素替换成指定的HTML或DOM元素
- empty() 删除匹配的元素集合中所有的子节点(包括文本节点)
- remove() 从DOM中删除所有匹配的元素

事件绑定和解绑

// 事件绑定
// 1. eventName(fucntion(){})
// 2. on(eventName, function(){})
// 第一种只能加一个监听，有的事件不支持
// 第二种可以添加多个监听，更加通用
$("#div").click(function(){});
$("#div").on("click", function(){});

// 事件解绑
off(eventName);

// 事件的坐标
// event.clinetX, event.ClientY 相对于视口的左上角的位置(滚动条会改变视口)
// event.pageX, event.pageY 相对于页面的左上角的位置(整个页面)
// event.offsetX, event.offsetY 相对于事件元素左上角的位置

// 事件相关处理
// 停止事件冒泡
// 阻止事件默认行为
event.stopPropagetion();
event.preventDefault();

// 添加事件委托
// 不需要过滤不想触发事件的元素
// 这里就是把指定好的子元素固定了
$(parentSelector).delegate(childrenSelector, eventName, callback);
// 移出事件委托
$(parentSelector).undelegate(eventName);

jQuery内置动画
- show() 显示隐藏的元素
- hide() 隐藏显示的元素
- toggle() 带动画的隐藏显示切换
- slideDown() 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数
- slideUp() 通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数
- fadeIn() 通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数
- fadeOut() 通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数
- fadeTo() 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数
- animate() 自定义动画
  1. 四个参数
    - 一个对象，里面包含了动画结束时的css样式
    - 动画时长
    - 动画节奏(默认swing)
    - 动画结束的回调函数
jQuery的插件
- jQuery-validation 表单验证
- jQuery-UI 动态样式
- laydate 日期空间

Tips

操作固有属性用prop，自定义的属性用attr()
- disable、selected、checked 用prop设true或false
- 用attr删除再添加就没用了
hover(fnEnter, fnLeave) 为元素绑定鼠标移入移出(mouseenter、mouseleave)事件
mouseover和mouseenter的区别
- 在父元素上绑定mouseover和mouseout事件，子元素同样也会触发，即子元素事件会冒泡至父元素
- 而父元素绑定mouseenter和mouseleave事件只对父元素有效，子元素不会触发
元素写属性不写属性值，相当于这个属性值是true