JS基础19

jquery

jquery是一个快速，小巧且功能丰富的JS库，也就是JS封装的JS文件
操作html文档节点
操作dom节点更方便
兼容性
下载：

官网下载https://jquery.com/
方法大全https://jquery.cuishifeng.cn/

语法$(selector).action()

注：

selector：要操作元素，action：操作方法
jquery选择器选中元素，返回的是jquery对象，与dom节点不一样，jquery对象是伪数组

属性选择器

属性含义$(‘selector[attr]’)选择包含给定属性的元素$(‘selector[attr =“value”]’选择给定属性是某个特定值的元素$(‘selector[attr !=“value”]’选择属性不等于特定值的元素$(‘selector[attr *=“value”]’选择是包含某些值的元素$(‘selector[attr ^=“value”]’选择是以某些值开始的元素$(‘selector[attr $=“value”]’选择是以某些值结尾的元素$(‘selector[selector1][selector2]’)复合属性选择器，需要同时满足多个条件

<body><input type="name" name="name"><input type="name" name="password"></body><script src="./jquery.js"></script><script>
   console.log($('input[name="name"]'));//<input type="name" name="name">
   console.log($('input[name]'))// <input type="name" name="name"><input type="name" name="password">

注：只写与原生JS不同属性

表单属性伪类

属性含义:checked选中的表单元素，一般用于radio和checkedoption:selected选中的option元素:enabled可用元素:disabled不可用元素:read-only只读元素:focus焦点元素

查找（筛选）方法

属性含义parent()查找祖先元素parents()查找所有祖先元素parentUntil()查找祖先元素直到某个元素children()查找后代元素find()查找特定后代元素prev()向前查找兄弟元素prevAll()向前查找所有兄弟元素prevUntil()向前查找兄弟元素直到某个元素next()向后查找兄弟元素nextAll()向后查找所有兄弟元素nextUntil向后查找兄弟元素直到某个元素siblings()查找所有兄弟元素eq()选择集合中指定下标的元素first()选择集合中第一个元素last()选择集合中最后一个元素index()查找元素在父元素里面位置

<body><ul><li></li><li></li><li class="third"></li><li></li><li></li></ul></body><script src="./jquery.js"></script><script>
    console.log($('li').eq(2));//第三个li元素
    console.log($('.third').index());//返回索引号2
    console.log($('li').siblings());//返回所有li元素</script>

属性操作

给一个元素添加（获取）某个属性添加$(‘div’).prop(‘id’,‘box’) $(‘div’).prop(‘id’) 注：prop只能添加元素自己本身就有的属性
给一个元素添加（获取）某个自定义的属性添加$(‘div’).attr(‘index’,‘1’) $(‘div’).attr(‘index’)
移除某一个属性$(‘div’).removeAttr(‘index’,‘1’)

样式操作

$().css()

<script>$('div').css('width','100px')//设置行内样式
    console.log($('div').css('width'));//拿到行内样式$('div').css({
        height:'100px',
        backgroundColor:'pink'})/设置多个行内样式
</script>

$().addClass()
$().removeClass()
$().toggleClass()
示例：

<body><div></div></body><script src="./jquery.js"></script><script>
    console.log($('div').hasClass('box'));//false$('div').addClass('box')//添加一个box
    console.log($('div').hasClass('box'));//ture$('div').removeClass('box')//移除box$('div').toggleClass('box')//有box就移除，没有就添加</script>

操作事件

绑定事件的方法

<body><div><button>点击</button></div></body><script src="./jquery.js"></script><script>//点击事件$('button').on('click',function(){
        console.log('点击了');})//点击时传参$('button').on('click',{name:'jack'},function(e){
        console.log(e);
        console.log(e.data);})//事件委托$('div').on('click','button',function(){
        console.log('button点击了');})//事件委托传参$('div').on('click','button',{name:'jack'},function(e){
        console.log(e);
        console.log(e.data);})</script>

