一、jQuery介绍

    1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
    2. jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程
    1. 优点:
      1. 一款轻量级的JS框架。jQuery核心js文件才几十kb,不会影响页面加载速度。
      2. 丰富的DOM选择器,jQuery的选择器用起来很方便,比如要找到某个DOM对象的相邻元素,JS可能要写好几行代码,而jQuery一行代码就搞定了,再比如要将一个表格的隔行变色,jQuery也是一行代码搞定。
      3. 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里,更加简洁。
      4. 事件、样式、动画支持。jQuery还简化了js操作css的代码,并且代码的可读性也比js要强。
      5. Ajax操作支持。jQuery简化了AJAX操作,后端只需返回一个JSON格式的字符串就能完成与前端的通信。
      6. 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器,不用再为浏览器的兼容问题而伤透脑筋。
      7. 插件扩展开发。jQuery有着丰富的第三方的插件,例如:树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件,并且用jQuery插件做出来的效果很炫,并且可以根据自己需要去改写和封装插件,简单实用。

二,iQuery基础语法

1,查找标签

选择器

id选择器:

$("#id")
标签选择器: $("标签名")
class选择器: $(".类名")
配合使用: $("div.c1") // 找到有c1类的div标签
所有元素选择器: $("*")
组合选择器: $("#id, .类名, 标签")
层级选择器: x和y可以为任意选择器 $("x y");// x的所有后代y(子子孙孙)
$("x > y");// x的所有儿子y(儿子)
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y

2、基本筛选器

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

$("div:last");

$("div:eq(3)");

$("div:even");

$("div:odd");

$("div:gt(5)");

$("div:lt(5)");

$("div:not(p)");

$("div:has(a)");

3、属性选择器

$("input");

$("input[name=d]");

4、表单常用筛选

:text
:password
:file
:radio
:checkbox :submit
:reset
:button

找到所有的含有这些属性的
$(":text");

$(":submit");

5、表单对象属性

:enabled        $("input:enabled"); 找到可用的input标签
:disabled     $("input:disabled");不可用的
:checked                  找到选择的
:selected     $(":selected") 找到选中的option
 

6、筛选器

