jQuery(1)

最新推荐文章于 2024-08-04 16:33:59 发布

hw2948502143

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量102

点赞数

文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/hw2948502143/article/details/124288663

版权

本文详细介绍了jQuery的基础使用，包括头部导入、直接调用方法、选择器、属性操作（attr与prop）、内容显示、样式调整、元素创建与添加、大小获取、位置定位以及事件处理，如on绑定、事件委托、off取消和trigger触发事件。

摘要由CSDN通过智能技术生成

Jquery

使用

1.head导入Jquery

<head>
	<script src="js文件地址"></script>
</head>

2.直接使用里面的方法

jQuery是核心对象里面的方法都是通过它来调用的

jQuery('body') //通过jquery对象来调用获取元素
//使用$来代替jQuery
$('body') //$(里面写选择器)

3.选择器

// 选择器
console.log(jQuery('box'));
console.log($('#box'));
console.log($('.inner'));
console.log($('li'));
console.log($('ul>li'));
console.log($('#box>.inner'));
console.log($('li[name=zs]')); //获取name=zs的li元素
// 特殊选择器
console.log($('li:first')); //获取第一个li元素
console.log($('li:last'));  //获取最后一个li元素
console.log($('li:odd')); //获取下标为奇数的
console.log($('li:even')); //获取下标为偶数的
console.log($('li:eq(2)')); //获取下标为2的li元素

4.属性操作

建议使用attr

attr

//获取
$('元素').attr('属性') //返回该属性的值
//添加
$('元素').attr('属性','属性值') //设置属性为第一个参数，属性值为第二个参数
//删除
$('元素').removeAttr('属性名')

prop

//获取
$('元素').prop('属性') //返回该属性的值
//添加
$('元素').prop('属性','属性值') //对于本身没有的属性 不会显示添加 但是可以使用 只是在样式中看不见
//删除
$('元素').removeAttr('属性名') //不能删除attr添加的属性

其他属性操作方法

$('元素').addClass('属性值') //添加一个class属性值
$('元素').removeClass('属性值') //删除class属性值
console.log($('元素').hasClass('属性值')); //判断是否存在class属性值tom
$('元素').toggleClass() //切换Class 对于已经有class的删除 没有的添加

5.显示内容操作

text

// 相当于innerText 获取显示的文本
console.log($('元素').text());
$('元素').text('显示的文本')

html

// 相当于innerHTML 获取的就是html内容
console.log($('元素').html());
$('元素').html('<b>html内容</b>')

value

// 获取input中的value属性
console.log($('input').val());
$('input').val('这是设置的value的值')

6.样式操作

css

// 传一个参数为获取 传两个参数为设置 getComputerStyle
console.log($('元素').css('css属性'));
console.log($('元素').css('width'));
//里面的css属性是按照js中的写法，不是css中的-
console.log($('元素').css('backgroundColor','aqua'));

7.元素的创建及添加

创建元素节点

let 变量名称 = $('<标签名></标签名>')

添加操作 (父子节点添加)

append

$('节点名称').append($div) //往后添加
$('body').append($div) //往后添加

appendTo

变量名称.prependTo($('节点名称'))
$a.prependTo($('body')) //a标签添加到body里面的前面

prepend

$('节点名称').prepend(变量名称) //往前添加
let $a = $('<a></a>')
$a.attr('href','http://www.baidu.com') //设置href属性
$('body').prepend($a) //往前添加

prependTo

变量名称.prependTo($('节点名称'))
$a.prependTo($('body')) //a标签添加到body里面的前面

添加元素(兄弟节点添加)

after

$('节点名称').after(变量名称)
$('div:eq(0)').after($b) //在div的后面进行添加

before

$('节点名称').before(变量名称)
$('div').before($p) //在div的前面进行添加

insertAfter

变量名称.insertAfter($('节点名称'))
let $b = $('<b></b>') //创建一个b标签
// $('div:eq(0)').after($b) //在div的后面进行添加
$b.insertAfter($('div:eq(0)')) //将b标签插入到div的后面

insertBefore

