您的位置：首页 > Web前端 > JQuery

jQuery函数库基础

2019-05-22 09:55 399 查看

jQuery函数库

1. jQuery引入

<!-- 外链式方式引入jQuery函数库 -->
<script src="./js/jquery-1.12.4.min.js"></script>
<script>
// 写自己的代码调用jQuery函数
</script>

2. jQuery入口函数

<script src="jQuery/jquery-1.12.4.min.js"></script>
<script>
/* 入口函数完整写法
1. $(目标) -- jq的选择函数：查找元素功能
2. 遵循jq事件的语法  -- 目标.事件属性(匿名函数)
3. 表示当网页文档准备好之后要执行...命令
*/
$(document).ready(function () {  // 完整写法
alert(1)
})

/* 入口函数简化写法
$(匿名函数) ，工作中常用方式
*/
$(function () {
alert(2)
})
</script>

3.jquery控制html和css

控制html内容

html()用法：不写参数表示取值，写参数表示修改内容
prop() : 访问或修改html属性值
val() : 访问或修改value属性
attr() : 访问或修改html属性值，用法与prop()相同，但attr()支持访问自定义的html属性

<script src="../js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
alert($('p').html())
$('img').mouseover(function () {
// prop() -- 和css单属性用法完全相同  xx(1, 2) xx(1)
// alert($(this).prop('src'))
$(this).prop('src', 'icon4.jpg')
})

alert($('input').val())
//$('input').val('')
})
</script>
<body>
<p>这是一段内容</p>
<img src="icon3.jpg" alt="">
<input type="text" value="1111">
</body>

控制css
- 修改: css(属性名,属性值)
```
$('div').css('color','red')
```

多属性操作(只支持修改)

修改:css(字典)

$('div').css({'color':'red','fontSize':'50px'})

<script src="./js/jquery-1.12.4.js"></script>
<script>
$(function(){
/*控制css  css()  */
alert($('div').css('width'))		//取值
$('div').css('background','#0f0')	//修改
$('div').css({'color':'red','fontSize':'50px'})	//多属性操作
})
</script>
<!-- html部分 -->
<div>测试css</div>

4.jquery常用的选择器

常用选择器

//与css相同的选择器
$('#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元素

//选择器转移
$('#box').prev(); //上一个同级元素
$('#box').prevAll(); //上面所有的同级元素
$('#box').next(); //下一个同级元素
$('#box').nextAll(); //下面所有的同级元素
$('#box').parent(); //当前元素的父元素
$('#box').children(); //当前元素的所有子元素
$('#box').siblings(); //当前元素的其他兄弟(同级)元素
$('#box').find('p'); //当前元素里的p元素

兄弟选择器siblings() //选择的是当前元素的其他同级元素（兄弟元素）
父级选择器parent() // 选择的是：当前元素的父级元素
子级选择器children() //在这里插入代码片选择的是：当前元素的所有子级元素

5.this 与添加删除类属性

获取元素在父级中的下标 index()
```
$(this).index()
```
this：表示当前操作的标签元素

**添加删除html元素的类属性 **

addClass()

removeClass(): 删除类
toggleClass() : 添加或删除类

<script>
$(function () {
//绑定单击事件
$('button').click(function () {
$('div').addClass('box') //添加类
$('div').removeClass('box') //删除类,假如不传参，则清空所有类
//$('div').toggleClass('box') //添加或者删除类
})
})
</script>
<!-- html部分 -->
<button>按钮</button>
<div>文字1</div>

6. 制作动画

基本语法 ：$(‘目标|选择器’).animate(参数1,参数,2参数3,参数4)

参数2：动画持续时间，以毫秒为单位，默认是600
参数3：运动曲线: ‘swing’ 或者 ‘linear’
参数4：动画执行完后的回调函数

拓展(平面动画类型)

缩放动画: 设置宽和高属性，单位(px，%)
透明度动画： opacity属性，范围 0-1之间
旋转动画：结合css3或者添加其他插件

<script>
$(function () {
$('div').animate(
{ 'width': '800px', 'height': '300px'},2000,'linear',
function () {
alert('动画完成后执行的回调函数')
})
})
</script>

2. jquery常用的特殊动画效果方法

1. 滑动动画
- slideup() ：向上卷起， 隐藏
- slidedown() ：向下展开， 显示
- slideToggle() : 卷起或者展开

2.透明度动画
- fadeIn() ： 透明显示，淡入
- fadeOut() ： 透明隐藏， 淡出
- fadeToggle() ：淡入、淡出
- fadeTo(时间, 透明度小数) ： 设置透明度值与动画持续时间

3.显示与隐藏动画
- show() :显示
- hide() ： 隐藏
- toggle() ： 显示与隐藏

```html
<style>
div {
width: 200px;
height: 200px;
background: green;
/* display: none; */
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$('button').click(function () {
// 滑动动画   透明度动画函数
$('div').slideUp()  // 向上卷起 隐藏
$('div').slideDown()   // 向下展开  显示
$('div').stop().slideToggle()

$('div').fadeIn()  // 透明显示 淡入
$('div').fadeOut() // 透明隐藏  淡出
$('div').fadeToggle()

// 设置透明度
$('div').fadeTo(时间, 透明度小数)
$('div').fadeTo(500, 0.6)
})
})
</script>
<!-- html部分 -->
<button>按钮</button>
<div></div>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航