jq基础笔记02
2016-12-02 20:30
393 查看
1.1 复习jQuery操作DOM
jQuery课程的目标:学会使用jQuery设计常见效果选择器
基本选择器:#id 、.class 、element、* 、
层级选择器:空格、>、+、~
基本过滤选择器::first、:last、:eq(index)、:lt(index)、:gt(index)、:odd奇数、:even
筛选选择器:.eq(index)、.children()、.parent()、.siblings()、.find()
动画:show、hide、fadeIn、fadeOut、fadeTo(透明度)、slideDown、slideUp、slideToggle
animate
DOM操作:.css()、addClass(“className”)、removeClass()、toggleClass
.attr()、removeAttr()、.val()、.html(“<p></p>”)、text()
node.append(“<p>我是追加的内容</p>”)、prePend()
1.2 元素操作
1.2.1 高度和宽度
$(“div”).height(); // 高度$(“div”).width(); // 宽度
.height()方法和.css(“height”)的区别:
$(window).width()表示窗口的可视区的宽度
1. 返回值不同,.height()方法返回的是数字类型(20),.css(“height”)返回的是字符串类型(20px),因此.height()方法常用在参与数学计算的时候
可用parseInt()
1.2.2 坐标值
注意$(“div”).offset(); 特殊 只相对于文档(不管是不是子绝父相,设置值要写json格式) // 获取或设置坐标值 设置值后变成相对定位
position:relative;
$('#div2').offset().left;
获取值
$('#div2').offset().top;
获取值
$("p:last").offset({ top: 10, left: 30}); 设置值
$(“div”).position(); (根据子绝父相) // 获取坐标值 子绝父相
只能读取不能设置
$('#div2').position().left;
$('#div2').position().top;
1.2.3 滚动条(滚动事件)
$(“div”).scrollTop(); // 相对于滚动条顶部的偏移$(“div”).scrolllLeft(); // 相对于滚动条左部的偏移(获取和设置的方法)
用法:var l=$("div").scrollLeft();
var
r=$("div").scrollTop();
$("div").scrollLeft(l+10).scrollTop(r+10);
案例:两次跟随的广告 $(".left,.right").stop().animate({"top" :
$(document).scrollTop()+50},600);
滚动的高度+top值
案例:防腾讯固定导航栏 var H
= $(".top").height();
$(window).scroll(function() {
var
docSccrollTop=
$(document).scrollTop();
if(docSccrollTop>
H){
$(".nav").css({"position":"fixed","top":0});
//
此时 nav的位置固定,如果不设置 main部分的margin-top的话,将有一部分内容被挡住
nav的高度+开始设置的20
$(".main").css("margin-top",106);
}else{
$(".nav").css({"position":"static"});
/*静态定位*/
10e1b
$(".main").css("margin-top",20);
}
});
1.3 jQuery事件(强烈推荐使用on)
1.3.1 绑定
click/mouseenter/blur/keyup// 绑定事件
bind:$node.bind(“click”,function(){});
// 只触发一次
one : $node.one(“click”,function(){});
注意:delegate和on绑定三个参数时是顺序是不一样的
delegate :$node.delegate(“p”,”click”,function(){});
on: $node.on(“click”,”p”,function(){}); $node为父元素
1.3.2 解绑
unbind、undelegateoff
1.3.3 触发
click : $(“div”).click();trigger:触发事件,并且触发浏览器默认行为 自动触发
triggerHandler:不触发浏览器默认行为
默认行为有a链接,submit有提交刷新
注意:参数顺序不能变,但可省略
### 3.2
绑定事件的方式 bind方式(不推荐,1.7以后的jQuery版本被on取代,所以强烈推荐使用on方法)
+ 语法格式:.bind( eventType
[, eventData ],handler )
+ 参数说明
- 第一个参数:事件类型
'click' 'mouseleave'
- 第二个参数:传递给事件响应方法的数据对象,可以省略。
一般省略
- 事件响应方法中获取数据方式: e.data
- 第三个参数:事件响应方法
+ **第二个参数可以省略。**
```
例如:
$("p").bind("click", function(e){
//事件响应方法
});
```
### 3.3 delegate方式(推荐,性能高,支持动态创建的元素)
+ 语法格式:$(selector).delegate( selector, eventType,handler )
+ 语法说明:
*
第一个参数:selector,子选择器
*
第二个参数:事件类型
*
第三个参数:事件响应方法
```
例如:
$(".parentBox").delegate("p", "click",function(){
//为 .parentBox下面的所有的p标签绑定事件
});
```
*优势:效率较高*
### 3.4 on方式(最现代的方式,兼容zepto,强烈建议使用的方式)
+ jQuery1.7版本后,jQuery用on统一了所有的事件处理的方法
+ 语法格式:$(selector).on( events
[,selector ] [, data ], handler )
+ 参数介绍:
*
第一个参数:events,事件名
*
第二个参数:selector,类似delegate
*
第三个参数: 传递给事件响应方法的参数
*
第四个参数:handler,事件处理方法
```
例如:
//绑定一个方法
$( "#dataTabletbody tr" ).on( "click", function() {
console.log( $( this).text() );
});
//给子元素绑定事件
$( "#dataTabletbody" ).on( "click", "tr", function() {
console.log( $( this ).text() );
});
//绑定多个事件的方式要记一下 (用json
的方法就行)
$("div.test" ).on({
click: function() {
$( this).toggleClass( "active" );
}, mouseenter:function() {
$( this).addClass( "inside" );
}, mouseleave:function() {
$( this).removeClass( "inside" );
}
});
```
### 3.5 one只绑定一次事件的方式
+ .one( events [, data ], handler )
```
例如:
$( "p").one( "click", function() {
alert( $( this).text() );
});
```
### 3.6
解绑事件
+ unbind解绑 bind方式绑定的事件(
在jQuery1.7以上被 on和off代替)
*$(selector).unbind(); //解绑所有的事件
*$(selector).unbind("click"); //解绑指定的事件
+ undelegate解绑delegate事件
* $("p" ).undelegate(); //解绑所有的delegate事件
* $("p" ).undelegate( "click" ); //解绑所有的click事件
```
例如:
var foo = function (){
// Code to handlesome kind of event
};
// ... Now foo will becalled when paragraphs are clicked ...
$( "body").delegate( "p", "click", foo );
// ... foo will nolonger be called.
$( "body").undelegate( "p", "click", foo );
```
+ off解绑on方式绑定的事件
* $("p" ).off();
* $("p" ).off( "click", "**" ); //
解绑所有的click事件,两个\*表示所有
* $("body" ).off( "click", "p", foo );
```
案例1:
var foo = function() {
// Code to handlesome kind of event
};
// ... Now foo will becalled when paragraphs are clicked ...
$( "body").on( "click", "p", foo );
// ... Foo will nolonger be called.
$( "body").off( "click", "p", foo );
案例2:(了解)解绑命名空间的方式:
var validate =function() {
// Code to validateform entries
};
// Delegate eventsunder the ".validator" namespace
$( "form").on( "click.validator", "button", validate );
$( "form").on( "keypress.validator", "input[type='text']", validate);
// Remove eventhandlers in the ".validator" namespace
$( "form").off( ".validator" );
```
### 3.7
触发事件
+ 简单事件触发
*$(selector).click(); //触发 click事件
+ trigger方法触发事件
* $("#foo" ).trigger( "click" );
+ triggerHandler触发事件响应方法,不触发浏览器行为
* $("input" ).triggerHandler( "fo
1.4 jQuery事件对象介绍(不理解???==已理解)
event.stopPropagation() //阻止事件冒泡event.preventDefault(); //阻止默认行为
1.5 jQuery补充
需要注意的地方:animate动画:不支持背景的动画效果(后面引入api就可以实现了)
animate动画支持的属性列表
参考手册(不全)、
在线文档:
w3school:http://www.w3school.com.cn/jquery/index.asp
jQuery官网:http://jquery.com/
$()的几种常用用法:
1.$(“#id”) 选择某个元素,返回值为jQuery对象
2.$(this) 将DOM对象转换成jQuery对象
3.$(“<div></div>”) 创建元素,返回值为jQuery对象
4.$(function(){}); 入口函数的简写方式
$("div").html() 获取内容的时候,只返回匹配到的第一个元素的数据
.html()和.text()的区别
document.write($("div").html());
// 结果 111111
只返回第一个元素的值
document.write($("div").text());
// 结果
只返回所有元素的值1111112222222223333334444
链式编程问题:
$("div").html() 后面就不能继续链式了?
为什么?函数返回值问题!
$node.each(function(index,element){});
$.each([1,2,3,5,6,7], function (i,v) {
console.log(i + " : " + v);
});
map返回数组(了解)
$(“li”).map(function(){
return $(this).text();
});
1.5.1 数据缓存
$(“div”).data(“index”); // 获取数据index的值注意:
html里面的data 属性,例如:data-ROLE,jQuery获取的时候用:$(“div”).data(“role”);
当使用jQuery设置data属性的时候,例如:$(“div”).data(“UPCASE”,123); ,那么获取的时候,要使用:$(“div”).data(“UPCASE”);
<div data-role="page"data-last-value="43" data-hidden="true"data-options='{"name":"John"}'>注意HTML属性不区分大小写</div>
$( "div" ).data( "lastValue" )=== 43;
lastValue -> data-last-value
1.5.2 .data()跟.attr() 方法的区别:
1.获取数据的时候,attr方法需要传入参数,data方法可以不传入参数,这时候获取到的是一个js对象,即使没有任何data属性。2. 获取到的数据类型不同,attr方法获取到的数据类型是字符串(String),data方法获取到的是相应的类型。
3. data方法获取到数据之后,我们使用一个对象来接收它,那么就可以直接操作(设置值或获取值)这个对象,而attr方法不可以。
并且通过这种方式,要比.data(key,value)的方式更高效!
4.data-attribute属性会在页面初始化的时候放到jQuery对象,被缓存起来,而attr方法不会。
1.5.3 多库共存
同一个页面,引入包含$变量的其他js库,保证它们不发生命名冲突。// other_lib.js 包含$
<script src="other_lib.js"></script>
<script src="jquery-1.11.1.js"></script>
<script>
$.noConflict();
// 可以使用其他库的$符号了
// 使用jQuery
jQuery(document).ready(function(){});
</script>
1.5.4 jQuery优势:
1. 书写简洁、代码优雅2. Write Less,Do More
3. 强大的选择器,支持CSS1-3所有的选择器
4. 浏览器兼容性好,兼容IE6、7、8
5. 统一的入口,降低了学习、记忆成本
6. 强大的动画效果、事件支持
7. 开源、免费
8. 插件丰富,可扩展性强
1.6 jQuery插件机制
jQuery.color.jsjQuery官网插接教程:http://learn.jquery.com/plugins/basic-plugin-creation/
联系我们的手机
两种方式:
$.log =function(){};
$.fn.log= function(){};
自定义选择器:
jQuery.extend(jQuery.expr[':'], {
"class-itcast":function(ele) {
return jQuery(ele).hasClass("itcast");
}
});
$(":class-itcast").css("background","pink");
1.6.1 常用插件介绍
jQuery.lazyload.js1.6.2 插件使用:
查看API文档,了解插件的功能,提供的方法和参数。插件依赖版本
1. 引用jQuery
2. 引用插件
3. 使用插件
1.6.3 怎么写插件
演示jQuery.lxCfbg.js (自己的插件)(function ($) {
$.fn.lxCfbg = function (options) {
// 合并参数
varopts = $.extend({
"color": "#000",
"font-size": "16px",
"background-color": "#fff"
},options);
$this.css({
"color": opts.color,
"font-size": opts["font-size"],
"background-color": opts["background-color"]
});
return $this;
};
})(jQuery);
1.7 jQueryUI
jQueryUI教程相关文章推荐
- JQ方法之$()下的常用方法
- js与jquery实时监听输入框值的oninput与onpropertychange方法
- jquery的prop()方法
- showBo.js免费下载模态框对话框Jquery
- Jquery中attr和prop的区别
- 4000 JQuery中根据属性或属性值获得元素
- jQuery API 中文文档
- jQuery轮播图(一)轮播实现并封装
- jquery的整理
- Jquery Data Table插件
- Jquery cxColor 示例演示
- jQuery 选择符详细介绍及整理
- JQuery 动态生成Table表格实例代码
- jQuery实现背景滑动菜单
- 基于jQuery实现的幻灯图片切换
- 基于JQuery实现的跑马灯效果(文字无缝向上翻动)
- jquery 仿windows10菜单效果下载
- 基于jQuery的上传插件uploadify-已实践
- jQuery实现倒计时(倒计时年月日可自己输入)
- js最详细的基础,jquery 插件最全的教材