解绑事件 jquery后面事件不会覆盖前面事件，解绑需要$().unbind()

$('button').unbind('click').click(function(){})//解绑以前事件，并重新绑定一个点击事件

移除事件

<script>$('button').on('click',function(){
        console.log('button点击了');})$('button').on('mousemove',function(){
        console.log('button点击了');})$('button').off('click')//移除点击事件$('button').off()//移除所有事件</script>

只执行一次事件

$('button').one('click',function(){})

直接触发事件

$('button').on('click',function(){
        console.log('自动执行');})$('button').trigger('click')//代码走到此处直接触发点击事件

直接绑定事件，不用on
事件含义click点击blur失去焦点focus获取焦点hover移动scroll滚动
```
$('button').hover(function(){
     console.log('移入');},function(){
     console.log('移出');})
```

链式写法

jquery允许在相同元素运行多条jquery命令

$('p').first().css('color','red').html('测试p')//第一个p内容为红色测试p

遍历

<body><div><P>1</P><P>2</P></div></body><script src="./jquery.js"></script><script>$('p').each((index,item)=>{
        console.log($(item),index);})//p1标签  0//p2标签  1</script>

动态DOM节点

创建节点

$('<p>').text('内容')

添加节点

<body><div></div></body><script src="./jquery.js"></script><script>let pEle=$('<p>').text('内容')$('div').append(pEle)</script>

事件含义parent.append(child)向父元素插入子元素，插入子元素为最后一个元素child.appendTo(parent)将子元素插入父元素，插入子元素为最后一个元素parent.prepend(child)向父元素插入子元素，插入子元素为第一个元素child.prependTo(parent)将子元素插入父元素，插入子元素为第一个元素brother.after(obj)在某个兄弟节点之后插入对象brother.before(obj)在某个兄弟节点之前插入对象

删除节点

$().empty()
$().remove()
$().detach()

<body><ul><li></li><li></li><li></li></ul></body><script src="./jquery.js"></script><script>$('ul').empty()//删除ul下所有li节点$('ul').remove()$('ul').detach()//删除ul和li所有节点</script>

替换节点

$(‘div’).replaceWith(’
’)
$(‘div’).replaceAll(’
’) 注：两者区别在于replaceWith只能替换一个节点，replaceAll可以替换里面所有节点

复制节点$().clone()

jquery与DOM节点转换

jquery准换为DOM

const DOM=$()[0]
const Dom=$().get[0]

DOM转换为jqueryconst DOMEle=document.querySelector(’.d’)const jquery=$(DOMEle)

元素尺寸

操作元素宽和高（不含padding和border）
语法含义$().width()获取元素宽$().width(n)设置元素宽npx$().height()获取元素高$().height(n)设置元素高npx
获取元素内置宽和高（含padding不含border）
语法含义$().innerWidth()获取元素宽$().innerHeight()获取元素高
获取元素外置宽和高（含padding和border）
语法含义$().outerWidth()获取宽（含padding,border）$().outerWidth(true)获取宽（含padding,border,margin）$().outerHeight()获取高（含padding,border）$().outerHeight(true)获取高（含padding,border,margin）

获取元素位置
元素相对于页面位置
语法含义$().offset()得到一个对象{top:值，left:值}$().offset(top:m,left:n)定位于页面左上角mpx npx
元素相对于父元素的偏移量$().position() 注：得到一个对象包含X和Y的值，父元素需要定位，只读
获取页面卷去的高度和宽度
语法含义$(document).scrollTop()获取页面被卷起的高度$(document).scrollLeft()获取滚动条到左边垂直宽度
```
$(document).scroll(function(){
     console.log($(document).scrollTop());})//滚动时拿到滚动条距离页面顶部距离
```
通过CSS改变元素位置$().css(‘left’:m,‘top’:n)

jquery效果动画Obj

隐藏显示
语法含义jqueryObj.hide()隐藏jqueryObj.show()显示jqueryObj.toggle()切换隐藏于显示

