老程序员分享:jquery方法总结

简介: 老程序员分享:jquery方法总结

"

//属性节点

$(""span"").attr(""name""); //获取属性节点

$(""span"").attr(""name"",""it666""); //设置属性节点 会改变所有span的name节点 如果没有name属性会自动新增

$(""span"").removeAttr(""name class""); //删除属性节点name和class 会删除所有span的name节点

//属性方法 prop removeProp 特点同attr方法

$(""span"").eq(0).prop();

//prop 和 attr 都可以操作属性节点

//

$(""input"").prop(""checked""); //返回true //代码效果参考:https://v.youku.com/v_show/id_XNjQwMDExNTkyOA==.html

/false

$(""input"").attr(""checked""); //返回checked /undefined

//获取网页滚动偏移

$(""body"").scrollTop()+$(""html"").scrollTop();

//设置网页滚动

$(""html,body"").scrollTop(300);

//移除test的所有事件

$("".test"").off();

//移除test的click事件

$("".test"").off('click');

//阻止事件冒泡

$("".son"").click(function(event){

event.stopPropagation();//子中填写此方法

});

//阻止默认行为

$(""a"").click(function(event){

event.preventDefault();//比如阻止a标签默认行为

});

//自动触发事件

$(""a"").trigger(""click"");//会触发事件冒泡、会触发默认行为;想触发a标签默认行为时把a内加一个标签

$(""a"").triggerHandler(""click"");//不会触发事件冒泡

//自动触发自定义事件

$("".son"").on(""ziDingYi"",function(){ //自定义事件必须用on();

alert(10);

});

$("".son"").triggerHandler(""ziDingYi"");

//事件委托

$(""ul"").delegate(""li"",""click"",function(){ //如果li是动态追加的,就把li的click事件委托给ul

$(this).html();//todo

});

//移入移出事件

//.mouseover();.mouserout(); //代码效果参考:https://v.youku.com/v_show/id_XNjQwNjU2MTUwNA==.html

子元素移入移出会触发父级事件

//.mouseenter();.mouseleave(); 不会触发 推荐使用

//同时移入移出事件,只写一个参数的话就说明移入和移出是同一个事件

$("".father"").hover(

function(){

//移入事件

},

function(){

//移出事件

}

);

//jqtab选项卡事件

var index = $(this).index();//获取li的index

var $li = $(""content>li"").eq(index);

$li.siblings().removeClass(""show"");

$li.addClass(""show"");

//监听网页滚动

$(window).scroll(

function(){} //todo

);

//释放之前的动画效果

$(this).stop(); //在动画之前释放

$(this).slideDown();

//自定义动画

$("".one"").animate(

{}, //传动画对象 比如margin:500,width:500

5000, //动画完成时间

""linear"",//动画效果 默认swing 匀速、缓慢 可省略

function(){alert(""自定义动画执行完毕"")} //回调函数

);

//delay()方法 第一个动画执行完成后等2秒再执行后一个动画方法

$("".one"").animate().delay(2000).animate();

//stop(true) 立即停止当前和后续所有动画

//stop(true,false);

//stop(false,true)

//追加元素

var $li = ""woshi-li"";

$(""ul"").append($li); //把li加到ul里最后一个

$(""ul"").prepend($li); //把li加到ul里最前一个

$(""ul"").after($li); //把li加到ul外后面

$(""ul"").before($li); //把li加到ul外前面

//删除

/**

* remove();删除元素自身和子

* empty();删除子

*/

//深浅复制

var $li = $(""li:first"").clone(false); //浅复制

var $li = $(""li:first"").clone(true); //深复制

//选中某一个含有hover的元素

$("".kk>ul>li【class='hover'】"")


"
image.png
相关文章
|
1月前
|
JavaScript CDN
jQuery方法小记
jQuery方法小记
26 0
|
1月前
|
JavaScript
jQuery追加节点方法 和height方法与width方法
jQuery追加节点方法 和height方法与width方法
|
1月前
|
JavaScript 前端开发
调用jQuery的animate()方法无法移动的问题
调用jQuery的animate()方法无法移动的问题
|
1月前
|
JavaScript 前端开发 UED
jQuery 自动刷新页面但不闪烁的实现方法
jQuery 自动刷新页面但不闪烁的实现方法
|
1月前
|
JavaScript Serverless
jquery attr()方法
jquery attr()方法
21 0
|
3天前
|
移动开发 JavaScript 前端开发
老程序员分享:jQuery笔记(四)jQuery中的动画
老程序员分享:jQuery笔记(四)jQuery中的动画
12 0
|
12天前
|
JSON JavaScript 前端开发
jQuery获取json文件的方法
jQuery获取json文件的方法
13 2
|
1月前
|
JavaScript 前端开发 API
jquery的一些方法
jquery的一些方法
12 1
|
1月前
|
JavaScript 前端开发 搜索推荐
JQuery EasyUI -- 日历选择器,2024年最新程序员经验分享
JQuery EasyUI -- 日历选择器,2024年最新程序员经验分享
|
1月前
|
JavaScript 索引