码迷,mamicode.com
首页 > Web开发 > 详细

学习JQuery,这篇文件即可入门

时间:2018-09-05 12:48:04      阅读:214      评论:0      收藏:0      [点我收藏+]

标签:冒泡   dde   事件监听   color   class   默认   代理   按钮   val   

JQuery的引用
本地文件引入:
<script src=‘js/jquery.min.js‘></script>

内容分布式网络CDN
//非压缩版
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>; 开发
//压缩版
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>; 正式发布

JQuery源码分析
http://www.cnblogs.com/aaronjs/p/3279314.html

如何判断是否真正的引入了JQuery
输入 $.fn.jquery
输出 "3.2.1"

JQuery的官网https://jquery.com

JQuery的使用
$相当于jQuery,是jquery的别名
$ === jQuery;
JQuery相当于构造函数

$()是jQuery()的简写 类数组带有额外方法

$(string)
$(‘.footer‘); //将类名为footer的元素转为jQuery对象(相当于selector)
$(‘<div></div>‘); //生成一个div的jQuery对象(相当于html text)

$(dom element)
//获取所有段落元素DOM
var paragraphs = document.getElementByTagName(‘p‘);
var $paragraphs = $(paragraphs); //将DOM转换为jQuery对象

//使用eq,get,索引
var $firstParagraph = $paragraphs.eq(0); //jQuery对象
var firstParagraph = $paragraphs[0]; //DOM
var secondParagraph = $paragraphs.get(1); //DOM

