jquery语法的使用
页面加载时执行的函数$(document).ready(function(){ alert('jQuery') })$(select).action()
| 结构 | 作用 |
|---|---|
| $() | 将dom对象转化为jQuery的对象 |
| select | 获取需要的jQuery的元素 |
| action | jquery提供的方法 |
2. jQuery选择器，大多与css选择器相同
| 语法构成 | 描述 |
|---|---|
| [‘attrbute’^=value] | 属性attribute的值以value为开头的元素 |
| [‘attribute’$=value] | 属性attribute的值以value为结尾的元素 |
| [‘attribute’*=value] | 属性attribute中含有value的元素 |
| [attribute1=value][‘attribute’=value] | 满足多个条件的元素 |
基本过滤选择器
| 语法构成 | 描述 |
|---|---|
| :first | 选取第一个元素，例$(‘div:first’) |
| :last | 选取最后一个元素 |
| :even | 选取所有偶数的元素，index从0开始 |
| :odd | 选取所有奇数的元素 |
| :eq(index) | 选取索引为index的元素 |
| :gt(index) | 选取索引大于index的元素，不包括index |
| :lt(index) | 选取索引小于index的元素 |
| :not(select) | 选择与选择器select不同的元素 |
| :focus | 选取获取焦点的元素 |
| :visible | 选取可见的元素 |
| :hidden | 选取所有不可见的元素，对visibility:hidden和opacity:0没作用 |
3. 样式的设置
| 属性 | 作用 |
|---|---|
| css(‘name’,’value’) | 设置样式，要设置多个样式用{}括起来 |
| addClass(class) | 追加样式 |
| removeClass(class) | 移除样式 |
| text() | 设置文本内容 |
| html() | 对代码进行操作 |
| val() | 获取表单元素的value |
| attr() | 设置元素属性 |
4. toggle(),开关
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
//选择的元素有多少个，函数就会被执行几次
$("p").toggle("fast",function(){
alert($(this).text());
});
});
});
</script>
</head>
<body>
<button>隐藏/显示</button>
<p>这是一个文本段落。</p>
<p>这是另外一个文本段落。</p>
</body>
</html>
```
事件注册语法
$(对象).type(fn)，type:事件名，fn:事件处理函数
绑定事件
$(对象).on(事件类型，时间参数，处理函数)//绑定mouseover和mouseout事件 $('.div01').on({ mouseover:function () { $('.div02').css('display','none') }, mouseout:function () { $('.div02').css('display','block') } }); //移除事件 $('.div01').off();绑定多个事件
//给选定内容下的a标签添加click事件 %('#hangye_neirong').on('click','a',function(){ $(this).css({'backgroundColor':'green','color':'white'}); }).on('click','a',function(){ condition.select_profession=$(this).text(); condition.page_index=1; })- jQuery事件
| 事件名 | 描述 |
|---|---|
| dbclick | 双击 |
| focus | 获得焦点 |
| blur | 失去焦点 |
| change | value改变 |
| keypress | 键值 |
3. jquery添加删除元素
| 方法 | 作用 |
|---|---|
| append() | 在选中元素的内部结尾添加内容 |
| prepend() | 在选中的元素内部开头添加内容 |
| after() | 在选中元素的后面添加内容 |
| before() | 在选中元素的前面添加内容 |
| remove() | 删除被选中的元素（所有）,可以在括号里添加选择器 |
| empty() | 删除选中元素的所有子元素 |
4. jQuery的遍历
| 方法 | 作用 |
|---|---|
| parent() | 直接父元素 |
| parents() | 所有父元素，可以在（）对父元素进行过滤 |
| parentsUntil(‘终止父元素’) | 遍历选中和括号里的元素之间的父元素 |
| children() | 遍历所有直接子元素，可以在()过滤 |
| find() | 遍历所有子元素 |
| siblngs() | 所有同胞元素 |
| next(),prev() | 下一个，上一个同胞元素 |
| nextAll(),prevAll() | 下面的，上面的所有同胞元素 |
jjQuery 效果
淡入淡出
fadeIn(speed,callback)淡入，第一个参数可以是slow，fast，毫秒，第二个是效果完成后的参数
fadeOut()淡出
fadeTo()改变透明度滑动
slideDown()滑下
slideUp()滑上
slideToggle()滑上/滑下切换动画
animate({params},speed,callback)params形成动画的css属性//定义多个属性 $("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); }) //使用队列功能 $("button").click(function(){ var div=$("div"); div.animate({left:'100px'},"slow"); div.animate({fontSize:'3em'},"slow"); });停止动画
stop(stopAll,goToEnd)两个参数默认为falsechaining可以在一条语句中运行多个jQuery方法
$("#p1").css("color","red").slideUp(2000).slideDown(2000);jquery-ajax
$.ajax({ url:地址, async:true,//异步 type:"GET",//请求方式 dataType:"json",//返回数据格式 data:传输的数据, success:callback //请求成功的执行函数 })
扫一扫
4730
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
