1、jquery概念
是js的一个类库 (对js中某些功能的封装)
用jq实现的功能一定能用js实现 反过来 不一定 ,js实现的功能jq不一定能实现
2、jquery好处
1、代码简洁
2、兼容性好
最少的代码做多的事情
性能支持比较好
节约学习成本
让DOM操作变的简单
jQuery框架支持链式写法
jQuery框架实现了跨浏览器的兼容包括IE低版本
jQuery1.x版本支持低版本IE浏览器
可以操作css3样式
jquery可以和原生js结合一起使用 setTimeout( function(){ jq代码 },1000 )
注意 : 原生DOM对象不能使用jquery对象方法 document.getElementById("").dom的操作方式
用jq实现的用js一定能实现 反过来不一定
选择器、属性操作、样式操作、内容操作、文档操作(dom)、 动画 、事件处理 、 ajax 、jq插件
3、jquery选择器
$是jQuery的简写 含义一样
$ 符号 是一个函数 function
$() 返回值是对象object类型 同 jQuery()
也就是 $() 等价 jQuery()
注意 : 通过jquery方式查找到的元素 不能使用js的方式操作 样式、属性、内容... $("").style.color = "" 错
通过js方式查找到的元素 不能使用jq的各种方法操作 样式、属性、内容... document.getElementById().css() 错
基本选择器 :
id选择器 $("#id名")
类选择器 $(".class名")
标签选择器 $("html标签")
组合选择器 $("id,class")
通用选择器 $("*") 查找所有的标签
层级选择器 :
空格 查找当前元素里面的所有后代元素
> 查找当前元素里面的所有子代元素
+ 查找当前元素下面的紧邻的兄弟节点
~ 查找当前元素下面的所有的兄弟节点
查找过滤选择器(都是方法) :
first() $("li").first() :first
last() :last
eq(下标) 下标从0开始 等价 :eq(下标)
find() $("div.box").find("span") 查找给定元素的后代
children() 查找给定元素的子代 $().children("span") $().children()
next() $("p").next() $("p").next("span")指定的下一个元素
prev() 前一个 用法同next()
nextAll() 下面所有的 可以指定参数 也可以不指定
prevAll() 前一个所有
siblings() 除了自身之外的所有兄弟元素(也可以指定参数)
parent() 查找某个元素的父元素
filter() 参数可以是一个回调函数
$("p").filter(function(){
return 条件;返回满足某个条件的p元素
})
not() 除了...之外 :not
4、jquery中的样式操作
css() 获取样式
用法 : .css("样式","值")
.css({ "样式":"值" ,"样式":"值",.....})
.addClass("类名") 添加样式类 .removeClass() 删除样式类
5、jquery中查找元素下标
6、jquery对象和dom对象的互换问题
dom对象转成jq对象 : $( dom对象 )
var obj = document.getElementById("box")
$( obj )
jq对象转化成dom对象 :
$().get(下标)---dom对象
$()[下标] ---dom对象
var $list = $("li");
$list.get(2)
$list[2]
7、属性操作
attr() 获取或设置标签元素的属性 (该方法不能操作属性值是布尔类型的属性 比如 : checked 操作布尔类型属性 用 prop() )
获取 : 对象.attr()
设置 : 对象.attr("属性","值")
对象.attr({
属性 : 值,
...
})
8、jquery中的样式操作
css() 获取样式
用法 : .css("样式","值")
.css({ "样式":"值" ,"样式":"值",.....})
.addClass("类名") 添加样式类 .removeClass() 删除样式类 判断样式类 hasClass
9、jquery中的内容操作
标签 :
html() 获取或设置 非表单元素的内容 设置内容html()方法会识别标记 获取时只获取第一个
text() 纯文本操作 获取时获取所有的元素内容
表单 :
val() 获取或设置表单元素的内 获取:无参数 设置 :有参数
10、jquery的文档操作
append() 向指定的父元素后添加新子元素
appendTo() 将某个子元素添加到指定的父元素后面
prepend() 前置新内容
prependTo()
after()
insertAfter()
before()
insertBefore()
empty() 清空
remove() 删除所有
detach() 删除某个指定的元素
clone() 克隆
wrap() 把所有的元素用新创建的元素包裹起来
replaceWith() 将所有的元素替换成指定的元素 移动不是复制
replaceAll() 用匹配的元素替换掉所有 selector匹配到的元素
jquery的动画
基本动画 :
show() 没有参数 等价 css:display:block
可以有三个参数
第一个参数 :动画执行的时间
第二个参数 : 动画执行方式 linear swing
第三个参数 :动画完成后的回调函数
hide() 隐藏
toggle() 切换 显示 / 隐藏
上拉/下拉 :
slideDown() 通过高度的改变 显示 某个元素
slideUp() 通过高度的改变 隐藏 某个元素
slideToggle() 切换
透明度 :
fadeIn(1000,function() { }) 淡入 通过透明度的改变 显示 某个元素
fadeOut() 隐藏
fadeToggle() 切换
fadeTo() 调整某个元素的透明度
第一个参数 : 时间 (不能省略) 时间为0 也要写出来
第二个参数 : 透明度值
自定义动画 :animate
对象.animate( { } , 时间 , 回调函数 )
stop() 停止当前正在运行的动画 其余动画继续执行 (多个相同的元素含有多个同样的事件时 )
delay() 动画延时
jquery遍历
$().each( function(){
} )
或
$.each( $() , function(){
} )
jquery中阻止冒泡方式 :return false
size()方法 length属性 获取jq元素的个数
jquery中的事件处理
jquery的页面加载 :
$(document).ready(function(){
}) 简写成
$(function(){
})
jquery的页面加载中的代码 不需要等页面所有内容全部加载完成后执行 dom元素准备就绪即可执行
jquery的页面加载函数可以存在多个
$(document).ready( callback )
或简写成
jQuery(callback)
$( callback )
事件处理 :
事件绑定 :
bind()
用法 :
对象.bind("事件",function(){ })
对象.bind({
事件 : function(){},
事件 : function(){},
.....
})
unbind() 解除绑定 unbind 也可以用来关闭on绑定的事件
事件委托 delegate:
对象.delegate("事件源",事件,function(){
})
取消委托 : undelegate
事件绑定+事件委托 : on ---- off off可以用来关闭bind绑定的事件
事件绑定 用法 和bind()
事件委托 用法 :
对象.on(事件 , "事件源" , function(){
})
one() 只触发一次事件的事件处理方法
事件切换 hover
用户 :
对象.hover(function(){
mouseenter
},function(){
mouseleave
})
自定义插件 :
方式一:
$.extend({ 自定义工具方法 全局函数
方法名 : function(){},
....
})
调用 :全局调用 $.方法名()
方式二 :
$.fn.extend({ 自定义对象的方法 不是全局方法
方法名 : function(){
},
...
})
调用 : 局部方法 使用 jq选择器.方法名()
注意 : $.fn是jQuery原型对象
扩展 :
$.函数名 = function(){ ... } $.调用
$.fn.函数名 = function(){ ... } jq对象调用
jquery的ajax 方法 :$.ajax () $.get() $.post() $.getJson() $.getScript() load()
1、ajax的异步请求之 load 加载公共的html文件
load() 方法是一个局部的方法,通过jquery的选择器作为开始调用load方法
load()方法是异步的,加载的信息中如果需要事件响应,必须通过回调函数来实现(或者委托),也就是说所有load加载的数据中的事件都要写在回调函数中
load()方法如果想要请求不同结构的内容,可以把这些内容写到一个文件中,请求数据时,在url后加一个请求容器的选择器名称即可(这里选择器建议使用基本选择器)
load()方法的参数有三个:
第一个: 请求的url
第二个: 发送的数据 json格式 {}
第三个参数 : 回调函数
回调函数中有三个参数,分别是:
function(res,type,xhr){
console.log(res); //请求数据
console.log( type );//请求的状态
console.log(xhr); //deffered 异步对象 (类似于js中promise对象)
}
2、ajax请求之 $.get 或 $.post
以 $. 开始的ajax请求方式是全局方法
$.get(三个参数) 以get方式请求数据
第一个参数:请求的路径
第二个参数:请求数据 json对象 {}
第三个参数: 回调函数 (回调函数中也有三个参数,同load)
$.post() 以post方式请求数据 用法同$.get()
3、ajax请求之 $.getJson() $.getScript()
$.getJson("xxx.json",data, 回调函数) 通过这种方式请求json数据 三个参数 : url data function(){}
$.getScript("xxx.js",回调) 通过这种方式请求js脚本数据 ,立即执行请求的脚本代码
4、$.ajax
jquery的ajax请求服务器传递过来的数据一般都是object对象(请求的数据是object类型)
用法:
$.ajax({
type:"get", 请求数据方式
success:function(){ 服务器通过 success 方法 获取处理的结果
console.log("成功");
}
});
或 $.ajax 方法返回一个deffered对象 (类似promise)
如果请求数据成功,通过done方法获取服务器的数据
var deff = $.ajax({ type:,url: })
deff.done(function(){
})
关于deffered方法描述 :
deferred对象是jQuery的回调函数的解决方案。
deferred对象有done方法,表示成功时要调用的回调函数。
deferred对象有fail方法,表示失败时要调用的回调函数。
when方法表示都成功是再调用对应的回调函数。
常用方法:
$.ajax({
type:"get",
datatype:"json",//指定请求数据的类型 请求数据类型如果是json 表示正常ajax请求 如果是jsonp,表示跨域请求
data:{"name":"admin"},//向服务器发送数据
success:function(res){
//alert(typeof res);
//此处处理服务器返回数据的业务逻辑
}
});
ajax跨域:
$.ajax({
type:"get",
jsonCallback:"fn" //设置回调函数
});
function fn(msg){
alert( msg );
}
- Jquery remove 高级用法
Jquery remove 高级用法 html 代码 <div class="file-image">abc1111</div><div class= ...
- jquery.cookie.js 用法
jquery.cookie.js 用法 一个轻量级的cookie 插件,可以读取.写入.删除 cookie. jquery.cookie.js 的配置 首先包含jQuery的库文件,在后面包含 j ...
- jQuery $.post $.ajax用法
jQuery $.post $.ajax用法 jQuery.post( url, [data], [callback], [type] ) :使用POST方式来进行异步请求 参数: url (Stri ...
- jQuery包裹节点用法完整示例
本文实例讲述了jQuery包裹节点用法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Typ ...
- jQuery trigger one用法
jQuery trigger one用法: <%@ page language="java" import="java.util.*" pageEncod ...
- 关于Jquery Ajax的用法
今天简单描述一下Jquery Ajax的用法,和我在使用过程中的一些看法,仅供自己娱乐和大家参考值之用! Jquery Ajax的重要性不言而喻,只从Jquery面世之后,终于解救了像我这种既做前台又 ...
- jquery serialize()函数用法
jquery serialize()函数用法<pre><html><head><script type="text/javascript" ...
- jquery插件的用法之cookie 插件
一.使用cookie 插件 插件官方网站下载地址:http://plugins.jquery.com/cookie/ cookie 插件的用法比较简单,直接粘贴下面代码示例: //生成一个cookie ...
- jquery $.each的用法
通过它,你可以遍历对象.数组的属性值并进行处理. 使用说明 each函数根据参数的类型实现的效果不完全一致: 1.遍历对象(有附加参数) $.each(Object, function(p1, p2) ...
- jQuery load()方法用法集锦!
调用load方法的完整格式是:DE>load( url, [data], [callback] ),其中DE> DE>urlDE>:是指要导入文件的地址. DE>data ...
随机推荐
- springboot mvc beetl模板 自定义错误的后缀问题
@Component public class BeetlErrorViewResolver implements ErrorViewResolver { private static final M ...
- java 蓝桥杯算法提高 _3K好数
nums[i][j] 存的是i位数的时候,首位数字是j的K好数的数目,i从1位开始的结果,去算2位时的结果,去算3位时的结果...最后得到l位的结果.K进制只是一个范围. import java.ut ...
- SMTPSenderRefused: (530, ‘5.5.1 Authentication Required. Learn more at \n5.5.1
在跟着<Flask Web开发:基于Python的Web应用开发实战>一书学习时,出现了以上错误提示. 问题出于第11章--博客文章.当运行 python manage.py runser ...
- cdoj1091-秋实大哥の恋爱物语 【kmp】
http://acm.uestc.edu.cn/#/problem/show/1091 秋实大哥の恋爱物语 Time Limit: 5000/2000MS (Java/Others) Memo ...
- Opencv 图片直方图
#include <iostream>#include <opencv2/opencv.hpp> using namespace std;using namespace cv; ...
- 410. Split Array Largest Sum 把数组划分为m组,怎样使最大和最小
[抄题]: Given an array which consists of non-negative integers and an integer m, you can split the arr ...
- spring4-2-bean配置-5-bean的作用域
- 解决T4模板的程序集引用的五种方案
在众多.NET应用下的代码生成方案中,比如CodeDOM,BuildProvider, 我觉得T4是最好的一种.关于T4的基本概念和模板结果,可以参考我的文章<基于T4的代码生成方式>.如 ...
- C#中读写配置参数文件(利用Windows的API)
读配置文件与写配置文件的核心代码如下: [DllImport("kernel32")] // 读配置文件方法的6个参数:所在的分区(section).键值. 初始缺省值. ...
- yii2项目实战-访问控制过滤器ACF讲解
作者:白狼 出处:http://www.manks.top/document/yii2-filter-control.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明 ...