JQuery常用操作

本文详细介绍了jQuery的使用方法,包括引入方式、入口函数的完整与化简写法、选择器的过滤和转移操作、自定义动画animate的格式,还阐述了控制html属性的html()、prop()、attr()方法及jq事件属性等内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.jQuery引入

    <script src="js/jquery-1.12.4.js"></script>

2.jQuery入口函数

格式一:完整写法

        $(document).ready(function(){
            alert(1)
        })

格式二:化简写法

        $(function(){
            alert(2)
        })

3.jq选择器

$('#myId') 	选择id为myId的网页元素
$('.myClass') 	选择class为myClass的元素
$('li') 	选择所有的li元素
$('#ul1 li span') 	选择id为为ul1元素下的所有li下的span元素
$('input[name=first]')	选择name属性等于first的input元素

对选择集进行过滤

$('div').has('p')	选择包含p元素的div元素
$('div').not('.myClass')	选择class不等于myClass的div元素
$('div').eq(5)	选择第6个div元素
$('div').eq(-2)	选择倒数第二个div元素

选择集转移

$('#box').prev()	选择id是box的元素前面紧挨的同辈元素
$('#box').prevAll()	选择id是box的元素之前所有的同辈元素
$('#box').next()	选择id是box的元素后面紧挨的同辈元素
$('#box').nextAll()	选择id是box的元素后面所有的同辈元素
$('#box').parent()	选择id是box的元素的父元素
$('#box').children()	选择id是box的元素的所有子元素
$('#box').siblings()	选择id是box的元素的同级元素
$('#box').find('.myClass')	选择id是box的元素内的class等于myClass的元素

4.自定义动画animate

格式:
$(目标|选择器).animate(字典形式写的css键值对时间运动曲线回调函数)

css键值对:{属性:值, 属性:值, 属性:值……}  最重要的参数
时间:单位毫秒,不写的话,默认值600
运动曲线:seing linear……工作中不用
回调函数:是匿名函数,表示动画完成之后要执行的命令

5.jq控制html属性

1、html() 取出或设置html内容
             格式:1.html() 取html的内容
                        2.html(内容) 更改html的内容
2、prop() 取出或设置某个属性的值
             格式:1.prop(属性) 获取某个属性的值
                        2.prop(属性,值) 更改某个属性的值
3、attr() 取出或设置某个属性的值,可以是自定义的属性
              格式:1.attr(属性) 获取某个属性的值
                         2.attr(属性,值) 更改某个属性的值

6.jq事件属性

blur()  元素失去焦点
focus()  元素获得焦点
click()    单击
mouseover()  鼠标进入,子集触发
mouseout()  鼠标离开,子集触发
mouseenter()  鼠标进入,子集不触发
mouseleave()  鼠标离开,子集不触发
hover(函数1, 函数2)   鼠标滑过
ready()    DOM加载完成
submit()   用户递交表单触发
each()   同级元素循环
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值