JQuery
Posted CafeMing
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery相关的知识，希望对你有一定的参考价值。
一、JQuery中的window.onload=function(){}
1. $(function(){
})
2. $(document).ready(function(){
})
3.$().ready(function(){
})
以上三种方法，在页面中可以同时写
二、jquery中获取元素
原生js获取方法 var xxx=docuemnt.getElementById(\'\'); 等
JQ中获取元素的方法 $(selector);
selector这个方法和原生的js选择器一样
JQ中获取到的元素都是一个集合。 所以可以用 length判断是否获取元素成功
$(function(){console.log($(\'input\')); //这里获取到的是两个inputconsole.log($(\'input\')[0]); //这个获取到的是第一个inputconsole.log($(\'#box\'));console.log($(\'span\',\'#div1\')); //从div1身上去获取span标签（注意顺序）console.log($(\'li\',$(\'.list\'))); //从div1身上去获取span标签（注意顺序）console.log($(\'.list li\')); //从div1身上去获取span标签console.log($(\'.list span\')); //如果是一个获取不到的元素，那它不会报错。如果要做判断的话，可以判断它的length属性 0的话就代表获取不到//var div3=$(\'#div2\');var div2=document.getElementById("div2"); //用原生js获取到的元素不能使用jquery里的方法。如果想用的话，那就把原生js获取到的元素转成jquery的形式$(div2).css(\'background\',\'red\'); //把原生js的对象包装成jquery的对象});<input type="button" value="按钮" /><input type="button" value="按钮" /><div id="box">123</div><div id="div1"><span>kaivon</span></div><ul class="list"><li>kaivon1</li></ul><div id="div2">kaivon3</div>
* get(index) 把jquery对象转成原生对象
* index 是元素的索引值 （一定要写）
*
* 原生对象转jquery对象用$
* jquery转原生对象用get(index);
$(function(){console.log($(\'#div1\').html()); //kaivonconsole.log($(\'#div1\').innerHTML); //undefinedconsole.log($(\'#div1\').get(0).innerHTML); //kaivon})<div id="div1">kaivon</div>
三、JQ中的事件
* jquery里的事件(没有on)
* 语法
* $(元素).click(callBack); 另一种添加事件的方法
$(元素)on(\'click mousemove\',callback);
jquery中移除事件的方法
$(元素).off() 注意：这个移除是将元素身上的所有事件都移除掉
$(function(){$(\'#btn\').click(function(){//alert(1);console.log(this); //原生的this一样是指向触发事件的对象console.log($(this)); //指向jquery的对象});$(\'#box\').mouseover(function(){$(this).css(\'background\',\'green\');//不能写成 this.css(\'background\',\'green\');});});<input type="button" id="btn" value="按钮" /><div id="box"></div>
四、JQ中样式设置与value值、属性值、数据
1.css
* css() 关于样式的一些操作
* 一个参数 获取属性的值
* 参数为一个对象的话，表示设置属性，可以同时设置多个属性的值
* 两个参数 设置属性的值
* 第一个参数是属性名，第二个参数为属性名对应的值(不带单位也是可以的)
2.value
* 表单的value值
* val() 获取表单对应的value值
* val(values) 设置表单的value值
$(function(){console.log($(\'#box\').css(\'width\')); //100px 获取属性的值$(\'#btn\').click(function(){/*$(\'#box\').css(\'background\',\'green\');$(\'#box\').css(\'width\',200);$(\'#box\').css(\'height\',200); */$(\'#box\').css({width:200,height:200,background:\'green\'});});console.log($(\'#btn\').val()); //按钮$(\'#btn\').val(\'kaivon\'); //有参数的话就是设置value值});<input type="button" id="btn" value="按钮" /><div id="box"></div>
3.attr
* attr() 关于标签属性的操作
* 一个参数 获取元素的某个属性
* 参数的值就是属性名字
* 两个参数 设置元素的某个属性
* 第一个参数为属性名字，第二个参数为属性要设置成的值 4.date
* data() 给标签添加数据
* 有参数的话，是添加数据（用对象的形式去表示）
* 没参数的话，是获取数据
$(function(){console.log($(\'p\').attr(\'class\')); //con$(\'p\').attr(\'class\',\'neirong\');$(\'input\').attr(\'value\',\'kaivon\'); //这种方法这样写的话与val()这个方法的效果是一样的$(\'input\').attr(\'name\',123); //可以添加自定义属性console.log($(\'input\').attr(\'name\')); //123$(\'p\').data({\'name\':\'kaivon\',\'age\':18});console.log($(\'p\').data());});<p class="con">kaivonkaivon</p><input type="button" value="按钮" />
结合css. attr 例子
$(function(){$(\'div\').attr(\'on\',\'false\');$(\'input\').click(function(){if($(\'div\').attr(\'on\')==\'false\'){$(\'div\').css({width:200,height:200,background:\'green\'});$(\'div\').attr(\'on\',\'true\');}else{$(\'div\').css({width:100,height:100,background:\'red\'});$(\'div\').attr(\'on\',\'false\');}});});<input type="button" value="按钮"/><div></div>
五 、JQ中的innerHTML
* html() 取元素里的内容，与js中的innerHTML的效果是一样的
* text() 取元素里的文字，不取标签
$(function(){console.log($(\'div\').html()); //今天<span>是个</span>好的<span>日子</span>console.log($(\'div\').text()); //今天是个好的日子$(\'div\').html(\'<span>dasdasdas</span>\');console.log($(\'div\').html()); //<span>dasdasdas</span>console.log($(\'div\').text()); //dasdasdas})<div>今天<span>是个</span>好的<span>日子</span></div>
六、JQ中的链式操作
一个元素的连续操作
$(\'div\').css({width:100,height:100,background:\'red\'}).html(\'<span>kaivon</span>\').click(function(){$(this).css(\'color\',\'blue\');});
1.找父节点
parent() 找到元素的第一层父节点
parents() 找元素的所有父节点，一直找到html
$(function(){$(\'#div2\').parents().css(\'background\',\'red\');})<div id="div1">div1<div id="div2">div2</div></div>
2.找最近的节点
closest(selector) 从自身开始，一步一步往外找，找到对应的那一个后便会停止 (selector不能是空)
$(function(){$(\'#div2\').closest(\'.div1\').css(\'border\',\'1px solid #f00\');$(\'span\').click(function(){$(this).closest(\'li\').css(\'background\',\'red\');});})<div class="div1"><div class="div1">div1<div id="div2">div2</div></div></div><ul><li>12121212<span>span</span></li><li>222222<span>span</span></li><li>333333<span>span</span></li><li>444444<span>span</span></li></ul>
3.获取节点
* 获取节点 （主语不一定是父级）从自身去找，而不是相对父级，
* .first() 获取主语第一个子节点
* .last() 获取主语最后一个子节点
* .slice(start,end) 截取部分子节点
* start 起始位置 （从0开始）
* end 结束位置,不包含结束位置，第二个参数不写的话，截到最后一位
$(function(){//$(\'li\').first().css(\'background\',\'red\');//$(\'li\').last().css(\'background\',\'green\');$(\'li\').slice(2,4).css(\'background\',\'yellow\');$(\'li\').slice(3).css(\'background\',\'blue\');$(\'ul\').first().css(\'background\',\'red\'); //因为一个ul，$(\'ul\').slice(1,2).css(\'color\',\'yellow\'); //这样是错误的，因为只有一个ul});<ul><li>red</li><li>green</li><li>blue</li><li>yellow</li><li>pink</li></ul>
* .children (selector) 获取到元素里的第一层子节点 （局限在第一层）
* 参数如果没有的话，获取到父级下的所有子节点
* 有参数的话，参数是一个选择器，找到对应选择器的节点
* .find() 获取元素里的所有节点 （不局限在第一层）
$(function(){$(\'ul\').children().css(\'color\',\'red\'); //获取到所有的第一层子节点$(\'ul\').children(\'.blue\').css(\'color\',\'blue\'); //获取到第一层子节点 中class为blue的子节点$(\'ul\').find(\'li\').css(\'background\',\'pink\'); //获取到所有的li节点$(\'ul\').find(\'span\').css(\'background\',\'black\'); //获取到span标签})<ul><li>red</li><li>green</li><li class="blue">blue</li><li>yellow</li><li>pink<span>black</span></li></ul>
4.创建节点以及添加节点
* 父级.append(要添加的元素) 把要添加的元素添加到父级的最后面
* 父级.prepend(要添加的元素) 把要添加的元素添加到父级的最前面
* 元素.before(要添加的元素) 把要添加的元素添加到一个指定的元素的前面
* 元素.after(要添加的元素) 把要添加的元素添加到一个指定的元素的后面
$(function(){//原生js创建节点方法// var ul=docuemnt.getElementById(\'#list\');/* var li1=document.createElement(\'li\');li1.innerHTML=\'red\';*///原生js添加节点//ul.appendChild(li1);//JQ创建节点var li1=$(\'<li>red</li>\')//JQ添加节点$(\'#list\').append(li1);var div3=$(\'<div>blue</div>\');var div4=$(\'<div>yellow</div>\');$(\'body\').append(div3); //把div3添加到html中$(\'#list\').before(div3); //把div3放在了ul前面$(\'#list\').after(div3); //把div3放在了ul的后面});<ul id="list"></ul>
另外一种方法
* 要添加的元素.appendTo(父级) 把要添加的元素添加到父级的最后面
* 要添加的元素.prependTo(父级) 把要添加的元素添加到父级的最前面
* 要添加的元素.insertBefore(元素) 把要添加的元素添加到一个指定的元素的前面
* 要添加的元素.insertAfter(元素) 把要添加的元素添加到一个指定的元素的后面5.删除节点元素以及克隆节点
* remove() 删除元素
* 元素.remove();
*
* clone(blooen) 克隆元素
* 参数默认为空，表示只复制元素，不复制事件。如果参数为true，表示元素与事件都会被复制
$(function(){$(\'li\').first().remove(); //<li>red</li>被移除$(\'span\').click(function(){console.log(1);});var newSpan=$(\'span\').clone(true);$(\'div\').append(newSpan);});<ul><li>red</li><li>green</li><li>blue</li></ul><span>kaivon</span><div></div>
6.上一个兄弟节点和下一个兄弟节点
* 上一个兄弟节点
* .prev()
*
* 下一个兄弟节点
* .next()
$(function(){//上移功能$(\'input[value="上移"]\').click(function(){var curLi=$(this).parent();var prevLi=curLi.prev();//因为这个是JQ的对象，所以判断上一个节点是否存在需要用length判断if(prevLi.length){prevLi.before(curLi);}else{alert(\'到头了\');}});//下移功能$(\'input[value="下移"]\').click(function(){var curLi=$(this).closest(\'li\');var nextLi=curLi.next();if(nextLi.length){nextLi.after(curLi);}else{alert(\'到头了\');}});});<ul><li>1、<input type="button" value="上移"/><input type="button" value="下移"/></li><li>2、<input type="button" value="上移"/><input type="button" value="下移"/></li><li>3、<input type="button" value="上移"/><input type="button" value="下移"/></li><li>4、<input type="button" value="上移"/><input type="button" value="下移"/></li><li>5、<input type="button" value="上移"/><input type="button" value="下移"/></li></ul>
七、JQ中索引值
* index()
* 没有参数
* 第一个元素（获取到的这个元素，因为jquery获取到的是一组数据）在兄弟元素中的排行
* 有参数
* 代表前面的元素在参数的标签（所有标签，不分兄弟）里排行第几
$(function(){console.log($(\'#div1\').index()); //0console.log($(\'div\').index()); //1console.log($(\'span\').index()); //4console.log($(\'#s1\').index(\'span\')); //2console.log($(\'#s2\').index(\'span\')); //5console.log($(\'.box\').index(\'span\')); //-1 表示没有找到});<p>p</p><div>div</div><div>div</div><!--<div id="div1"></div>--><div><div id="div1"></div></div><span></span><span></span><div class="box"><span id="s1">s1</span><span></span><span></span></div><div><span id="s2">s2</span></div>
* 通过索引找到对应的元素（因为JQ中获取的对象是数组）
* eq(index) 参数为下标 JS中通过索引找到对应元素 xxx[index]
$(function(){$(\'#box input\').click(function(){$(\'#box input\').attr(\'class\',\'\');$(this).attr(\'class\',\'active\');$(\'#box div\').attr(\'style\',\'display:none\');$(\'#box div\').eq($(this).index()).attr(\'style\',\'display: block;\');})})<div id="box"><input class="active" type="button" value="按钮一" /><input type="button" value="按钮二" /><input type=以上是关于JQuery的主要内容，如果未能解决你的问题，请参考以下文章markdown 在WordPress中使用jQuery代码片段