$('div').css('display','none')//添加行内样式也可以$('div').hide()//隐藏div$('div').show()//显示div

淡入与淡出
语法含义jqueryObj.fadeIn()通过淡出方式显示jqueryObj.fadOut()通过淡入方式隐藏jqueryObj.fadToggle()切隐藏与显示

$('button').click(function(){$('div').fadeOut()//立即淡入隐藏$('div').fadeOut(1000)//1000ms慢慢隐藏$('div').fadeOut(1000,function(){
         console.log(1);})//})

滑动
语法含义jqueryObj.slideDown()用滑动动画显示jqueryObj.slideUp()用滑动动画隐藏jqueryObj.slideToggle()切换显示与隐藏

$('button').click(function(){$('div').slideUp()})$('button').click(function(){$('div').slideUp(100,function(){
         console.log('完成');})})//也可以传参，第一个代表规定时长，第二个表示完成后执行函数

动画animate()$(selector).animate({params},speed,callback)

params：定义形成动画的CSS属性
speed：规定效果时长
callback：动画完成执行效果

$('button').click(function(){$('div').animate({
            width:100,
           height:100,
           opacity:0.5},1000,'linear',function(){
            console.log('完成');})})

注：都是加在行内样式上的
5. 停止与结束动画

停止$(selector).stop()
结束$(selector).finish()

$('button').click(function(){$('div').stop().slideUp()//停止当前动画重新执行$('div').finish().slideUp()//结束当前动画重新执行})

示例：做一个菜单栏

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{padding: 0;margin: 0;}.wrap{width: 140px;background-color: black;margin: 50px;}.main{width: 100%;color: #fff;}h3{width: 110px;height: 30px;color: #fff;}.main div{width: 120px;height: 20px;padding: 0 10px;line-height: 20px;}ul li{list-style: none;width: 110px;height: 30px;padding: 0 15px;line-height: 30px;}ul .active{background-color: blue;}</style></head><body><divclass="wrap"><h3>首页</h3><divclass="main"><div>用户管理</div><ul><liclass="active">用户添加</li><li>用户删除</li><li>用户查看</li></ul><div>信息查询</div><ul><li>最近消息</li><li>以前消息</li></ul></div></div><scriptsrc="jquery.js"></script><script>$('.main div').click(function(){$(this).next().slideToggle(200)$('h3').html($(this).html())})$('li').click(function(){$('li').removeClass('active')$(this).addClass('active')$('h3').html($(this).html())})</script></body></html>

ajax

get方法$.get(url,[parma],callback)
post方法$.post(url,[parma],callback)
ajax方法

$.ajax({
        url:'http://localhost:3000/api',
        method:'get',
        data:{},success:function(data){
            console.log(data);},error:function(err){
            console.log(err);}})

跨域jsonp技术

$.ajax({
        url:'http://localhost:3000/api',
        method:'get',
        dataType:'jsonp',
        jsonp:'callback',//jsonp参数名
        jsonpCallback:'func',//服务端用于封装数据的函数名success:function(result){
            console.log(result);},error:function(err){
            console.log(err);}})

jquery扩展

扩展jquery本身
       jQuery.extend({max:function(m,n){let max=m;if(n>max){
                    max=n
                }return max
            }})
        console.log($.max(20,40));//结果40//扩展jquery元素集
        jQuery.fn.extend({min:function(m,n){let min=m;if(n<min){
                    min=n
                }return min
            }})
        console.log($('div').min(20,40));//结果20

标签：前端 javascript 开发语言

本文转载自: https://blog.csdn.net/weixin_64925940/article/details/124131054
版权归原作者 鹏程933 所有，如有侵权，请联系我们删除。

jquery

属性选择器

表单属性伪类

查找（筛选）方法

属性操作

样式操作

操作事件

链式写法

遍历

动态DOM节点

jquery与DOM节点转换

元素尺寸

获取元素位置

jquery效果动画Obj

ajax

jquery扩展

发表评论

“JS基础19”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航