jquery 基础知识 持续更新中。。。。
| /* | |
| * | |
| * .css() | |
| * .css("属性","属性值"); | |
| * .css("属性","属性值").css("属性","属性值"); | |
| * .css({"属性":"属性值","属性":"属性值"}); | |
| * addClass() | |
| * addClass("类样式名字");添加一个类样式 | |
| * addClass("类样式名字1 类样式名字2"); | |
| * removeClass() | |
| * removeClass("类样式名字");移除类样式 | |
| * removeClass();移除的是当前元素中所有的类样式 | |
| * hasClass();判断当前元素是否应用了某个类样式 | |
| * toggleClass();切换元素的类样式的 | |
| * | |
| * | |
| * | |
| * */ |
| /* | |
| * 复习: | |
| * | |
| * 选择器: | |
| * id选择器 $("#id属性的值") | |
| * 标签选择器 $("标签名字") | |
| * 类选择器 $(".类样式的名字") | |
| * 交集选择器 $("标签.类样式的名字")---->标签+类选择器 | |
| * 并集选择器 $("选择器,选择器,选择器,...")---->多条件选择器 | |
| * 都可以看成是筛选器 | |
| * 索引选择器 $("选择器:eq(索引的值)") | |
| * 奇数筛选器 $("选择器:odd") | |
| * 偶数筛选器 $("选择器:even") | |
| * 筛选器 $("选择器:lt(索引)")--->获取小于这个索引的元素 | |
| * $("选择器:gt(索引)")--->获取大于这个索引的元素 | |
| * 其他选择器 | |
| * $("选择器:last")---->最后一个 | |
| * $("选择器:first")---->第一个 | |
| * 获取当前元素的其他的方法 | |
| * 当前元素.next()---->下一个兄弟元素 | |
| * 当前元素.nextAll()--->后面所有的兄弟元素 | |
| * 当前元素.prev()---->前一个兄弟元素 | |
| * 当前元素.prevAll()-->前面所有的兄弟元素 | |
| * 当前元素.siblings()-->所有的兄弟元素(没有自己) | |
| * 当前元素.parent()--->父级元素 | |
| * 当前元素.children()--->当前元素中所有的子元素(直接的子元素) | |
| * 当前元素.find("选择器")--->从当前元素中找某个或者是某些元素 | |
| * | |
| * 方法: | |
| * .val()---->操作表单元素的value属性,可以获取也可以设置 | |
| * .text()---->操作元素中间的文本内容的,相当于innerText | |
| * .html()---->操作元素中的html代码及内容,相当于innerHTML | |
| * .css()----->操作元素的样式 | |
| * .addClass()--->添加类样式 | |
| * .removeClass()-->移除类样式 | |
| * .hasClass()---判断元素是否应用了类样式 | |
| * .index()---->元素的索引 | |
| * | |
| * | |
| * 下面的这些动画的方法,一般都可以使用两个参数,参数1:时间,参数2:回调函数 | |
| * 参数---时间:1000毫秒---1秒 | |
| * 参数---时间:slow---慢,normal---正常,fast---快 | |
| * .show()--->显示 | |
| * .hide()--->隐藏 | |
| * .stop()---->停止动画 | |
| * animate()--->动画的方法 | |
| * slideUp()---->滑入 | |
| * slideDown()--->滑出 | |
| * slideToggle()--->切换滑入和滑出 | |
| * fadeIn()---->淡入 | |
| * fadeOut()--->淡出 | |
| * fadeToggle()--->切换淡入淡出 | |
| * fadeTo(时间,透明度的值) | |
| * | |
| * 元素创建: | |
| * $("html的代码") | |
| * 元素的添加 | |
| * 父级元素.append(子级元素); | |
| * 子级元素.appendTo(父级元素); | |
| * | |
| * clone()克隆元素 | |
| * 父级元素2.append($("父级元素1>子级元素"));,相当于剪切过去的 | |
| * | |
| * |
// 第一个参数：需要设置的属性名
// 第二个参数：对应的属性值
设置单个属性
$('img').attr({
title:'哎哟，不错哦',
alt:'哎哟，不错哦',
style:'opacity:.5'
});
// 设置属性
$(':checked').prop('checked',true);
// 获取属性
$(':checked').prop('checked'); // 返回true或者false
$obj.val( ) 获取或者设置表单元素的value属性的值
$obj.html( ) 对应innerHTML
$obj.text( ) 对应innerText/textContent，处理了浏览器的兼容性
1.设置或者获取高度，不包括内边距、边框和外边距
// 带参数表示设置高度
$('img').height(200);
// 不带参数获取高度
$('img').height();
2.获取网页的可视区宽高
// 获取可视区宽度
$(window).width();
// 获取可视区高度
$(window).height();
// 获取页面被卷曲的高度
$(window).scrollTop();
// 获取页面被卷曲的宽度
$(window).scrollLeft();
// 获取元素距离document的位置,返回值为对象：{left:100, top:100}
$(selector).offset();
// 获取相对于其最近的有定位的父元素的位置。
$(selector).position();
innerWidth()/innerHeight() 方法返回元素的宽度/高度（包括内边距）。
outerWidth()/outerHeight() 方法返回元素的宽度/高度（包括内边距和边框）。
outerWidth(true)/outerHeight(true) 方法返回元素的宽度/高度（包括内边距、边框和外边距）。
元素绑定事件
| //为元素绑定事件三种方式 | |
| /* | |
| * 对象.事件名字(事件处理函数);---$("#btn").click(function(){}); | |
| * 对象.bind("事件名字",事件处理函数);---$("#btn").bind("click",function(){}); | |
| * 父级对象.delegate("子级元素","事件名字",事件处理函数);---->$("#dv").delegate("p","click",function(){}); | |
| * | |
delegate注册委托事件（无论先后添加事件都可以绑定）
// 第一个参数：selector，要绑定事件的元素
// 第二个参数：事件类型on注册事件委托
// 第三个参数：事件处理函数
$('.parentBox').delegate('p', 'click', function(){
// 为 .parentBox下面的所有的p标签绑定事件
});
on注册简单事件
// 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。
$(selector).on( 'click', function() {});
on注册事件委托
// 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
$(selector).on( 'click','span', function() {});
on注册事件的语法：
// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
// 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
// 第四个参数：handler，事件处理函数
$(selector).on(events，[selector]，[data]，handler);
unbind（）与undelegate（）都不用，用off（）
// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off('click'，‘标签’);
// 解绑匹配元素的字标签的所有click事件
$(selector).off('click'，‘标签’);
$(selector).click(); // 触发 click事件 对象。事件名
$(selector).trigger('click');
// screenX和screenY 对应屏幕最左上角的值
// clientX和clientY 距离页面左上角的位置（忽视滚动条）
// pageX和pageY 距离页面最顶部的左上角的位置（会计算滚动条的距离）
// event.keyCode 按下的键盘代码
// event.data 存储绑定事件时传递的附加数据
// event.stopPropagation() 阻止事件冒泡行为
// event.preventDefault() 阻止浏览器默认行为
// return false:既能阻止事件冒泡，又能阻止浏览器默认行为。
作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数
// 参数一表示当前元素在所有匹配元素中的索引号
// 参数二表示当前元素（DOM对象）
$(selector).each(function(index,element){});
jQuery使用$作为标示符，但是如果与其他框架中的$冲突时，jQuery可以释放$符的控制权
var c = $.noConflict();// 释放$的控制权,并且把$的能力给了c
事件参数对象的几个属性
// e.target这个属性得到的是触发该事件的目标对象,此时是一个DOM对象
// e.currentTarget这个属性得到的是触发该事件的当前的对象
浙公网安备 33010602011771号