jquery是一个函数库,一个js文件,页面用script标签引入这个js文件就可以使用。

<script type="text/javascript" src="js/jquery-1.12.2.js"></script>

jquery的口号和愿望 Write Less, Do More(写得少,做得多)

1、[官方网站](http://jquery.com/): 官方网站
2、[版本下载](https://code.jquery.com/) 版本下载

jquery加载

将获取元素的语句写到页面头部,会因为元素还没有加载而出错,jquery提供了ready方法解决这个问题,他的速度比原生的window.onload更快。

<script type="text/javascript">

$(document).ready(function(){

     ......

});

</script>

可以简写为:

<script type="text/javascript">

$(function(){

     ......

});

</script>

jquery选择器

jquery用法思想之一

选择某个网页元素,然后对它进行某种操作

jquery选择器

jquery选择器可以快速地选择元素,选择规则和css样式相同,使用length属性判断是否选择成功。

$('#myId') //选择id为myId的网页元素
$('.myClass') //选择class为myClass的元素
$('li') //选择所有的li元素
$('#ul1 li span') //选择id为ul1元素下的所有li下的span元素
$('input[name='first']') //选择name属性等于first的input元素
对选择集进行过滤
$('div').has('p'); //选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').filter('.myClass');选择class等于myClass的div元素
$('div').eq(5); //选择第6个div元素
选择集转移
$('div').prev(); //选择div元素前面紧挨的同辈元素
$('div').prevALL; //选择div元素之前所有的同辈元素
$('div').next; //选择div元素后面紧挨的同辈元素
$('div').nextALL; //选择div元素后面所有的同辈元素
$('div').parent(); //选择div的父元素
$('div').children(); //选择div的所有子元素
$('div').siblings(); //选择div的同级元素
$('div').find('.myClass'); //选择div内的class等于myClass的元素
判断是否选择到了元素

jquery有容错机制,即使没有找到元素,也不会出错,可以用length属性来判断是否找到了元素,length等于0,就是没有找到元素,length大于0,就是选择到了元素。

var $div1 = $('#div1');
var $div2 = $('#div2');
alert($div1.length); // 弹出1
alert($div2.length); // 弹出0
......
<div id="div1">这是一个div</div>

jquery样式操作

jquery用法思想二

同一个函数完成取值和赋值

操作行间样式
// 获取div的样式
$("div").css("width");
$("div").css("color"); //设置div的样式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});
特别注意

选择器获取的多个元素,获取信息获取的是第一个,比如:$(“div”).css(“width”),获取的是第一个div的width。

操作样式类名
$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
$("#div1").removeClass("divClass") //移除id为div1的对象的class名为divClass的样式
$("#div1").removeClass("divClass divClass2") //移除多个样式
$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式

绑定click事件

给元素绑定click事件,可以用如下方法:

$('#btn1').click(function(){

    // 内部的this指的是原生对象

    // 使用jquery对象用 $(this)

})
获取元素的索引值

有时候需要获得匹配元素相对于其同胞元素的索引位置,此时可以用index()方法获取

var $li = $('.list li').eq(1);
alert($li.index()); // 弹出1
......
<ul class="list">
<li>1</li>
<li>2</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>

jquery特殊效果

fadeIn() 淡入

    $btn.click(function(){

        $('#div1').fadeIn(1000,'swing',function(){
alert('done!');
}); }); fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 切换元素的可见状态
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素
jquery链式调用
jquery对象的方法会在执行完后返回这个jquery对象,所有jquery对象的方法可以连起来写:
$('#div1') // id为div1的元素
.children('ul') //该元素下面的ul子元素
.slideDown('fast') //高度从零变到实际高度来显示ul元素
.parent() //跳到ul的父元素,也就是id为div1的元素
.siblings() //跳到div1元素平级的所有兄弟元素
.children('ul') //这些兄弟元素中的ul子元素
.slideUp('fast'); //高度实际高度变换到零来隐藏ul元素

jquery动画

通过animate方法可以设置元素某属性值上的动画,可以设置一个或多个属性值,动画执行完成后会执行一个函数。

$('#div1').animate({
width:300,
height:300
},1000,'swing',function(){
alert('done!');
});
参数可以写成数字表达式:
$('#div1').animate({
width:'+=100',
height:300
},1000,'swing',function(){
alert('done!');
});

尺寸相关、滚动事件

1、获取和设置元素的尺寸
width()、height()    获取元素width和height
innerWidth()、innerHeight() 包括padding的width和height
outerWidth()、outerHeight() 包括padding和border的width和height
outerWidth(true)、outerHeight(true) 包括padding和border以及margin的width和height
2、获取元素相对页面的绝对位置
offset()
3、获取浏览器可视区宽度高度
$(window).width();
$(window).height();
4、获取页面文档的宽度高度
$(document).width();
$(document).height();
5、获取页面滚动距离
$(document).scrollTop();
$(document).scrollLeft();
6、页面滚动事件
$(window).scroll(function(){
......
})

jquery属性操作

1、html() 取出或设置html内容
// 取出html内容

var $htm = $('#div1').html();

// 设置html内容

$('#div1').html('<span>添加文字</span>');
2、prop() 取出或设置某个属性的值
// 取出图片的地址

var $src = $('#img1').prop('src');

// 设置图片的地址和alt属性

$('#img1').prop({src: "test.jpg", alt: "Test Image" });

jquery循环

对jquery选择的对象集合分别进行操作,需要用到jquery循环操作,此时可以用对象上的each方法:

$(function(){
$('.list li').each(function(i){
$(this).html(i);
})
})
......
<ul class="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

jquery事件

事件函数列表:
blur() 元素失去焦点
focus() 元素获得焦点
click() 鼠标单击
mouseover() 鼠标进入(进入子元素也触发)
mouseout() 鼠标离开(离开子元素也触发)
mouseenter() 鼠标进入(进入子元素不触发)
mouseleave() 鼠标离开(离开子元素不触发)
hover() 同时为mouseenter和mouseleave事件指定处理函数
ready() DOM加载完成
resize() 浏览器窗口的大小发生改变
scroll() 滚动条的位置发生变化
submit() 用户递交表单
绑定事件的其他方式
$(function(){
$('#div1').bind('mouseover click', function(event) {
alert($(this).html());
});
});
取消绑定事件
$(function(){
$('#div1').bind('mouseover click', function(event) {
alert($(this).html()); // $(this).unbind();
$(this).unbind('mouseover'); });
});

事件冒泡

什么是事件冒泡

在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。

事件冒泡的作用

事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件。

阻止事件冒泡

事件冒泡机制有时候是不需要的,需要阻止掉,通过 event.stopPropagation() 来阻止

$(function(){
var $box1 = $('.father');
var $box2 = $('.son');
var $box3 = $('.grandson');
$box1.click(function() {
alert('father');
});
$box2.click(function() {
alert('son');
});
$box3.click(function(event) {
alert('grandson');
event.stopPropagation(); });
$(document).click(function(event) {
alert('grandfather');
});
}) ...... <div class="father">
<div class="son">
<div class="grandson"></div>
</div>
</div>
阻止默认行为

阻止表单提交

$('#form1').submit(function(event){
event.preventDefault();
})
合并阻止操作

实际开发中,一般把阻止冒泡和阻止默认行为合并起来写,合并写法可以用

// event.stopPropagation();
// event.preventDefault(); // 合并写法:
return false;

事件委托

事件委托就是利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作,事件委托首先可以极大减少事件绑定次数,提高性能;其次可以让新加入的子元素也可以拥有相同的操作。

一般绑定事件的写法
$(function(){
$ali = $('#list li');
$ali.click(function() {
$(this).css({background:'red'});
});
})
...
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
事件委托的写法
$(function(){
$list = $('#list');
$list.delegate('li', 'click', function() {
$(this).css({background:'red'});
});
})
...
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

jquery元素节点操作

创建节点
var $div = $('<div>');
var $div2 = $('<div>这是一个div元素</div>');
插入节点

1、append()和appendTo():在现存元素的内部,从后面插入元素

var $span = $('<span>这是一个span元素</span>');
$('#div1').append($span);
......
<div id="div1"></div>

2、prepend()和prependTo():在现存元素的内部,从前面插入元素

3、after()和insertAfter():在现存元素的外部,从后面插入元素

4、before()和insertBefore():在现存元素的外部,从前面插入元素

删除节点
$('#div1').remove();

滚轮事件与函数节流

jquery.mousewheel插件使用

jquery中没有鼠标滚轮事件,原生js中的鼠标滚轮事件不兼容,可以使用jquery的滚轮事件插件jquery.mousewheel.js。

函数节流

javascript中有些事件的触发频率非常高,比如onresize事件(jq中是resize),onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件,在短事件内多处触发执行绑定的函数,可以巧妙地使用定时器来减少触发的次数,实现函数节流。

json

json是 JavaScript Object Notation 的首字母缩写,单词的意思是javascript对象表示法,这里说的json指的是类似于javascript对象的一种数据格式,目前这种数据格式比较流行,逐渐替换掉了传统的xml数据格式。

javascript自定义对象:

var oMan = {
name:'tom',
age:16,
talk:function(s){
alert('我会说'+s);
}
}

json格式的数据:

{
"name":"tom",
"age":18
}

与json对象不同的是,json数据格式的属性名称和字符串值需要用双引号引起来,用单引号或者不用引号会导致读取数据错误。

json的另外一个数据格式是数组,和javascript中的数组字面量相同。

["tom",18,"programmer"]

ajax与jsonp

ajax技术的目的是让javascript发送http请求,与后台通信,获取数据和信息。ajax技术的原理是实例化xmlhttp对象,使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行,从而实现异步。

同步和异步

现实生活中,同步指的是同时做几件事情,异步指的是做完一件事后再做另外一件事,程序中的同步和异步是把现实生活中的概念对调,也就是程序中的异步指的是现实生活中的同步,程序中的同步指的是现实生活中的异步。

局部刷新和无刷新

ajax可以实现局部刷新,也叫做无刷新,无刷新指的是整个页面不刷新,只是局部刷新,ajax可以自己发送http请求,不用通过浏览器的地址栏,所以页面整体不会刷新,ajax获取到后台数据,更新页面显示数据的部分,就做到了页面局部刷新。

同源策略

ajax请求的页面或资源只能是同一个域下面的资源,不能是其他域的资源,这是在设计ajax时基于安全的考虑。特征报错提示:

XMLHttpRequest cannot load https://www.baidu.com/. No
'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'null' is therefore not allowed access.
$.ajax使用方法
常用参数:
1、url 请求地址
2、type 请求方式,默认是'GET',常用的还有'POST'
3、dataType 设置返回的数据格式,常用的是'json'格式,也可以设置为'html'
4、data 设置发送给服务器的数据
5、success 设置请求成功后的回调函数
6、error 设置请求失败后的回调函数
7、async 设置是否异步,默认值是'true',表示异步

以前的写法:

$.ajax({
url: 'js/data.json',
type: 'GET',
dataType: 'json',
data:{'aa':1}
success:function(data){
alert(data.name);
},
error:function(){
alert('服务器超时,请重试!');
}
});
新的写法(推荐):
$.ajax({
url: 'js/data.json',
type: 'GET',
dataType: 'json',
data:{'aa':1}
})
.done(function(data) {
alert(data.name);
})
.fail(function() {
alert('服务器超时,请重试!');
}); // data.json里面的数据: {"name":"tom","age":18}
jsonp

ajax只能请求同一个域下的数据或资源,有时候需要跨域请求数据,就需要用到jsonp技术,jsonp可以跨域请求数据,它的原理主要是利用了

Web—07-JQuery的更多相关文章

  1. [转]使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解

    在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...

  2. Web前端JQuery面试题(三)

    Web前端JQuery面试题(三) 1.怎么阻止冒泡过程? stopPropagation(); // 阻止冒泡过程 2.ready()方法和onload()方法的区别? onload()方法要等页面 ...

  3. Web前端JQuery面试题(二)

    Web前端JQuery面试题(二) 1.请写出jquery的语法? <script type="text/javascript"> $(document).ready( ...

  4. Web前端JQuery面试题(一)

    Web前端JQuery面试题(一) 一:选择器 基本选择器 什么是#id,element,.class,*,selector1, selector2, selectorN? 答: 根据给定的id匹配一 ...

  5. 前端07 /jQuery初识

    前端07 /jQuery初识 目录 前端07 /jQuery初识 1.jquery介绍 1.1 jquery的优势 1.2 jquery是什么? 1.3 jquery的导入 2.jQuery的使用 2 ...

  6. Python之Web前端jQuery扩展

    Python之Web前端: 一. jQuery表单验证 二. jQuery扩展 三. 滚动菜单 一. jQuery表单验证: 任何可以交互的站点都有输入表单,只要有可能,就应该对用户输入的数据进行验证 ...

  7. html5文章 -- 使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 基础

    这篇文章是使用 jQuery Mobile 与 HTML5 开发 Web App 系列的第二篇,在本文以及接下来的数篇文章 Kayo 将会介绍 jQuery Mobile 的组件.事件响应以及可以调用 ...

  8. 静态Web开发 JQuery

    伍章 JQuery 1节介绍JQuery和顶级对象 <<锋利的JQuery>>JQuery官网: http://jquery.com (下载jquery工具)JQuery在线A ...

  9. 移动Web框架:jQuery Mobile VS Sencha Touch

    最近常被问到是用 jQuery Mobile还是Sencha Touch,本人也比较关注这两个框架,试图从以下两方面发表点儿见解: 身家背景,都系出名门 1.jQuery Mobile 建立在jQue ...

  10. web前端-----jQuery

    web前端之jQuery篇 一 jQuery是什么? [1]   jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. [2]   j ...

随机推荐

  1. SSM 框架-03-MyEclipse+Tomcat+MAVEN+SVN项目完整环境搭建

    SSM 框架-03-MyEclipse+Tomcat+MAVEN+SVN项目完整环境搭建 如果你是使用 Eclipse 你需要先安装 MyEclipse,请参考:SSM 框架-02-MyEclipse ...

  2. 常见网络编程面试题答案征集与面试题(收集) ZZ 【网络编程】

    http://www.cnblogs.com/wickedboy237/archive/2013/05/12/3074362.html 1:tcp和udp的区别2:流量控制和拥塞控制的实现机制3:滑动 ...

  3. 使用元数据简化jdbc代码---查询操作(用到反射)

    使用元数据简化jdbc代码---查询操作(用到反射) 一  思路分析 简化就是把共同的地方提取出来并放到一个方法里,在用到时只要调用就ok了,上一篇介绍了更新的操作,而查询的操作相对来说比较复杂,因为 ...

  4. Facebook POP 使用指南

    Facebook POP 使用指南 Pop是一个动画引擎,用以扩展iOS.OSX的动画类型.相较于iOS.OSX中的基本动画效果,Pop扩展后支持弹簧动画效果与衰减动画效果,你可以用Pop动画引擎来构 ...

  5. [翻译] ABPadLockScreen

    ABPadLockScreen ABPadLockScreen aims to provide a universal solution to providing a secure keypad/pi ...

  6. 编码学习---代码OJ网站

    代码OJ网站: https://leetcode-cn.com/accounts/login/

  7. Linux bash内置命令集

    man cd  -->查询不到,所以会提示bash的内置命令 . alias bg bind break builtin caller cd command compgen complete c ...

  8. 小J学python--Exception-异常

    现在我们要打开一个名为fuck的文件,fuck是不存在的,看看异常是怎么工作的 不捕获异常的情况 #打开文件 open('fuck') 执行结果 捕获所有异常 Exception是所有异常类的父类,所 ...

  9. 3、Python文件操作工具 xlwt 工具

    # _*_ encoding:utf-8 _*_ import xlrdimport xlwt #新建excel文件excel = xlwt.Workbook(encoding='utf-8')#添加 ...

  10. 使用android studio检测app内存泄漏【转载】

    Android开发中难免会遇到各种内存泄漏,如果不及时发现处理,会导致出现内存越用越大,可能会因为内存泄漏导致出现各种奇怪的crash,甚至可能出现因内存不足而导致APP崩溃. 一般检测android ...