下一个元素:

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
上一个元素: $("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
$(".sr-only").next();

$(".sr-only").nextAll();

$(".sr-only").nextUntil("dropdown-menu");
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。
儿子和兄弟元素:

$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们
查找元素: $("#id").find()// 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

三、操作标签

1:样式操作

样式类

addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名,如果有就移除,如果没有就添加。

css

可以设置样式的颜色,大小的格式,如果同时需要设置多个,可以以字典的形式

$("p").css("color","red");

位置:

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
$(".d");
$(".d").offset();
$(".d").offset({top:100,left:100});

尺寸:

height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()
$(".d").height();                  div的高度
200
$(".d").width(); div的宽度
200
$(".d").innerHeight(); div的高度 加padding
230
$(".d").innerWidth() div加padding
230
$(".d").outerHeight() div加padding加border
240
$(".d").outerWidth() div加padding加border
240

2、文本操作

HTML代码:

html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容
文本值: text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容
$(".d").html()
"
ddddddd
"
$(".d").html("www")
r.fn.init [div.d, prevObject: r.fn.init(1)]
$(".d").text()
"www"
$(".d").text("ddddddddddddd")
值:

val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置checkbox、select的值
$("input[name='gender']:checked").val()
"0"
$("input[name='gender']:checked").val()
"1"

$("input[name='gender']:checked").val("ee")设置

3、属性操作

$("input").attr("value")

$("input").attr("value","333")

$("input").attr("value")
"333"

$("input").removeAttr("value")
r.fn.init(2) [input#c1, input#c2, prevObject: r.fn.init(1)]
$("input").attr("value")
undefined

 
用于ID等或自定义属性:

attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性
prop() // 获取属性返回的是布尔值的属性
removeProp() // 移除属性

4、文档处理

添加到指定元素内部的后面

$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
添加到指定元素内部的前面 $(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B 添加到指定元素外部的后面 $(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
添加到指定元素外部的前面 $(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
移除和清空元素 remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。
$("p").append("a")

$("p").prepend("a")
替换

replaceWith()
replaceAll()
克隆 clone()// 参数

5、事件,

常用事件

事件绑定:

标签名.on("click" ,"选择器",  function(){})

移除事件:

把on变成off

阻止后续事件执行

常见的用return false

hover绑定事件

像click、keydown等DOM中定义的事件,我们都可以使用`.on()`方法来绑定事件,但是`hover`这种jQuery中定义的事件就不能用`.on()`方法来绑定了。

想使用事件委托的方式绑定hover事件处理函数,可以参照如下代码分两步绑定事件:

$('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件
$(this).addClass('hover');
});
$('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件
$(this).removeClass('hover');
});

页面载入:

写法一:

$(document).ready(function(){
// 在这里写你的JS代码...
})

写法二:

$(function(){
// 你在这里写你的代码
})

事件委托:

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

$("table").on("click", ".delete", function () {
。。。。。。。。 })

动画效果哦:

// 基本
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])

each类似于for  i  in

li =[10,20,30,40]
$.each(li,function(i, v){
console.log(i, v);//index是索引,ele是每次循环的具体元素。
})
注意: jQuery的方法返回一个jQuery对象,遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时,它通常不需要显式地循环的 .each()方法:

也就是说,上面的例子没有必要使用each()方法,直接像下面这样写就可以了:

$("li").addClass("c1");  // 对所有标签做统一操作
注意: 在遍历过程中可以使用 return false提前结束each循环。 终止each循环 return false;

data()

$("div").data("ll",44)

$("div").data("ll")
removeData(key):

描述:移除存放在元素上的数据,不加key参数表示移除所有保存的数据。

$("div").removeData("k");  //移除元素上存放k对应的数据

插件:

1. 给具体的jQuery对象添加扩展
$.fn.extend({
"s9": function(){
...
}
}) 2. 给jQuery添加全局扩展
$.extend({
"s": function(){
...
}
})

前段之jQuery的更多相关文章

  1. CSS3学习教程:Media Queries详解

    说起CSS3的新特性,就不得不提到 Media Queries . Media Queries 的引入,其作用就是允许添加表达式用以确定媒体的情况,以此来应用不同的样式表.换句话说,其允许我们在不改变 ...

  2. css中的media

    说起CSS3的新特性,就不得不提到 Media Queries .最近 Max Design 更新的一个泛读列表里,赫然就有关于 Media Queries 的文章.同时位列其中的也有前天我刚刚翻译的 ...

  3. CSS3 Media Queries 详解

    说起CSS3的新特性,就不得不提到 Media Queries .最近 Max Design 更新的一个泛读列表里,赫然就有关于 Media Queries 的文章.同时位列其中的也有前天我刚刚翻译的 ...

  4. 【jsPDF】jsPDF插件实现将html页面转换成PDF,并下载,支持分页

    1.目的:在前段是 jQuery库 或者 VUE库 或者两者混合库,将html 页面和数据 转换成PDF格式并下载,支持分页 1.项目背景: 对客户报修记录进行分类统计,并生成各种饼图.柱状图.线性图 ...

  5. 【css】CSS3 Media Queries 详解【转】

    说起CSS3的新特性,就不得不提到 Media Queries .最近 Max Design 更新的一个泛读列表里,赫然就有关于 Media Queries 的文章.同时位列其中的也有前天我刚刚翻译的 ...

  6. JQuery WEB前段开发

    JQuery WEB前段开发 Jquery是继prototype之后又一个优秀的Javascript框架.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, S ...

  7. 修改jquery的remote让前段显示服务器错误信息

    remote: function (value, element, param) { //param 是你的rules中规定的参数,在这里肯定是remote中的参数了 //value是你输入的值 // ...

  8. 动态生成二维码插件 jquery.qrcode.js

    前段时间做项目,需要动态生成一个二维码,于是就在网上找了一下发现一个jquery插件jquery.qrcode.js,所以今天就简单说一下这个插件的使用: jquery.qrcode.js是依赖jqu ...

  9. 解密jQuery事件核心 - 绑定设计(一)

    说起jQuery的事件,不得不提一下Dean Edwards大神 addEvent库,很多流行的类库的基本思想从他那儿借来的 jQuery的事件处理机制吸取了JavaScript专家Dean Edwa ...

随机推荐

  1. springboot开启矩阵传参MatrixVariable

    /** *   根据 URI 规范 RFC 3986 中 URL 的定义,路径片段中可以可以包含键值对. * 规范中没对对应的术语.一般 "URL 路径参数" 可以被应用,尽管更加 ...

  2. go实现堆排序

    package main import "fmt" func main(){ arr:=[]int{4,8,2,1,6,9,3,5,7,8,1,4} dui(arr) fmt.Pr ...

  3. Ubuntu下 QT中配置ROS-Kinetic

    打开qtcreater自动加载ros环境,通过修改*.desktop文件 gedit ~/.local/share/applications/qtcreator.desktop 将其中Exec=XXX ...

  4. 阿里云服务器部署mongodb

    在阿里云上买了个服务器,部署mongodb遇到一些坑,解决办法也是从网上搜集而来,把零零碎碎的整理记录一下. 服务器是:Alibaba Cloud Linux 下载安装 mongodb官网下载实在是太 ...

  5. int索引转Excel列名(JavaScript版)

    indexToExcelColumn = (index)=>{       // 自然数     if (typeof index !== 'number') return false;    ...

  6. Python之sqlite3模块

    python自带有sqlite3模块,该模块可以方便我们操作sqlite数据库,下面一起跟随示例了解sqlite3模块的具体用法. import sqlite3 # 连接数据库 connection ...

  7. JDK1.8源码(六)——java.util.ArrayList类

    ArrayList实现了Serializable接口,因此它支持序列化,能够通过序列化传输,实现了RandomAccess接口,支持快速随机访问,实际上就是通过下标序号进行快速访问,实现了Clonea ...

  8. 剑指 Offer 14- II. 剪绳子 II

    剑指 Offer 14- II. 剪绳子 II 给你一根长度为 n 的绳子,请把绳子剪成整数长度的 m 段(m.n都是整数,n>1并且m>1),每段绳子的长度记为 k[0],k[1]... ...

  9. tslib移植arm及使用

    测试平台 宿主机平台:Ubuntu 12.04.4 LTS 目标机:Easy-ARM IMX283 目标机内核:Linux 2.6.35.3 tslib 1.4 下载  https://gitlab. ...

  10. adb 常用命令大全(2)- 基础命令

    adb 基本语法 adb [-d|-e|-s <serialNumber>] <command> 命令行参数 -d:指定当前唯一通过 USB 连接的 Android 设备为命令 ...