javaScript之jQuery框架

<table style="height: 30px; background-color: #afeeee; width: 1266px; ; width: 1266px;" border="0"><tr>
<td>一、jQuery简介</td>
</tr></table>
<div class="lemma-summary">
<div class="para"> @H_301_5@
<div class="para">　　jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。@H_301_5@
<div class="para">　　jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。@H_301_5@
<div class="para">

使用jQuery@H_301_5@

jQuery类似python里面的模块，它封装了DOM/BOM/JavaScriptd，所以我们在使用jQuery时需引入。@H_301_5@

@H_301_5@

2.可见性筛选

$(''p:visible'显示的元素注意：:hidden 过滤器一般是包含的内容为：CSS 样式为 display:none、input 表单类型为type="hidden"和 visibility:hidden 的元素 @H_301_5@

3.查找

利用jquery查找到元素后，再进行查找

children() siblings() next() nextAll() nextUntil() prev() prevAll() prevUntil() parent() 标签 parents() 标签(祖祖辈辈) parentsUntil() 标签直到什么为止(不包含)，区间 @H_301_5@

4.文档操作

$(..).text() 获取文本内容(和dom比较少了inner) $(..).text("内容

$(..).html() // 获取内容(html格式)
$(..).html("wd") // 设置内容（参数为html格式的字符串，也可以只是内容）

$(..).val() // 获取val的值(针对input系列、select等有value属性的)
$(..).val(..) // 设置val的值(针对input系列、select等有value属性的)
@H_301_5@

5.样式操作

addClass() 添加一类样式 removeClass() toggleClass() 删除添加样式流程，如果存在（不存在）就删除（添加）一类样式 @H_301_5@

6.属性操作

自定义属性 $(..).attr('n') 获取属性值 $(..).attr('n','v') 属性值 $(..).removeAttr('n') 属性

//chekBox,radio等
$(..).prop('checked') // 获取属性
$(..).prop('checked',true) // 设置属性
@H_301_5@

7.文档处理

append() 标签每个追加（尾部） prepend() 标签内部开头标签外部末尾(相当于增加兄弟，位置在后面) before() 标签外部开头（相当于增加兄弟，位置在前面）标签 empty() 标签的内容标签,克隆之后可用于添加到其他地方 @H_301_5@

8.位置处理

$('t1').css('样式名称','样式值')

// 位置相关
$(window).scrollTop() // 获取
$(window).scrollTop(0) //设置
$(window).scrollLeft([val])

offset().left // 指定标签在html中的坐标
offset().top // 指定标签在html中的坐标
position() // 指定标签相对父标签(relative)标签的坐标

height() // 获取某个元素的高度
innerHeight() // 获取某个元素的高度 + 内边距 padding
outerHeight() // 获取某个元素的高度 + 内边距 padding + 边框 border
outerHeight(true) // 获取某个元素的高度 + 内边距 padding + 边框 border + 外边距 margin

width() // 获取某个元素的宽度
innerWidth() // 获取某个元素的宽度 + 内边距 padding
outerWidth() // 获取某个元素的宽度 + 内边距 padding + 边框 border
outerWidth(true) //获取某个元素的宽度 + 内边距 padding + 边框 border + 外边距 margin
@H_301_5@

示例：

$('div').width(); 获取元素的长度，返回的类型为 number $('div').width(500); $('div').width('500pt'); $('div').width( (index,value) { value - 500; $('div').height(); //获取元素的高度，返回的类型为 number
$('div').height(500); //设置元素高度，直接传数值，默认加 px
$('div').height('500pt'); //同上，设置了 pt 单位
$('div').height(function (index,value) { //index 是索引，value 是原本值
return value - 1; //无须调整类型，直接计算
});

alert($('div').width()); //不包含
alert($('div').innerWidth()); //包含内边距 padding
alert($('div').outerWidth()); //包含内边距 padding+边框 border
alert($('div').outerWidth(true)); //包含内边距 padding+边框 border+外边距 margin

$('strong').offset().left; //相对于视口的偏移
$('strong').position().left; //相对于父元素的偏移
$(window).scrollTop(); //获取当前滚动条的位置
$(window).scrollTop(300); //设置当前滚动条的位置
@H_301_5@

9.样式操作

$('div').css('color'); 获取元素行内 CSS 样式的颜色 $('div').css('color','red'); $('div''background-color' : '#ccc''color' : 'red''font-size' : '20px'//除了行内 CSS 设置，我们也可以直接给元素添加 CSS 类，可以添加单个或多个，并且可以删除它。
$('div').addClass('red'); //添加一个 CSS 类
$('div').addClass('red bg'); //添加多个 CSS 类
$('div').removeClass('bg'); //删除一个 CSS 类
$('div').removeClass('red bg'); //删除多个 CSS 类
$('div').click(function () { //当点击后触发
$(this).toggleClass('red size'); //单个样式多个样式均可
});
//.toggleClass()方法的第二个参数可以传入一个布尔值， true 表示执行切换到 class 类， false表示执行回默认 class 类(默认的是空 class)，运用这个特性，我们可以设置切换的频率。
var count = 0;
$('div').click(function () { //每点击两次切换一次 red
$(this).toggleClass('red',count++ % 3 == 0);
});
@H_301_5@

<table style="height: 30px; background-color: #afeeee; width: 1266px; ; width: 1266px;" border="0"><tr>
<td>四、jquery事件绑定及解绑</td>
</tr></table>

1.事件绑定方式

$('.c1').click(})
$('.c1').....

//绑定函数方式
$('.c1').bind('click',function(){
})

$('.c1').unbind('click',function(){

})

//委托方式，好处就是后在增加标签的时候，不用再进行绑定事件
$('.c1').delegate('a','click',function(){

})
$('.c1').undelegate('a',function(){

})

//最基本方式，其他都是基于该方式进行封装
$('.c1').on('click',function(){

})
$('.c1').off('click',function(){

})
@H_301_5@
<table style="height: 30px; background-color: #afeeee; width: 1266px; ; width: 1266px;" border="0"><tr>
<td>五、自执行函数应用以及事件相关</td>
</tr></table>

1、页面框架加载完毕自动执行

@H_301_5@

2、阻止事件发生（return false）

当标签中含有绑定的事件时候，我们继续绑定事件，默认绑定事件后执行，在dom中需要加return

<Meta charset="UTF-8"> Title

//jquery 示例

<!DOCTYPE html>
<html lang="en">

Title @H_301_5@

3、jquery扩展以及自执行函数应用

jquery扩展：

$.extend({ 'test':(){ 'wd'调用 //方式2
$.fn.extend({'showname':function(){return 'wd'}
})
//调用时候需要加上选择器
$(#a1').showname()
@H_301_5@

4、自执行函数应用当多个扩展同时存在时候，为避免全局变量的冲突，可以加上自执行函数，将全局变量变为局部变量，这样可避免变量的冲突。

<Meta charset="UTF-8"> Title 搜索 @H_301_5@

1、全选反选取消

javaScript之jQuery框架

1.事件绑定方式

猜你在找的jQuery相关文章