jquery 快速入门学习总结
jquery简介
jquery 是一个免费,开源的javascript 库.
jquery作用
方便完成web前端的工作,例如节点操作,元素操作,事件绑定,ajax操作,并且解决了大部分的兼容问题
jquery使用配置
1.本地配置
1.1 下载jquery文件, www.jquery.com
1.2 引入,放在文件同目录
<script type="text/javascript" src="jquery.1.8.3.min.js"></script>
2.远程访问文件
<script src="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)