jQuery基本用法二
来源:互联网 发布:mac怎么设置无线鼠标 编辑:程序博客网 时间:2024/06/03 18:27
一、原生对象和jQuery对象的相互转换
- jQuery封装的方法必须是jQuery对象才能用,把原生对象放在“$()”括号里面即可;
- 通过get()方法可以把jQuery对象转为原生对象。
有参数时,表示原jQuery对象是个集合,参数表示获取下标为几的元素对象。
无参数时,返回一个对象集合,原jQuery对象有几个元素,返回的就有几个元素。
二、text()方法
1、当有参数时,表示给元素添加内容。
<body> <div>div1</div> <div>div1<span>span</span></div> <div>div1</div> <script> $('div').text('<h3>h3</h3>'); </script></body>
结果页面显示内容为:
由结果可知把所有的div的内容都改为“ <h3>h3</h3>
”,并且不会解析标签,无论里面是什么内容,都原封不动的显示出来。
2、当无参数时,表示获取标签的所有内容
<body> <div>div1<span>222</span></div> <div>div1<span>333</span></div> <div>div1</div> <script> console.info($('div').html()); console.info($('div').text()); </script></body>
输出结果为:
div1<span>222</span>div1222div1333div1
由结果可知:
当对象是一个集合时,html()获取的是集合的第一个元素的中间结构,当元素内容有标签元素时,会把标签全部带下来,即不会解析,保留原始结构和内容。
text()获取的是集合下全部元素的内容,当元素内有标签时,会把标签去掉后再返回。
注意:当jQuery对象是一个集合时,jQuery获取数据的方法一般只会获取第一个元素的内容,text()是个特例。
三、closest、parent、parents方法
closest():找到指定的最近的祖先节点(包括自身)必须接受一个参数(只能选择到唯一一个元素).
parent():获取父级节点。
parents():获取所有的祖先,可以接受参数,参数可以是css选择器,有参数的话,就表示获取符合要求的祖先节点。
四、创建节点
<script> var li=$('<li class="box">hello</li>');//创建节点 $('ul').append(li); li.click(function(){ alert(123) })</script>
五、clone()克隆
元素对象下调用clone(),表示克隆这个对象,并返回这个新对象。参数传true时,表示把元素的操作行为也克隆给新对象,没参数不克隆行为。
<body> <div>div</div> <span>span</span> <script> $('div').click(function(){ alert(123) }) var $div=$('div').clone(true); //参数代表赋值之前的操作行为 $div.appendTo($('span')) </script></body>
六、jq中的运动方法animate()
1、参数介绍
第一个参数:对象 {},去设置样式属性和属性值(目标点);
第二个参数:过渡时间,默认400;
第三个参数:运动形式,只有两种 swing(默认值 缓冲) linear (匀速);
第四个参数:运动完成的回调;动画完成后要触发什么,就可以在这里做。
$('#input1').click(function(){ $('#div1').animate({ width:400 },2000,'swing',function(){ alert(123) })})
另一种传参方式:
这种传参方式,把过渡时间、运动方式、回调方法都放在第二个对象中,并且还可以多写一个监听方法,用于监听变化过程,该方法有两个参数,
参数一:元素的属性变化都能被a捕获(即使多个属性在变化,a也会分别获取每个属性的变化),a获取到的是变化属性在捕获到的那一瞬的值。
参数二:表示动画完成的百分比。
$('#input1').click(function(){ $('#div1').animate({ width:400 },{ duration:1000, easing:'linear', complete:function(){ alert(1) }, step:function(a,b){ // 检测定时器的每一次变化 //console.log(a) console.log(b.pos) // 运动过程中的比例值 0-1 } })})
2、补充:
如果想让元素连续做多个变化,可以多条语句分别写没个变化,这样会每个变化分别执行,也可以写成一条语句,前面的动画执行完就执行后面的,如果想在两个动画中间停留一段时间,可以调用delay方法,参数表示停留多少毫秒。
<body> <input type="button" value="点击" id="input1" /> <div id="div1"></div> <script> //delay(时间) 延迟执行动画 $('#input1').click(function(){// $('#div1').animate({width:300},1000);// $('#div1').animate({height:300},1000);// $('#div1').animate({left:300},1000); $('#div1').animate({width:300},1000).delay(1000).animate({height:300},1000) }) </script></body>
3、截止运动
stop():没有参数时,停止元素正在进行的运动,而进入下一个运动。
stop(true):第一个参数true可以停止该元素所有运动。
stop(true,true):第二个参数 true 可以停止到当前正在进行的运动的最后状态(当前的),其他运动会不会继续进行得看第一个参数。
finish():停止运动,并直接到所有运动的最后的目标点。
七、常用的工具方法
1、$.proxy(函数)()
注意:后面加了括号就会马上调用。
这个工具方法有两种传递参数的方法,其中工具处理的函数this会指向这里的第一个参数。
传参方式一:
function show(a,b){ alert(this); alert(a); alert(b);}$(document).click($.proxy(show,1,3,4));//show的this指向这里的1;
2、$.noConflict()
作用:防止$
冲突,在jQuery中$
是个很重要的变量,由于很多框架都有用到$这个符号,多个框架一起用的时候容易发生冲突,noConflict能给这个变量重命名。
var yuanshuo=$.noConflict();//把$对象传给yuanshuo,yuanshuo('body').css('background','red')//可以把yuanshuo当成$来用noConflict就可以很好的解决这种冲突。
3、$.makeArray(集合对象)
在js中很多时候获取到的集合不是数组对象,例如通过标签获取元素,但是又要用到数组的方法,这时我们就可以用$.makeArray()把获取到的集合转成数组;
例:
var aDiv=document.getElementsByTagName('div'); // 类数组$.makeArray(aDiv).push()
八、事件委托
1、什么是事件委托
通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。
也就是:利用冒泡的原理,把事件加到父级上,触发执行效果,简单说就是把多个子元素相同的事件可以绑在父级身上。
2、delegate 事件委托方法
<body> <input type="button" value="点击" id="input1"/> <ul> <li>3</li> <li>3</li> <li>3</li> <li>3</li> <li>3</li> </ul></body>
$('ul').delegate('li','click',function(ev){ $(this).css('background','red');})
把li的点击事件委托给ul,点击li给该li的背景设置为红色。
$('#input1').click(function(){ var $li=$('<li>hello</li>'); $('ul').append($li)})
点击按钮新增的li也有这个点击事件,点击之后背景也会变红。
3、delegateTarget:找事件委托的元素
$('ul').delegate('li','click',function(ev){ $(this).css('background','red'); console.log(ev.delegateTarget);})
点击li后会把ul元素打印出来。
4、undelegate:取消事件委托
在有绑定委托事件的元素对象(这个例子中是ul的对象)上调用undelegate()就能取消委托。
$('ul').delegate('li','click',function(ev){ $(this).css('background','red'); $(ev.delegateTarget).undelegate()})
第一次点击任何一个li,改变背景后会取消委托,所有li的点击事件都会取消,再点击就不会有任何效果了。
注意:事件委托还会影响新增的节点,例如说如果通过delegate设置ul下的li的点击事件,那么如果后期在ul下动态添加li,那么这个新增的li也会有这个点击事件。
九、ajax
参数
1、url:查询数据的地址,请求接口路径。
2、data:是个对象,数据是发送请求的参数。
3、success:是一个回调方法,当数据被成功找到后调用,回调方法的参数是请求结果数据。
4、error:是一个回调方法,当请求出错的时候调用,参数是请求错误信息。
5、type:请求方式,有get和post两种方式。
6、dataType:返回的数据类型,如果声明为“json”,就会把返回json格式的字符串转换成对象,但是前提是请求结果的数据必须符合json格式。
$('#input1').on('input',function(){ $.ajax({ url:'user.php, type:'POST' data:{user:$(this).val()}, // 'user'=$(this).val(),可以用“:”或“=” success:function(data){ //形参data 就是后台返回来的数据 0 1 console.log(data) if(data=='1'){ $('#div1').html('可以注册'); }else{ $('#div1').html('已经注册了,不能注册'); } }, error:function(err){ //404 500以上服务器错误 console.log(err) } });})
补充:
如果dataType不是“json”,其他原因没有把请求结果转成对象的,通过$.parseJSON(data);把data转成对象,前提也是data必须符合json格式。
- jquery基本用法二
- jQuery基本用法二
- jQuery一些基本用法
- jQuery基本用法
- Jquery之基本用法
- 【JQuery】基本用法
- jQuery的基本用法
- jquery基本用法
- jquery基本用法总结
- jquery常用基本用法
- Jquery基本用法总结
- Jquery的基本用法
- jquery基本用法
- jquery的基本用法
- jQuery Tmpl 基本用法
- jQuery(基本用法)
- jQuery的基本用法
- jQuery基本用法
- 通过设置自定义动画实现回到顶部
- 最长子字符串
- JSP介绍和运行机制
- (function($){...})(jQuery)使用
- python3 urllib.request 网络请求操作
- jQuery基本用法二
- scikit-learn 中文文档-线性和二次判别分析-监督学习|ApacheCN
- Tr A
- Django之处理选择预览图片
- python的文件的实际使用小程序
- JS的基础知识
- Kafka集群部署与shell命令行操作
- 7-2 两个有序链表序列的交集(20 分)
- 综合练习之--1、复用布局页面显示XLV 和 侧滑 vp效果