变量名称.insertBefore($('节点名称))
let $p = $('<p></p>')
$('div').before($p) //在div的前面进行添加
$p.insertBefore($('div:eq(0)')) //p标签插入到div前面

替换replace replaceAll

$('元素').replaceWith(变量名)
$('标签').replaceAll($('标签名'))
let $h = $("<h1>hello</h1>")
$('div').eq(0).replaceWith($h) //将div替换成h标签(div会被删除)
$('<a></a>').replaceAll($('div')) //将a标签替换进div标签（div会被删除）

删除remove

$('要删除的节点').remove()
$('元素').remove('该元素的属性')
//remove删除
$('ul').remove() //会将对应的所有内容包括自身全部删除(事件也会变为删除)
// 将li里面匹配对于的.save内容进行删除
$('li[class=save]').remove()
//$('li').remove('.save')

克隆clone

console.log($('元素').clone());
// 克隆 clone 参数1是否克隆所有的属性 参数2是否克隆事件 默认是false
console.log($('li').eq(0).clone());

8.元素大小的获取

<style>
    div{
    width:500px;
    height:500px;
    margin:100px;
    padding:200px;
}
</style>

width height

// width方法 height方法 不包含padding以及margin
console.log($('div').width()); //500
console.log($('div').height());

innerWidth innerHeight

// innerWidth innerHeight baohan padding 不包含margin 也不包含border
console.log($('div').innerWidth);
console.log($('div').innerHeight);

outerWidth outerHeight

// outerWidth outerHeight 包含padding以及border 不包含margin值
console.log($('div').outerWidth);
console.log($('div').outerHeight);
// outerWidth这里面有个参数 是否包含margin 如果true 他就包含margin值 默认false
console.log(($('div').outerWidth(true)));//800
console.log(($('div').outerHeight(true)));//800

9.元素位置的获取

offset

// offset 基于body偏移的位置 返回的是一个对象
console.log($('div').offset());//返回的是对象 这个对象里面left top属性
console.log($('div').offset().left);//返回的是离body左边的距离
console.log($('div').offset().top);//返回的是离body上边的距离

position

// position 定位 返回基于父元素定位的位置 返回的是对象
console.log($('div').position()); //返回的是定位位置
console.log($('div').position().left); //返回的是定位位置
console.log($('div').position().top); //返回的是定位位置

scroll

// 滚动栏位置获取
$(window).on('scroll',function(){
    console.log($(window).scrollLeft()); //滚动栏里左边的距离
    console.log($(window).scrollTop()); //滚动栏里上边的距离
})

10.事件

on绑定事件

事件类型事件处理

$('button').on('click',function(e){
    console.log(this); //执行button
    console.log(e); //window的event对象
    console.log('点击了');
})
// 我们可以在事件发布的时候携带数据
$('button').on('click',{name:'jack'},function(e){
// 获取这个携带的对象
	console.log(e.data); //调用的时候
})

事件委托机制

// 事件委托机制
$('div').on('click',function(e){
    console.log(this); //指向div
    console.log(e.target);
})
// 也可以传递参数 例用事件委托机制 只有在button情况下才进行触发(button是一个选择器 在选择器匹配的时候才进行触发)
$('div').on('click','button',{name:'tom'},function(e){
    console.log(this); //this指向button
    console.log(e.data);
    console.log(e.target);
})

off取消事件

// off取消事件
// 取消事件
$('div').off()
// one 只触发一次
$('button').one('click',function(){
	console.log('点击了');
})

trigger 自动执行事件

// trigger 自动执行事件
// 自动执行事件
$('button').trigger('click')

hw2948502143

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery(1)

文章目录Jquery使用1.head导入Jquery2.直接使用里面的方法3.选择器4.属性操作attrprop其他属性操作方法5.显示内容操作6.样式操作7.元素的创建及添加创建元素节点添加操作 (父子节点添加)appendappendToprependprependTo添加元素(兄弟节点添加)afterbeforeinsertAfterinsertBefore替换replace replaceAll删除remove克隆clone8.元素大小的获取width heightinnerWidth innerH
复制链接

扫一扫