蒋振飞的博客 - jQuery使用详细入门   
正在加载蒋振飞的博客...
V3.0
蒋振飞的博客

jQuery使用详细入门

发布时间: 2018年07月14日 发布人: 蒋振飞 热度: 474 ℃ 评论数: 0

一、jQuery加载

1.元素加载

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

<script type="text/javascript">
    $(document).ready(function(){
        ......
    });
</script>

    可以简写为:

<script type="text/javascript">
    $(function(){
        ......
    });
</script>

二、jQuery选择器

1.jQuery选择器

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

$(document)           // 选择整个文档对象
$('li')               // 选择所有的li元素
$('#myId')            // 选择id为myId的网页元素
$('.myClass')         // 选择class为myClass的元素
$('input[name=first]') // 选择name属性等于first的input元素
$('#ul1 li span')   // 选择id为为ul1元素下的所有li下的span元素

2.对选择集进行修饰过滤(类似CSS伪类)

$('#ul1 li:first') // 选择id为ul1元素下的第一个li
$('#ul1 li:odd')   // 选择id为ul1元素下的li的奇数行
$('#ul1 li:eq(2)') // 选择id为ul1元素下的第3个li
$('#ul1 li:gt(2)') // 选择id为ul1元素下的前三个之后的li
$('#myForm :input') // 选择表单中的input元素
$('div:visible')    //选择可见的div元素

3.对选择集进行函数过滤

$('div').has('p');          // 选择包含p元素的div元素
$('div').not('.myClass');   //选择class不等于myClass的div元素
$('div').filter('.myClass'); //选择class等于myClass的div元素
$('div').first();           //选择第1个div元素
$('div').eq(5);             //选择第6个div元素

4.选择集转移

$('div').prev('p');       //选择div元素前面的第一个p元素
$('div').next('p');       //选择div元素后面的第一个p元素
$('div').closest('form'); //选择离div最近的那个form父元素
$('div').parent();        //选择div的父元素
$('div').children();      //选择div的所有子元素
$('div').siblings();      //选择div的同级元素
$('div').find('.myClass'); //选择div内的class等于myClass的元素

三、jQuery样式操作

1.操作行间样式

// 获取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。

2.操作样式类名

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

四、jQuery属性操作

1.html函数

// 取出html内容
var $htm = $('#div1').html();
// 设置html内容
$('#div1').html('<span>添加文字</span>');

2.text函数

// 取出文本内容
var $htm = $('#div1').text();
// 设置文本内容
$('#div1').text('<span>添加文字</span>');

3.attr函数

// 取出图片的地址
var $src = $('#img1').attr('src');
// 设置图片的地址和alt属性
$('#img1').attr({ src: "test.jpg", alt: "Test Image" });

4.绑定click事件

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

$('#btn1').click(function(){
    // 内部的this指的是原生对象
    // 使用jquery对象用 $(this)
})

五、jQuery特殊效果

$btn.click(function(){
    $('#div1').fadeIn(1000,'swing',function(){
        alert('done!');
    });
});

fadeIn()      // 淡入
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).height();

4.获取页面高度

$(document).height();

5.获取页面滚动距离

$(document).scrollTop();  
$(document).scrollLeft();

6.页面滚动事件

$(window).scroll(function(){  
    ......  
})

九、jQuery事件

1.事件函数列表

blur()     // 元素失去焦点
focus()    // 元素获得焦点
change()   // 表单元素的值发生变化
click()    // 鼠标单击
dblclick() // 鼠标双击
mouseover() // 鼠标进入(进入子元素也触发)
mouseout() // 鼠标离开(离开子元素也触发)
mouseenter()// 鼠标进入(进入子元素不触发)
mouseleave() // 鼠标离开(离开子元素不触发)
hover() // 同时为mouseenter和mouseleave事件指定处理函数
mouseup() // 松开鼠标
mousedown() // 按下鼠标
mousemove() // 鼠标在元素内部移动
keydown() // 按下键盘
keypress() // 按下键盘
keyup() // 松开键盘
load() // 元素加载完毕
ready() // DOM加载完成
resize() // 浏览器窗口的大小发生改变
scroll() // 滚动条的位置发生变化
select() // 用户选中文本框中的内容
submit() // 用户递交表单
toggle() // 根据鼠标点击的次数,依次运行多个函数
unload() // 用户离开页面

