jquery 快速入门学习总结

jquery简介

jquery 是一个免费,开源的javascript 库.

jquery作用

方便完成web前端的工作,例如节点操作,元素操作,事件绑定,ajax操作,并且解决了大部分的兼容问题

jquery使用配置

1.本地配置

1.1 下载jquery文件, www.jquery.com

1.2 引入,放在文件同目录

<scripttype="text/javascript"src="jquery.1.8.3.min.js"></script>

2.远程访问文件

<scriptsrc="http://www.xiaohigh.com/jquery.js"></script>

3.检测配置

alert($);$是jquery对象的简写alert(jQuery);

4.元素基本获取

4.1 通过id查找元素 $('$id');

4.2 通过标签名或者元素获取 $('div');

4.3 通过class属性获取 $('.class');

4.4 逗号并列获取 $('$id,.class');

4.5 空格层级获取 $('$id .class') //中间有空格

5.过滤获取

5.1 获取第一个元素$('li:first')

5.2 获取最后一个元素$('li:last')

5.3 获取指定索引的元素 $('li:eq(5)') 或者 $('li').eq(5);

5.4 获取包含指定文本的元素$('li:contains("国")')

5.5 通过属性查找元素 $('input[name=username]') 通过单个属性名和属性值查找

$('input[type=text][name=phone]') 通过多个属性名和属性值进行查找

6.父子节点获取(重点)

6.1 获取所有的子元素$('ul').children()

6.2 获取第一个子元素$('ul li:first-child')

6.3 获取最后一个元素$('ul li:last-child')

6.4 获取指定索引的元素$('ul li:nth-child(1)')

6.5 获取下一个元素 $('#id').next()

6.6 获取上一个元素$('#id').prev()

6.7 获取父级元素$('#id').parent()

6.8 获取先辈元素$('#id').parents('tr') (重点)

6.9 获取同辈元素$('#id').siblings()

6.10 在父级元素中查找元素$('ul').find('.class')

7.元素的操作

7.1 attr()

attr传两个参数的时候是设置,传一个的时候是获取

可以对属性进行操作,例:<div id='dvs'></div>

$('#dvs').attr('class','cur'); 设置属性

$('#dvs').attr('class');获取属性

7.2 removeAtrr()

$('#dvs').removeAttr('src'); 移除属性

8.样式操作

8.1 css()

例:$('#divs').css('width','200px'); 设置css属性 在括号内可通过中括号进行多个属性设置

8.2 addclass()

添加类样式

8.3 removeClass()

移除类样式

9.文本操作

9.1 text()

$('#dvs').text('<a href="">汽车</a>'); 设置结果会包含a标签

9.2 html()

$('#dvs').html('<a href="">生活</a>');设置结果只有值(生活)

9.2 from元素的值操作

值的获取和设置

9.2.1 $(element).val() 获取

9.2.2 $(element).val('牛') 设置

9.3 其他

9.3.1 相对于文档的偏移量 offset()

$('#dvs').offset().left

9.3.2 获取元素相对于父级的偏移量 position()

$('#dvs').position()

9.3.3 元素的滚动距离(既可以获取也可以设置) scrollLeft() scrollTop()

9.3.4 宽度和高度

width 获取可视区域的宽度 $(window).width()

获取整个文档的宽度$('document').width()

获取元素的宽 $('element').width()

height 获取可视区域的高度 $(window).height()

获取整个文档的高度 $('document').height()

获取元素的宽 $('element').height()

10 节点操作

10.1 创建节点操作

$('<div></div>')

$('<div class='cur'><span>hello world</span></div>')

10.2 插入节点

10.2.1 内部尾部添加

$(parent).append(newNode)

newNode.appendTo(parent)

10.2.2 内部头部添加

$(parent).prepend(newNode)

$(newNode).prependTo(parent)

10.2.3元素外部之后添加

$(element).after(newNode)

newNode.insertAfter(element)

10.2.4元素外部之前添加

$(element).before(newNode)

newNode.insertBefore(element)

10.3 删除节点

$(element).remove() 删除当前节点

$(element).empty() 清空节点

10.4 替换节点

替换节点 $(element).replaceWith(newNode)

10.5 克隆节点

克隆节点$(element).clone(true)

10.6 包裹元素

包裹元素 $(element).wrap('<div></div>') 当前的元素被其他的元素包裹

$(element).unwrap() 解除包裹

11.事件绑定

基本绑定

$(element).click(function(){})

$(element).dblclick(function(){})

加载完毕事件

$(document).ready(function(){}) //和onload一样

$(function(){})

方法绑定

$(element).bind('click',function(){})

$(element).unbind()

$(element).on('click', function(){})

动态绑定

$(element).live('click', function(){}) 可以多个同时绑定,点击之后同时出发一个函数

11.2事件触发

$(element).trigger('click') //自动触发事件

11.3阻止事件冒泡和默认行为

return false

11.4获取当前鼠标的位置和按键

$(element).click(function(e){})

var cx = e.clientX

var cy = e.clientY

var px = e.pageX

var py = e.pageY

12 ajax

$.get('1.php',{a=100&b=200},function(data){})

$.post('1.php',{num=10&id=10},function(data){})

$.ajax({

url: '1.php', url请求的脚本

data: 'id=100&page=10', data发送的数据

dataType: 'json', dataType数据的类型

type: 'GET', type请求的类型 get或post

success: function(data){}, success成功的执行代码

error: function(){}, error失败的执行代码

timeout:3000, timeout 超时时间

async: false async是否异步

})

重点:在php中的数组返回给javascript 读取

$arr = ['name'=>'世强','age'=>21,'height'=>'167cm'];

$res=json_encode($arr);

echo $res;

//get发送ajax

$.get('4.php',{a:100},function(data){

// console.log(data);

//第一种

//eval('var arr ='+data);

// console.log(data);

//第二种

//var arr = JSON.parse(data);

console.log(arr);

//第三种 json

}.json)

13特效

快速显示和隐藏

$(element).hide()

$(element).show()

滚动显示和隐藏

$(element).slideDown()

$(element).slideUp()

渐隐渐显

$(element).fadeIn()

$(element).fadeOut()

自定义动画

$(element).animate({},2000)

停止

$(element).stop()

延时

$(element).delay(2000)