文章目录

前端类库之jQuery
- jQuery简介
- jQuery内容目录
- jQuery对象
- jQuery基本语法
- - 查找标签
  - - 基本选择器
    - 层级选择器
    - 基本筛选器
    - 属性选择器
    - 表单筛选器
    - 筛选器方法
    - 节点操作
    - 位置操作
  - 事件
  - - 常用事件
    - 事件冒泡
    - 等待页面加载
    - 事件委托
  - 动画效果

前端类库之jQuery

jQuery简介

jQuery是一个轻量级的、兼容多浏览器的JavaScript库，主要功能是能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程
内部封装了js代码，能使编程更加简单并且兼容所有的主流浏览器
拥有三个版本 1.X 2.X 3.X
使用前需要提前导入
- 导入方式有两种，一是下载到本地导入(不受网络影响)，二是CDN导入(依赖网络，也是用的最多的方式)
基本使用

使用jQuery时需要关键字声明: jQuery() 或者 $()

补充: 什么是CDN

CDN指内容分发网络，简单点说就是将一些静态资源(html文档，图片等)放在各地服务器上，加载时就近获取资源，能够有效的提升网页用户访问响应速度和命中率

免费jQueryCDN（推荐使用3.4.1版本）

jQuery内容目录

选择器
筛选器
样式操作
文本操作
属性操作
文档处理
事件
动画效果
插件
each、data、Ajax

下载链接：jQuery官网

中文文档：jQuery AP中文文档

jQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法。虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。

jQuery对象和js对象互相转换jQuery对象 = $(js对象)js对象 = jQuery对象[index]

jQuery基本语法

$(selector).action()

查找标签

基本选择器

这里将jQuery与原生js的DOM做对比，可以看出jQuery语法简洁了很多,并且功能更加强大

选择器	jQuery	DOM
id 选择器	$("#id")	document.getElementById(“id”)
标签选择器	$(“tagName”)	document.getElementsByTagName(“tagName”)
class选择器	$(".className")	document.getElementsByClassName(“classname”)
配合使用	$(“div.c1”) // 找到有c1 class类的div标签
所有元素选择器	$("*")
组合选择器：	$("#id, .className, tagName")

层级选择器

x和y可以为任意选择器

$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y

基本筛选器

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

例子:

$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

属性选择器

$('[name]')
$('[name="jason"]')
$('input[name!="jason"]')

表单筛选器

:text   $(':text')  // 查找属性值是text的form表单内的标签
:password:file
:radio
:checkbox       $(':checked')  // 会连同option默认的selected一起找到,特例
:submit
:reset
:button

筛选器方法

/* 使用原生js代码批量查找到标签之后  结果是一个数组
需要索引取值之后才可以调用标签的一些方法使用jQuery代码批量查找到标签之后 结果是一个jQuery对象(像数组)
不需要索引取值 就可以直接调用封装的方法 */下一个元素:$("#id").next()$("#id").nextAll()  $("#id").nextUntil("#i2")  // 到id值为i2的停止上一个元素:$("#id").prev()$("#id").prevAll()$("#id").prevUntil("#i2")父亲元素$("#id").parent()$("#id").parents()  // 查找当前元素的所有的父辈元素$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。儿子和兄弟元素$("#id").children();// 儿子们$("#id").siblings();// 兄弟们

节点操作

# 样式类操作addClass();       // 添加指定的CSS类名。   classList.add()removeClass();  // 移除指定的CSS类名。   classList.remove()hasClass();      // 判断样式存不存在      classList.contains()toggleClass(); // 切换CSS类名，如果有就移除，如果没有就添加。 classList.toggle()# 样式操作css('属性名','属性值')  //DOM操作：tag.style.color="red"# 文本操作text()  # innerTexthtml()  # innerHTMLval()   # valuejQuery对象先转js对象之后.files // 括号内不写参数就是获取值，写参数就是设置值# 属性操作attr()   # setAttribute + getAttributeprop()attr('属性名')  获取属性值attr('属性名','属性值')  设置属性
// 对于标签上有的能看到的属性和自定义属性都用attr
// 对于返回布尔值的如checkbox、radio和option的是否被选中都用prop# 文档处理append()   // 内部的尾部追加元素prepend()  // 内部的头部追加元素after()    // 同级别下面添加元素before()   // 同级别上面添加元素remove()   // 移除当前元素empty()   // 清空当前元素内部所有的数据clone()   // 克隆标签 括号内可以加布尔值来明确是否克隆事件

