2018-08-05 18:02:55  619514 7

jQuery入门基础知识点

 标签:   

jQuery介绍   

       jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器,这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。jquery代码:无需考虑浏览器兼容问题、代码足够少

       jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

       jQuery 是继 Prototype 之后又一个优秀的 JavaScript 框架,由 John Resig 于 2006 年初创建,官方地址为:http://jquery.com/,http://www.jquery123.com/


jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。


jQuery 功能


1、html 的元素节点选取

2、html的元素操作

3、html dom遍历和修改

4、js特效和动画效果

5、css操作

6、html事件操作

7、ajax异步请求方式


jQuery安装


1  jquery.com 下载 jQuery 库

2  CDN 中载入 jQuery


jQuery 选择器


基础选择器


$(‘#id属性值’)  ----------->document.getElementById()

$(‘tag标签名称’)----------->document.getElementsByTagName();

$(‘.class属性值’)class属性值选择器


层级选择器


$(s1 s2)   选择给定的祖先元素的所有后代元素。 

$(s1>s2)  选择所有指定“s1”元素中指定的“s2"的直接子元素

$(‘s1~s2’)匹配 “s1” 元素之后的所有 兄弟元素。具有相同的父元素,并匹配过滤“s2”选择器。


基础过滤


$('s1:first')选择第一个匹配的元素。 

$('s1:last')选择最后一个匹配的元素。 

$('s1:even)选择所引值为偶数的元素,从 0 开始计数

$('s1:odd)选择索引值为奇数元素,从 0 开始计数。

$('s1:lt(index))选择匹配集合中所有索引值小于给定index参数的元素。

$(‘s1:gt(index))选择匹配集合中所有索引值大于给定index参数的元素。 

$('s1:eq(index))在匹配的集合中选择索引值为index的元素。 


内容过滤


$('s1:contains(he)’)  选择所有包含指定文本的元素。 

$('s1:parent')选择所有含有子元素或者文本的父级元素。 

$('s1:empty’)选择所有没有子元素的元素(包括文本节点)。 

$('s1:has()')选择元素其中至少包含指定选择器匹配的一个种元素。


属性选择器


$(‘s1[name=username]‘)   选择指定属性是给定值的元素。 

$(‘s1[name!=username]‘)   选择指定属性不是给定值的元素

$(‘s1[name]‘)选择所有具有指定属性的元素,该属性可以是任何值。 


表单选择器


$(‘:input’)  选择所有 input, textarea, select 和 button 元素. 

$(‘:radio’)选择所有类型为单选框的元素。

$(‘:password’)  选择所有 input, textarea, select 和 button 元素. 

$(‘:button’)  选择所有 input, textarea, select 和 button 元素. 

$(‘:submit’)选择所有类型为提交的元素。 

$(‘:text’)选择所有类型为文本的元素。 

$(‘:checkbox’)选择所有类型为checkbox的元素。 


$(‘:checked’)选择所有类型为checkbox的元素。 

$(‘:selected’)选择所有类型为checkbox的元素。 


属性操作


$().attr(属性名称);  //获得属性信息值

$().attr(属性名称,值);  //设置属性的信息

$().removeAttr(属性名称); //删除属性


$(s1).addClass(值);  //为每个匹配的元素添加指定的样式类名 

$(s1).removeClass(值);//移除集合中每个匹配元素上一个,多个或全部样式。

$(s1).hasClass(值);确定任何一个匹配元素是否有被分配给定的(样式)类。 

$(s1).toggleClass(值);在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即:如果存在(不存在)就删除(添加)一个类。 


操作css


$().css(name,value);  //设置

$().css(name);    //获取

$().css(json对象);//同时修改多个css样式


获取 以及设置文本内容


$().html();   //获得节点包含的信息

$().html(信息);  //设置节点包含的内容

$().text();//获得节点包含的“文本字符串信息”内容

$().text(信息);//设置节点包含的内容

$().val(); //获得value属性值

$().val(信息值);   //设置value属性的值


插入节点


元素内部


$().append();在每个匹配元素里面的末尾处插入参数内容。 

$().prepend();将参数内容插入到每个匹配元素的前面


元素外部


$().after();在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点。 

$().before();根据参数设定,在匹配元素的前面插入内容


过滤


$().eq(2)  索引为2的 元素节点

$().first()  第一个节点

$().last()  最后一个节点

$().not()从匹配的元素集合中移除指定的元素。


$().is()判断当前匹配的元素集合中的元素,是否为一个选择器,DOM元素,或者jQuery对象

$() .has()筛选匹配元素集合中的那些有相匹配的选择器或DOM元素的后代元素


树遍历


$().children()  获得匹配元素集合中每个元素的子元素

$().find()   jQuery对象,或元素过滤,得到当前匹配的元素集合中每个元素的后代

$().next()  寻找元素节点紧跟着的兄弟元素

 $().prev()取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。

$().parent()取得匹配元素集合中,每个元素的父元素

$().siblings() 得匹配元素集合中每个元素的兄弟元素


事件


鼠标事件


$().click()   触发元素上的 "click" 事件。 

$().dblclick()   "dblclick" 事件。 

$().hover()  鼠标指针进入和离开元素时被执行

$().mousedown()   鼠标按下触发的函数

$().mouseup() 鼠标抬起触发的函数

$().mouseover() 鼠标悬停

$().mouseout() 鼠标离开


键盘事件


$().keydown()   键盘按下的事件  表单

$().keypress()   键盘按下  ctrl  shift无效

$().keyup  键盘抬起事件

event 对象   。。。


表单事件

$().blur() 鼠标离开表单事件

$().focus() 鼠标进入表单事件

$().submit() 表单提交事件


事件绑定


$().one()  处理函数在每个元素上每种事件类型最多执行一次。

$().bind() 为一个元素绑定一个事件处理程序。

$().unbind()从元素上删除一个以前附加事件处理程序。  

$().on() 为一个元素绑定一个事件处理程序。

$().off()从元素上删除一个以前附加事件处理程序。


on  和 bind区别


on可以对 动态添加的节点 进行绑定事件    bind不可以 


加载事件


$(document).ready(handler)

$(handler)


常用方法


 $().each() 用来无缝迭代对象和数组。


//var arr = ["liudehua",23];
var obj = {"usernmae":"liudehua","age":23};
//$.each(obj,function(i,v){
//console.log(i+'========'+v);
//})
$('li').each(function(index){
console.log(index+'==='+$(this).text());
})


$.inArray( value, array [, fromIndex ] )返回: Number


描述: 在数组中查找指定值并返回它的索引(如果没有找到,则返回-1)。


var arr = ["liudehua",23];

console.log($.inArray(23,arr))


$.isArray()  确定的参数是一个数组。 


console.log($.isArray(arr))


$.isNumeric()  确定它的参数是否是一个数字。


$.trim()  去掉字符串起始和结尾的空格。 


$() .serialize()返回: String


描述: 将用作提交的表单元素的值编译成字符串。


 $().serializeArray()

将用作提交的表单元素的值编译成拥有name和value对象组成的数组


parseJSON( json )返回: Object


描述: 接受一个标准格式的 JSON 字符串,并返回解析后的 JavaScript 对象。


$.parseHTML(])返回: Array


描述: 将字符串解析到一个DOM节点的数组中。


常用特效


$().hide(时间);

$().show(时间);

$().toggle(时间);


$().slideDown(时间);

$().slideUp(时间);

$().slideToggle(时间);


$().fadeIn(时间);

$().fadeOut(时间);

$().fadeToggle(时间);


ajax

$.get/post( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )


url   一个包含发送请求的URL字符串

data      发送给服务器的字符串或Key/value键值对。

success   当请求成功后执行的回调函数。

dataType  从服务器返回的预期的数据类型(xml, json, script, 或 html)。

$.get('index.php',{'name':'liudehua','age':23},function(data){
           console.log(data);
},'json');

$.ajax({settings});


settings设置格式 json对像


type  请求方法  get  post  delete  put ..  默认是get

url  请求地址  

dataType  返回数据类型  json  xml  jsonp  script  html …

data   发送的数据


jsonp       在一个jsonp请求中重写回调函数的名字

jsonpCallback   为jsonp请求指定一个回调函数名


callback=hanshuming


success:function(){}   请求成功后的回调函数

error :function(){} 在请求出错时调用

complete :function(){} 在请求完成时调用



7 条留言

  1. 匿名用户

    Hi, here on the forum guys advised a cool Dating site, be sure to register - you will not REGRET it <a href=https://bit.ly/3iB5v4G>https://bit.ly/3iB5v4G</a>

给我留言

评论内容