2.绑定事件的其他方式

$(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');

    });
});

十、主动触发与自定义事件

1.主动触发

    可使用jQuery对象上的trigger方法来触发对象上绑定的事件。

2.自定义事件

    除了系统事件外,可以通过bind方法自定义事件,然后用tiggle方法触发这些事件。

//给element绑定hello事件
element.bind("hello",function(){
    alert("hello world!");
});
    

//触发hello事件
    element.trigger("hello");

十一、事件冒泡

1.什么是事件冒泡

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

2.事件冒泡的作用

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

3.阻止事件冒泡

    事件冒泡机制有时候是不需要的,需要阻止掉,通过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>

4.阻止默认行为

    阻止右键菜单。

$(document).contextmenu(function(event) {
    event.preventDefault();
});

5.合并阻止操作

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

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

十二、事件委托

1.事件委托

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

2.一般绑定事件的写法

$(function(){
    $ali = $('#list li');
    $ali.click(function(event) {
        $(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

3.事件委托的写法

$(function(){
    $list = $('#list');
    $list.delegate('li', 'click', function(event) {
        $(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

4.取消事件委托

// ev.delegateTarge 委托对象
$(ev.delegateTarge).undelegate();
// 上面的例子可使用 $list.undelegate();

十三、jQuery元素节点操作

1.创建节点

var $div = $('<div>');
var $div2 = $('<div>这是一个div元素</div>');

2.插入节点

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

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

    ②prepend()和prependTo():在现存元素的内部,从前面插入元素
    ③after()和insertAfter():在现存元素的外部,从后面插入元素
    ④before()和insertBefore():在现存元素的外部,从前面插入元素

3.删除节点

$('#div1').remove();

十四、滚轮事件与函数节流

1.jquery.mousewheel插件使用

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

2.函数节流

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

十五、ajax与jsonp

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

1.同步和异步

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

2.局部刷新和无刷新

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

3.同源策略

    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.

4.$.ajax使用方法

    常用参数:
    ①url 请求地址
    ②type 请求方式,默认是'GET',常用的还有'POST'
    ③dataType 设置返回的数据格式,常用的是'json'格式,也可以设置为'html'
    ④data 设置发送给服务器的数据
    ⑤success 设置请求成功后的回调函数
    ⑥error 设置请求失败后的回调函数
    ⑦async 设置是否异步,默认值是'true',表示异步
    以前的写法:

$.ajax({
    url: 'js/user.json',
    type: 'GET',
    dataType: 'json',
    data:{'aa':1}
    success:function(data){
         ......
},
    error:function(){
        alert('服务器超时,请重试!');
    }
});

    新的写法(推荐):

$.ajax({
    url: 'js/user.json',
    type: 'GET',
    dataType: 'json',
    data:{'aa':1}
})
.done(function(data) {
     ......
})
.fail(function() {
    alert('服务器超时,请重试!');
});

5.jsonp

    ajax只能请求同一个域下的数据或资源,有时候需要跨域请求数据,就需要用到jsonp技术,jsonp可以跨域请求数据,它的原理主要是利用了script标签可以跨域链接资源的特性。
    jsonp的原理如下:

<script type="text/javascript">
    function aa(dat){
        alert(dat.name);
    }
</script>

<script type="text/javascript" src="....../js/data.js"></script>

    页面上定义一个函数,引用一个外部js文件,外部js文件的地址可以是不同域的地址,外部js文件的内容如下:

aa({"name":"tom","age":18});

    外部js文件调用页面上定义的函数,通过参数把数据传进去。

十六、正则表达式

1.什么是正则表达式

    能让计算机读懂的字符串匹配规则。

2.正则表达式的写法

var re=new RegExp('规则', '可选参数');
var re=/规则/参数;

3.规则中的字符

    1) 普通字符匹配

        /a/ 匹配字符 "a",/a,b/ 匹配字符 "a,b"。
    2) 转义字符匹配

        ①\d 匹配一个数字,即0-9。
        ②\D 匹配一个非数字,即除了0-9。
        ③\w 匹配一个单词字符(字母、数字、下划线)。
        ④\W 匹配任何非单词字符。等价于[^A-Za-z0-9_]。
        ⑤\s 匹配一个空白符。
        ⑥\S 匹配一个非空白符。
        ⑦\b 匹配单词边界。
        ⑧\B 匹配非单词边界。
        ⑨. 匹配一个任意字符,除了换行符"\n"和回车符"\r"。

4.量词

    对左边的匹配字符定义个数。
    ①? 出现零次或一次(最多出现一次)。
    ②+ 出现一次或多次(至少出现一次)。
    ③* 出现零次或多次(任意次)。
    ④{n} 出现n次。
    ⑤{n,m} 出现n到m次。
    ⑥{n,} 至少出现n次。

5.任意一个或者范围

    ①[abc123] : 匹配&lsquo;abc123&rsquo;中的任意一个字符。
    ②[a-z0-9] : 匹配a到z或者0到9中的任意一个字符。

6.限制开头结尾

    ①^ 以紧挨的元素开头。
    ②$ 以紧挨的元素结尾。

7.修饰参数

    ①g: global,全文搜索,默认搜索到第一个结果接停止。
    ②i: ingore case,忽略大小写,默认大小写敏感。
    ③m: multiple lines,多行搜索(更改^ 和$的含义,使它们分别在任意一行对待行首和行尾匹配,而不仅仅在整个字符串的开头和结尾匹配)。

8.常用函数

    1) test

        用法:正则.test(字符串) 匹配成功,就返回真,否则就返回假。

    2) search

        用法:字符串.search(正则) 匹配成功,返回位置,否则返回-1。

    3) match

        用法: 字符串.match(正则);匹配成功,就返回匹配成功的数组,否则就返回null。

    4) replace

        用法:字符串.replace(正则,新的字符串) 匹配成功的字符去替换新的字符。

9.正则默认规则

    匹配成功就结束,不会继续匹配,区分大小写

十七、本地存储

1.本地存储

    本地存储分为cookie,以及新增的localStorage和sessionStorage

2.cookie

    ①cookie 存储在本地,容量最大4k,在同源的http请求时携带传递,损耗带宽,可设置访问路径,只有此路径及此路径的子路径才能访问此cookie,在设置的过期时间之前有效。
    ②jQuery 设置cookie

$.cookie('mycookie','123',{expires:7,path:'/'});

    ③jquery 获取cookie

$.cookie('mycookie');

3.localStorage 

    localStorage存储在本地,容量为5M或者更大,不会在请求时候携带传递,在所有同源窗口中共享,数据一直有效,除非人为删除,可作为长期数据。

// 设置
localStorage.setItem("dat", "456");
localStorage.dat = '456';
// 获取
localStorage.getItem("dat");
localStorage.dat
// 删除
localStorage.removeItem("dat");

4.sessionStorage 

    ①sessionStorage 存储在本地,容量为5M或者更大,不会在请求时候携带传递,在同源的当前窗口关闭前有效。
    ②localStorage 和 sessionStorage 合称为Web Storage , Web Storage支持事件通知机制,可以将数据更新的通知监听者,Web Storage的api接口使用更方便。
    ③iPhone的无痕浏览不支持Web Storage,只能用cookie。

打赏 蒋振飞

取消

感谢您的支持,我会继续努力的!

扫码支持
一分也是爱     一块不嫌多

点击 支付宝 或 微信 打赏蒋振飞

打开支付宝扫一扫,即可进行扫码打赏哦

评论列表

  1. 移动端库和框架 792 ℃
  2. Javascript学习入门 (全) 573 ℃
  3. HTML5与CSS3新知识 649 ℃
  4. CSS基础入门 (全) 589 ℃
  5. HTML基础入门 (全) 461 ℃