位置操作

offset() // 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()  // 获取匹配元素相对父元素的偏移
scrollTop() // 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移

事件

绑定事件的两种方式

方式1:jQuery对象.事件名(function(){})$('#d1').click(function(){alert(123)})
方式2:jQuery.on('事件名',function(){})$('#d1').on('click',function(){alert(123)})# 移除事件 .off 格式同 .on
# 阻止后续事件执行
$('#d1').click(function (e) {alert(123)//  方式1   推荐// return false//  方式2   了解  e 是自带形参// e.preventDefault()})

常用事件

click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})

事件冒泡

事件冒泡指: 当用户点击span标签时，会依次触发span，p和div所绑定的事件

<div>div<p>p<span>span</span></p>
</div><script >$('div').click(function () {alert('div')})$('p').click(function () {alert('p')})$('span').click(function () {alert('span')})
</script>

组织事件冒泡的方法有两种

1. 是在事件结尾加上 return false  // 推荐
2. 是在事件结尾加上 e.stopPropagation()

等待页面加载

// 原生js文档加载方式
window.onload = function () {}
// jQuery文档加载方式01
$(document).ready(function () {})
// jQuery文档加载方式02
$(function(){})区别:window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）

事件委托

事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。

<button>点我</button><script >$('body').on('click','button', function () {// 创建一个button标签var btnELe = document.createElement('button')// 设置内部文本btnELe.innerText = '点我'// 将button标签添加到body内部$('body').append(btnELe)})
</script>

动画效果

// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn])

--------------------------未完待续---------------------------------------------------

前端类库之jQuery相关推荐

前端工程师之jquery实战案例大集合-彭亮-专题视频课程
前端工程师之jquery实战案例大集合-17028人已学习课程介绍详细介绍了一个js类库的实战应用,这里主要讲解jquery.是一个可以很容易就做各种网页特效的面相对象的方法函数集 ...
JavaWeb开发前端语言：jQuery（一） jQuery核心函数、jQuery对象、jQuery选择器、以及jQuery元素筛选
JavaWeb开发前端语言:jQuery 1.jQuery介绍 1.1 jQuery的初使用 1.2 使用jQuery的常用问题解析 2. jQuery核心函数介绍 3.区分jQuery对象与dom ...
超全超实用的Javascript类库和jQuery插件大全之一：图片，地图和图形
为什么80%的码农都做不了架构师?>>> 日期:2012-10-10 来源:GBin1.com 如果你需要解决一些开发中遇到的技术问题的话,很可能会找到一些相关的javasc ...
在C#后端处理一些结果然传给前端Javascript或是jQuery
在C#后端处理一些结果然传给前端Javascript或是jQuery,以前Insus.NET有做过一个例子<把CS值传给JS使用 >http://www.cnblogs.com/insus ...
超全超实用的Javascript类库和jQuery插件大全之二：文字处理，表格和列表处理，实用......
为什么80%的码农都做不了架构师?>>> 日期:2012-10-15 来源:GBin1.com 如果你需要解决一些开发中遇到的技术问题的话,很可能会找到一些相关的javasc ...
网站建设中前端常用的jQuery+easing缓动的动画
网站建设中前端人员利用jQuery实现动画再简单不过了,只是要实现更酷的效果还需要插件来帮忙,easing就是一款帮助jQuery实现缓动动画的插件,经过试用,效果很不错! 下载该插件:jquery. ...
《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记
<疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记二〇一九年二月十三日星期三2时28分54秒前提:本书适合有初步HTML.CSS.JavaScri ...
锋利的js前端分页之jQuery
原文:锋利的js前端分页之jQuery 大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的 ...
前端学习：jQuery学习--Day03
前端学习:jQuery学习–Day03 ps:这几天偷了点懒呜呜外加考试耽误了几天学习最后自己做了一个给女朋友的惊喜点滴记录note 大纲自定义事件自动触发事件委托鼠标移入移出事件电影排行 ...

前端类库之jQuery

文章目录

前端类库之jQuery

jQuery简介

jQuery内容目录

jQuery对象

jQuery基本语法

查找标签

基本选择器

层级选择器

基本筛选器

属性选择器

表单筛选器

筛选器方法

节点操作

位置操作

事件

常用事件

事件冒泡

等待页面加载

事件委托

动画效果

前端类库之jQuery相关推荐

最新文章

热门文章