JQuery选择器
jQuery选择器 —>CSS选择器
(链接coding.imweb.io/demo/p4/jquery-selector.html)
JQuery选择器分为3大类
1.基本选择器
$(tag) 按标签选择 例:$(‘div‘);//查找div标签
$(.class) 按类名选择 例:$(‘.footer‘);//查找类名为footer的元素
$(#id) 按标签id选择 例:$(‘#cat-tab‘);//查找标签id为cat-tab的元素
$() 匹配所有元素 例$(‘‘);//查找所有元素
2.组合选择器
$(selector1,selector2) 多元素选择器 例:$(‘div.p‘);
$(selector1 selector2) 后代元素选择器 例:$(‘.footer p‘);
$(selector1 > selector2) 子元素选择器 例:$(‘.footer > p‘);
$(selector1 + selector2) 毗邻元素选择器 例:$(‘.footer + p‘);
3.其他选择器
$(selector:first-child) 选取第一个子元素 例:$(‘.footer:first-child‘);
$(selector:last-child) 选取最后一个子元素 例:$(‘.footer:last-child‘);
$(selector:eq(index)) 选取集合中第index个元素 例:$(‘.item:eq(2)‘);
$(attribute=value) 选取属性值为value的元素 例:$(‘[value=2]‘);

遍历DOM

技术分享图片

// 获取父元素(一个)
$(‘#me‘).parent();

// 获取所有父元素和祖先元素(多个)
$(‘#me‘).parents();

// 使用.eq()函数获取相应元素
$(‘#me‘).parents().eq(0); //获取爸爸
$(‘#me‘).parents().eq(1); //获取爷爷

//使用.parents(selector)来精确查找
$(‘#me‘),parents(‘.fat‘);
$(‘#me‘).parents(‘.oldest‘);

//获取所有的兄弟元素
$(‘#me‘).siblings(); 多个

//使用.siblings(selector)来精确查找
$(‘#me‘),siblings(‘.tall‘);
技术分享图片

目标换为爷爷

//使用.children()获取子元素
$(‘#grandPa‘).children();
// 使用.find(‘‘)获取所有子孙元素
$(‘#grandPa‘).find(‘
‘);

//使用.find(selector)精准获取子孙元素(前提是该子孙有,youngest选择器)
$(‘#grandPa‘).find(‘.youngest‘);

最常见的6种选择器
.parent()
.parents()
.eq()
.siblings()
.children()
.find()

(链接coding.imweb.io/demo/p4/query-traversal.html)

添加和移除DOM元素
append/appendTo 在被选元素的结尾插入内容(元素内)
prepend/prependTo 在被选元素的开头插入内容(元素内)
after/inserAfter 在被选元素之后插入内容(元素外)
before/inserBefore 在被选元素之前插入内容(元素外)

技术分享图片

想把自己的后代干掉
$(‘#father‘).empty()
想把自己以及后代都干掉
$(‘#father‘).remove()

使用方法
$(document.body).append(‘<div>厉害厉害</div>‘)
$(document.body).prepend(‘<div>厉害厉害</div>‘)
$(‘<div>厉害厉害</div>‘).prependTo(document.body)
$(‘<div>厉害厉害</div>‘).appendTo(document.body)

$(‘h1‘).eq(0).after(‘<h2>呵呵呵</h2>‘)
$(‘h1‘).eq(0).before(‘<h2>呵呵呵</h2>‘)
$(‘<h2>呵呵呵</h2>‘).inserBefore($(‘h1‘).eq(0))
$(‘<h2>呵呵呵</h2>‘).inserAfter($(‘h1‘).eq(0))

增加一个ul来显示操作系统,类似于js的实现
$(document .body).append(‘<h2>OS 列表</h2><ul><li></li>MAC<li>WIN</li><li>Linux</li><ul>‘)

jQuery事件监听
1.触发事件的目标元素
2.触发的事件名称
3.事件触发时的回调
4.事件对象

点击按钮改变背景颜色为×××

$(‘#traget‘).on(‘click‘,function(event) {
console.log(‘target‘); //被点击了
$(‘body‘ ).css(‘background‘,‘#ff0‘);
});
$(‘#target‘)事件目标元素
on 事件监听函数
‘click‘ 监听的事件名称
整个function() 事件触发执行的回调callback
event jQuery事件对象

jQuery事件对象—>封装原生事件对象(并且做了浏览器兼容,增加好用的属性和方法)

例:

$(‘a‘)on(‘click‘,function(event){
console.log(event.target);//获取触发事件的元素
event.preventDefault(); //阻止默认事件
event.stopPropagation(); //阻止事件冒泡
});
和下面的效果是一样的

$(‘a‘).on(‘click‘,function(event){
console.log(event.target); //获取触发事件的元素
return false; //既阻止默认事件,且阻止事件冒泡
});

点击按钮修改背景颜色

$(‘#button‘).on(‘click‘,function(event){
$(‘section‘).css(‘backgroundColor‘,yellow);
});

使用 jQuery 编写一个事件监听器,需要完成以下要求:
触发事件的目标元素为 #target
监听的是一个 click 事件
当事件触发时,需要增加类名 disabled 到目标元素上

$(‘#target‘).on(‘click‘, function() {
$(this).addClass(‘disabled‘);
});

toggleClass(‘classname‘) 对设置或移除被选元素的一个或多个类进行切换

事件的委托
事件委托就是利用时间冒泡,只指定一个时间处理程序,就可以管理某一类型的所有事件。
事件委托是利用事件的冒泡原理来实现的,何为事件冒泡呢?就是事件从最深的节点开始,然后逐步向上传播事件,举个例子:页面上有这么一个节点树,div>ul>li>a;比如给最里面的a加一个click点击事件,那么这个事件就会一层一层的往外执行,执行顺序a>li>ul>div,有这样一个机制,那么我们给最外面的div加点击事件,那么里面的ul,li,a做点击事件的时候,都会冒泡到最外层的div上,所以都会触发,这就是事件委托,委托它们父级代为执行事件。
一般来说我们要给某个元素绑定事件,都会直接绑定在该元素上,如下:

// 给 li 元素绑定点击事件
$(‘li‘).click(function() {
console.log(‘你点击我了‘);
})
但是这种直接的处理会有以下问题:
——通过 JS 新添加的 li 元素并没有该事件绑定,所以点击无效
——元素如果比较多的话,比喻有200个 li ,那每个 li 都绑定一个事件,性能是非常低的
那么如何解决这些问题呢?这就是我们要说的事件委托(或叫事件代理)。
事件委托简单来说就是利用事件冒泡,只指定一个事件处理程序,用来管理某一类型的所有事件。
以一个 todo list 为例:

// 要点击的元素是 todo-item// 但是我们把事件绑定在父元素 todo-list 上,实现事件委托// html 结构为:ul#todo-list>li.todo-item*5

$(‘#todo-list‘).on(‘click‘, ‘.todo-item‘, function() {
$(this).toggleClass(‘done‘);
})
以 jQuery 为例,所以我们看不到背后的本质,下面我们以一个原生的实现来说明下:

var todoList = document.getElementById("todo-list");

todoList.addEventListener("click", function (e) {
var target = e.target;
// 检查事件源 target 是否为 todo-item
if (target && target.nodeName.toUpperCase() == ‘LI‘ && target.classList.contains(‘todo-item‘)) {
target.classList.toggle(‘done‘)
} else {
console.log(‘我不是 todo-item ‘);
}
});
注:因为事件委托是依赖于事件冒泡的,所以没有事件冒泡的事件是不能使用事件委托的。
适合用事件委托的事件:click,mousedown,mouseup,keydown,keyup,keypress。

学习JQuery,这篇文件即可入门

标签:冒泡   dde   事件监听   color   class   默认   代理   按钮   val   

原文地址:http://blog.51cto.com/13955485/2170572

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!