2025年8月24日大约 3 分钟
一定义
是一个是免费、开源的javascript库
二作用
方便的完成web前端的相关操作,例如节点操作,元素操作,事件绑定,ajax操作, 且解决了大多数的兼容性问题
三使用
1配置
01本地配置
1.下载jquery文件 www.jquery.com
2.<script type="text/javascript" src="jquery.js"></script>
02访问远程文件
<script src="http://www.xiaohigh.com/jquery.js"></script>
03检测配置
alert($) $是jquery对象的简写
alert(jQuery)
2应用
01查找元素
(1)基本获取
通过id查找元素 $('#id')
通过标签名或者元素 $('div')
通过class属性获取 $('.class')
逗号并列获取 $('#id,.class')
空格层级获取 $('#id .class')
(2)过滤获取
获取第一个元素 $('li:first')
获取最后一个元素 $('li:last')
获取指定索引的元素 $('li:eq(5)') $('li').eq(5)
获取包含指定文本的元素 $('li:contains("国")')
通过属性查找元素
$('input[name=username]') 通过单个属性名和属性值查找
$('input[type=text][name=phone]') 通过多个属性名和属性值查找
(3)父子节点获取
获取所有的子元素 $('ul').children()
获取第一个子元素 $('ul li:first-child')
获取最后一个子元素 $('ul li:last-child')
获取指定顺序第几个元素 $('ul li:nth-child(1)')
获取下一个元素 $('#id').next()
获取上一个元素 $('#id').prev()
获取父级元素 $('#id').parent()
获取先辈元素 $('#id').parents('tr')
获取同辈元素 $('#id').siblings()
在父级元素中查找元素 $('ul').find('.class')
02元素的操作
属性操作
attr();
removeAttr();
样式操作
css();
addclass();
removeClass();
文本操作
text();
html();
form元素值的操作
值的获取和设置
获取 $(element).val()
设置 $(element).val('厉害了 word哥')
其他
获取相对于文档的偏移量
offset()
获取元素相对于父级的偏移量
position()
获取或设置滚动条的位置
scrollLeft()
scrollTop()
宽度和高度
width
获取可视区域的宽度 $(window).width()
获取整个文当的宽度 $('document').width()
height
获取可视区域的高度 $(window).height()
获取整个文档的高度 $(document).height()
03节点操作
创建元素节点
$('<div></div>')
$('<div class='cur'><span>hello world</span></div>')
插入节点
内部尾部添加
$(parent).append(newNode)
newNode.appendTo(parent)
内部头部添加
$(parent).prepend(newNode)
$(newNode).prependTo(parent)
元素外部之后添加
$(element).after(newNode)
newNode.insertAfter(element)
元素外部之前添加
$(element).before(newNode)
newNode.insertBefore(element)
删除节点
$(element).remove() 删除当前节点
$(element).empty() 清空节点
替换节点
$(element).replaceWith(newNode)
克隆节点
$(element).clone(true)
包裹元素
$(element).wrap('<div></div>') 当前的元素被其他的元素包裹
$(element).unwrap() 解除包裹
04事件
事件绑定
基本绑定
$(element).click(function(){})
$(element).dblclick(function(){})
..........................
加载完毕事件
$(document).ready(function(){})
$(function(){})
方法绑定
$(element).bind('click',function(){})
$(element).unbind()
$(element).on('click', function(){})
动态绑定
$(element).live('click', function(){})
事件触发
$(element).trigger('click')
阻止事件冒泡和默认行为
return false
获取当前鼠标坐标的位置
$(element).click(function(e){
var cx = e.clientX
var cy = e.clientY
var px = e.pageX
var py = e.pageY
})
05ajax
$.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是否异步
})
06特效
快速显示和隐藏
$(element).hide()
$(element).show()
滚动显示和隐藏
$(element).slideDown()
$(element).slideUp()
渐隐渐显
$(element).fadeIn() 显
$(element).fadeOut() 隐
自定义动画
$(element).animate({},2000)
停止
$(element).stop()
延时
$(element).delay(2000)