将获取元素的语句写到页面头部，会因为元素还没有加载而出错，jquery提供了ready方法解决这个问题，它的速度比原生的 window.onload 更快。
<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>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')
修改: 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>常用选择器
//与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() //在这里插入代码片选择的是： 当前元素的所有子级元素
获取元素中的下标 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>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>