jquery基本操作笔记
jq和js
可以共存,不能混用;
$('.box').css('background','red');
$(".box").css({ color: "#ff0011", background: "blue"});
$('li:eq(2)').css('background','red'); //:first选择
$('li:odd').css('background','red'); //even奇数行,odd偶数行
$('li').filter('.box').css('background','red'); filter过滤、筛选;
$('li').filter('[title=hello]').css('background','red');
方法函数化:
window.onload = function(){};
$(function(){});
function $(){}
innerHTML = 123;
html(123)
function html(){}
onclick = function(){};
click(function(){})
function click(){}
$('#div1').click(function(){alert( $(this).html() );
});
jquery中的this的写法是 $(this) ;html() 因为方法函数法的思想的存在,() 是不能省去的,运行函数;这在jquery中很常见;
js和jquery的关系:
可以互存,不能混用;
$(function(){$('#div1').click(function(){//alert( $(this).html() ); //jq的写法;//alert( this.innerHTML ); //js的写法;这样写也是正确的;alert( $(this).innerHTML ); //错误的;前面是jquery,后面是js,混用了,不允许;alert( this.html() ); //错误的;前面是js,后面是jquery,混用了,不允许;});
});
链式操作:
$(function(){/*var oDiv = $('#div1');oDiv.html('hello');oDiv.css('background','red');oDiv.click(function(){alert(123);});*/$('#div1').html('hello').css('background','red').click(function(){alert(123);});
});
建议熟悉了,再写链式写法;
取值和赋值合体:
赋值和取值用的同一种方法,只不过是通过有没有参数来决定是取值还是赋值;
$(function(){//oDiv.innerHTML = 'hello'; //赋值//alert( oDiv.innerHTML ); //取值//$('#div1').html('hello'); //赋值//alert( $('#div1').html() ); //取值css('width','200px') //设置width是200px;css('width') //获取width的值;
});
取值和赋值:获取的时候只能获取一个,赋值的时候赋值到所有的;
$(function(){//alert( $('li').html() ); //当一组元素的时候,取值是一组中的第一个;会弹出内容:aaa$('li').html('hello'); //当一组元素的时候,赋值是一组中的所有元素
});
$()下的常用方法
attr()
$(function(){//alert($('div').attr('title')); 获取title属性$('div').attr('title','456'); //设置title$('div').attr('class','box'); //设置class
});
filter:过滤
not: filter的反义词
$(function(){//$('div').filter('.box').css('background','red'); //只带有box的才会被选择$('div').not('.box').css('background','red'); //不带有box的才会选择;not和filter是反义词
});
has和filter的区别
has是包含的意思,选择的是元素里面的东西;
而filter针对的元素自身的选择;
$(function(){//$('div').has('span').css('background','red');//$('div').has('.box').css('background','red'); //has是选择元素里面的东西,不能选择到第二个div$('div').filter('.box').css('background','red'); //filter是针对元素自身的;只会选择到第二个div
});
next和prev:
next选择下一个兄弟节点;
prex选择上一个兄弟节点;
find 查找当前元素下所有的后代元素;
eq() 一组中的第几个;
index() 一组元素的索引;通过一组索引,来控制另外一个索引;
$(function(){alert( $('#h').index() ); //索引就是当前元素在所有兄弟节点中的位置;
});
选项卡:
原生js和jquery:
window.onload = function(){var oDiv = document.getElementById('div1');var aInput = oDiv.getElementsByTagName('input');var aCon = oDiv.getElementsByTagName('div');for(var i=0;i<aInput.length;i++){aInput[i].index = i;aInput[i].onclick = function(){for(var i=0;i<aInput.length;i++){aInput[i].className = '';aCon[i].style.display = 'none';}this.className = 'active';aCon[this.index].style.display = 'block';};}
};
$(function(){
$('#div1').find('input').click(function(){
$('#div1').find('input').attr('class','');
$('#div1').find('div').css('display','none');
$(this).attr('class','active');
$('#div1').find('div').eq( $(this).index() ).css('display','block');
});
});
<body>
<div id="div1"><input class="active" type="button" value="1" /><input type="button" value="2" /><input type="button" value="3" /><div style="display:block">111111</div><div>222222</div><div>333333</div>
</div>
</body>
这里的jquery是根据js的思路来编写的;
也可以用其他的思路来做这个选项卡,用到siblings()等;
addClass和removeClass
$(function(){$('div').addClass('box2 box4');$('div').removeClass('box1');
});
width() innerWidth() outerWidth() 获取元素的宽和区别:
$(function(){alert( $('div').width() ); //widthalert( $('div').innerWidth() ); //width + paddingalert( $('div').outerWidth() ); //width + padding + borderalert( $('div').outerWidth(true) ); //width + padding + border + margin
});
insertBefore() insertAfter()
注意:insertBefore是剪切的功能,不是复制的功能;
$(function(){//$('span').insertBefore( $('div') ); //将span调整到div的前面,jq中的insertBefore和js中的insertBefore是一样的;具备剪切的功能,而不是复制的功能;//$('div').insertAfter( $('span') ); //将div放在span的后面;//$('div').appendTo( $('span') ); //和js中的appendChildren是一样的;作用是把一个节点添加到指定节点最后的位置;//$('div').prependTo( $('span') ); //原生js中没有,作用是把一个节点添加到指定节点最开始的位置; //insertBefore和before的区别 :后续操作变了;主要是我们写链式操作会有影响;//$('span').insertBefore( $('div') ).css('background','red');$('div').before( $('span') ).css('background','red');
});
remove() 删除节点
$(function(){$('div').remove();
});
on() off() 事件的写法:
off取消事件;
$(function(){/*$('div').click(function(){alert(123);});*//*$('div').on('click',function(){ //支持多个事件,支持系统事件和自定义事件alert(123); });*//*$('div').on('click mouseover',function(){ //多个事件,中间用空格alert(123);});*//*$('div').on({'click' : function(){ //中间用冒号alert(123);},'mouseover' : function(){alert(456);}});*/ //点击弹出123.移入弹出456 说明on还是很灵活的$('div').on('click mouseover',function(){alert(123);$('div').off('mouseover'); //执行后,mouseover事件会被关闭});
});
scrollTop() 获取和设置滚动距离
$(function(){$(document).click(function(){alert( $(window).scrollTop() ); //获取滚动距离});
});
编写弹窗效果:
首先,在DOM中创建元素是非常容易的事情;
var oDiv = $('<div>div</div>'); //创建div元素和内容
$('body').append( oDiv );
弹窗效果:
$(function(){$('#input1').click(function(){//动态创建元素和内容var oLogin = $('<div id="login"><p>用户名:<input type="text" /></p><p>密码:<input type="text" /></p><div id="close">X</div></div>'); //中间不能有空格$('body').append( oLogin ); //插入元素//让弹窗居中oLogin.css('left' , ($(window).width() - oLogin.outerWidth())/2 ); //设置left值oLogin.css('top' , ($(window).height() - oLogin.outerHeight())/2 ); //设置top值$('#close').click(function(){oLogin.remove(); //移除节点});//在调整窗口大小事件和滚动事件,调整弹出窗的位置;$(window).on('resize scroll',function(){ //在调整窗口大小事件和滚动事件oLogin.css('left' , ($(window).width() - oLogin.outerWidth())/2 );oLogin.css('top' , ($(window).height() - oLogin.outerHeight())/2 + $(window).scrollTop() ); //top值要注意加上滚动距离});});
});
ev pageX which
preventDefault stopPropagation
one()
$(function(){/*$('div').click(function(ev){//ev : jq中直接使用,是兼容后的event对象//ev.pageX(鼠标坐标-->相对于文档的) js中是使用clientX(相对于可视区域的)//ev.which : js中的keyCodeev.preventDefault(); //阻止默认事件ev.stopPropagation(); //阻止冒泡的操作return false; //阻止默认事件 + 阻止冒泡的操作});*/$('div').one('click',function(){ //one-->只执行事件一次alert(123);});
});
offset() position()
$(function(){//div2.offsetLeft//alert( $('#div2').offset().left ); //获取到屏幕的左距离 offset().left offset.top()alert( $('#div2').position().left ); //到有定位的父级的left值,把当前元素转化成类似定位的形式,注意是不算margin的
});
parent() offsetParent() 获取有定位的父级
parent() : 获取父级,不管父级是否有定位; 注意这里没有加s,不是parents,jq中还有parents()方法,见下
offsetParent() : 获取有定位的父级
$(function(){//parent() : 获取父级//offsetParent() : 获取有定位的父级//$('#div2').parent().css('background','blue');$('#div2').offsetParent().css('background','blue');
});
val() 获取元素的value值;
size() 获取一组元素的长度;像length;
each() jq中的循环;原生for循环的加强版
$(function(){//alert( $('input').val() ); 获取value值//$('input').val(456); 赋值value值alert( $('li').size() ); //4 获取一组元素的长度;像length$('li').each(function(i,elem){ //一参:下标 二参 : 每个元素$(elem).html(i);});
});
拖拽jquery实现:
$(function(){var disX = 0;var disY = 0;$('div').mousedown(function(ev){disX = ev.pageX - $(this).offset().left; //存储距离disY = ev.pageY - $(this).offset().top;$(document).mousemove(function(ev){$('div').css('left',ev.pageX - disX);$('div').css('top',ev.pageY - disY);});$(document).mouseup(function(){$(document).off(); //鼠标弹起的时候取消事件});return false; //阻止默认事件和冒泡});
});
hover() 模拟css中的hover,鼠标移入移除;
hover 鼠标移入和鼠标移除结合的方法;
hover(function(){},function(){})
Show() hide() 接受一个参数- -> 时间(ms) 长,宽,透明度都要变化
fadeIn() fadeOut() 淡出效果和淡出效果 改变透明度
fadeTo() 指定到一个范围,有两个参数,第一个是时间,第二个是透明度值
$('#div2').fadeTo(1000,0.5);
slideDown() slideUp() 向下展开,向上卷起;
get()方法
$(function(){//document.getElementById('div1').innerHTML//alert( $('#div1').get(0).innerHTML ); get需要标注下标;将jquery转成原生js/*for(var i=0;i<$('li').get().length;i++){ //这里通过get()转成js,这里的length相对于js的$('li').get(i).style.background = 'red';}*/for(var i=0;i<$('li').length;i++){ //这里的length是JQ中的属性,也是使用正确的;$('li').get(i).style.background = 'red';//$('li')[i].style.background = 'red'; 得到元素后,后面加一个中括号,写成下标的形式,也就自动转成原生js的形式了;这是一种偷巧的写法;}
});
outerWidth与原生的区别:
$(function(){//alert( $('#div1').get(0).offsetWidth ); //这里原生js,如果把div1设置为隐藏,获取的值为0;alert( $('#div1').outerWidth() ); //不管是显示和隐藏的,都可以获取到值;
});
text() 会获取所有的内容(特例),不会获取到标签,而html会获取到标签;
$(function(){//alert( $('div').html() );//alert( $('div').text() ); //会获取所有的内容(特例)$('div').text('<h3>h3</h3>'); //在浏览器中会输出纯文本<h3>h3</h3>
});
remove()和detach()的区别:
//remove方法删除元素的时候会把元素的操作行为也删除掉;
//detach() : 跟remove方法一样,只不过会保留删除这个元素的操作行为
$(function(){$('div').click(function(){alert(123);});var oDiv = $('div').detach(); //这里如果用remove(),恢复的时候,点击行为会无效$('body').append( oDiv );
});
$() : $(document).ready() 与window.οnlοad=function(){}的区别:
$(function(){ //等DOM加载完就可以执行了 , 性能要好
});
是
$(document).ready(function(){
});
的简写;
window.onload = function(){}; //等图片和flash等加载完才执行;
//DOMContentLoaded
parents() closest()
//parents() : 获取当前元素的所有祖先节点,参数就是筛选功能
//closest() : 获取最近的指定的祖先节点(包括当前元素自身),必须要写筛选的参数,只能找到一个元素
$(function(){//$('#div2').parents().css('background','red'); //获取到所有祖先节点 div1,body,html//$('#div2').parents('.box').css('background','red'); //获取到class为box的祖先元素$('#div2').closest('.box').css('background','red');
});
siblings() 获取元素的所有兄弟节点 ;
nextAll() 获取下面所有的兄弟节点;
preAll() 获取上面所有的兄弟节点;
parentsUntil() nextUntil() prevUntil()
//siblings() : 找所有的兄弟节点,参数也是筛选功能
//nextAll() : 下面所有的兄弟节点,参数也是筛选功能
//prevAll() : 上面所有的兄弟节点
//Until() : 截止
$(function(){$('span').nextUntil('h2').css('background','red');
});
clone() 克隆节点:
$(function(){//$('div').appendTo( $('span') ); //剪切行为//$('span').get(0).appendChild( $('div').get(0) );//clone() : 可以接收一个参数 ,作用可以复制之前的操作行为$('div').click(function(){alert(123);});$('div').clone(true).appendTo( $('span') ); //参数true作用可以复制之前的操作行为
});
wrap() wrapAll() wrapInner() unwrap() 包装,包装方法
在外面包裹一下
$('span').wrapInner('<div>'); //在span外包装div
wrapAll() 整体包装:
//wrap() : 包装
//wrapAll() : 整体包装; 会影响结构
//wrapInner() : 内部包装;
//unwrap() : 删除包装 ( 删除父级 : 不能删除body )
$(function(){//$('span').wrapInner('<div>'); div在span里面了$('span').unwrap();
});
add()
$(function(){/*var elem = $('div');var elem2 = elem.add('span');elem.css('color','red');elem2.css('background','yellow');*/$('li').slice(1,4).css('background','red');
});
slice()
$('li').slice(1,4).css('background','red');
第一个参数是起始位置,4是结束位置(选中的不包括结束位置);
serialize() serializeArray() 数据串连化
$(function(){//console.log($('form').serialize()); //string : a=1&b=2&c=3console.log( $('form').serializeArray() );[{ name : 'a' , value : '1' },{ name : 'b' , value : '2' },{ name : 'c' , value : '3' }]
});
</script>
</head>
<body>
<form><input type="text" name="a" value="1"><input type="text" name="b" value="2"><input type="text" name="c" value="3">
</form>
jquery中的animate()
//animate() :
//第一个参数 : {} 运动的值和属性
//第二个参数 : 时间(运动快慢的) 默认 : 400 毫秒
//第三个参数 : 运动形式 只有两种运动形式 ( 默认 : swing(缓冲,慢快慢) linear(匀速) ) 默认是缓冲(慢快慢)
//第四个参数 : 回调函数;运行结束后,回调函数
$(function(){$('#div1').click(function(){$(this).animate({width : 300 , height : 300} , 3000 , 'linear',function(){alert(123); //回调函数,也可以用链式操作来写;});$('#div2').animate({width : 300 , height : 300} , 3000 , 'swing');});
});
链式操作来写:先宽后高;和上述的回调函数效果一致;
$(this).animate({width : 300} , 2000).animate({height : 300} , 2000);
Stop()方法:
$('#div2').click(function(){//$('#div1').stop(); //默认 : 只会阻止当前运动(当前步骤)//$('#div1').stop(true); //阻止所有后续的运动//$('#div1').stop(true,true); //立即停止到当前步骤指定的目标点,当前步骤的目标点// stop不能做到,点一下-->直接到最后的目标点-->用finish()$('#div1').finish(); //立即停止到所有指定的目标点,到最后的目标点});
delay()
延迟
jquery中事件委托:
delegate() undelegate()
$(function(){/*$('li').on('click',function(){this.style.background = 'red';});*/$('ul').delegate('li','click',function(){ //事件委托this.style.background = 'red'; $('ul').undelegate(); //阻止事件委托});
});
trigger() 主动触发
$(function(){/*$('#div1').on('click',function(){alert(123);});$('#div1').trigger('click'); //主动触发*/$('#div1').on('show',function(){alert(123);});$('#div1').on('show',function(){alert(456);});$('#div1').trigger('show');
});
事件细节:
$(function(){$('#div1').on('click',{name:'hello'},function(ev){//alert(ev.data.name); 这里的ev.data等于{name:'hello'}这个整体,ev.data.name就是hello//alert( ev.target ); 当前操作的事件源,全兼容的alert( ev.type ); 当前操作事件类型});
});
jquery的工具方法:
我们前面的都是$().css() $().html() $().val() : 只能给JQ对象用;
而实际上,我们还存在另外一种写法: 不仅可以给jquery用,也可以给原生js用;
$.xxx() $.yyy() $.zzz() : 不仅可以给JQ用,也可以给原生JS用 : 叫做工具方法
type()
trim()
$(function(){//var a = null;//$.type() : 也是判断类型,功能更加强大,能判断出更多的类型//alert( typeof a ); 原生js的判断变量类型//alert( $.type(a) ); 用$.type()判断出更多类型,功能更强大var str = ' hello ';alert('('+$.trim(str)+')'); //$.trim()去除前后的空格
});
inArray() 类似于 indexOf
proxy() 改变this指向;
$(function(){//var arr = ['a','b','c','d'];//alert( $.inArray('b',arr) ); //b在array这个数组中的位置;若没有会返回-1;有的话就返回位置//proxy() : 改变this指向的function show(n1,n2){alert(n1);alert(n2);alert(this);}//show();//$.proxy(show , document)(); //show的this指向document//$.proxy(show , document,3,4)(); //对于传参,传参可以这样传$.proxy(show , document,3)(4); //也可以这样混着传参//jquery中为什么要这样传参呢?//$(document).click( $.proxy(show,window)(3,4) ); //如果这样传参,刷新就直接调用函数$(document).click( $.proxy(show,window,3,4) ); //这样传参,就是在click后才会调用函数,而不会直接调用; });
$.noConflict() 防止冲突
//$ , jQuery $=jQuery 一回事 $不是jQuery独有的
//noConflict() : 防止冲突的
var aaa= $.noConflict();
var $ = 10;
aaa(function(){aaa('body').css('background','red');
});
parseJSON() 把字符串转换成json类型
var str = '{"name":"hello"}'; //字符串必须是严格的JSON格式
alert($.parseJSON( str ).name); //把字符串转换成json
makeArray()
window.onload = function(){var aDiv = document.getElementsByTagName('div'); //只是集合,不是真正的数组,我们叫做类数组(类似于数组)$.makeArray(aDiv).push(); //通过 $.makeArray(aDiv) 把 类数组 转换成 真正的数组
};
jquery中使用ajax
<script>
/*$.ajax({url : 'xxx.php',data : 'name=hello&age=20',type : 'POST', //默认是getsuccess : function(data){ //请求成功以后的回调函数alert(1);},error : function(){ //请求失败之后alert(2);}
});*/
$.get('xxx.php',function(){ //ajax的get请求可用get(),第一个是地址,第二个是成功后回调
});
// $.get()和$().get()是有区别的;前者是ajax的get请求方法,后者是将jQuery对象转换成js原生对象
$.post('xxx.php',function(){
});
$.getJSON('xxx.php?callback=?',function(data){ //请求json类型的数据,支持jsonp的形式:指定?callback=?data
});
随机({});
</script>
jQuery中的插件
扩展插件
//$.extend : 扩展工具方法下的插件形式 $.xxx() $.yyy()
//$.fn.extend : 扩展到JQ对象下的插件形式 $().xxx() $().yyy()
用插件实现去掉左空格
$.extend({leftTrim : function(str){return str.replace(/^\s+/,''); //这里用正则来去掉左空格}
});
var str = ' hello ';
alert( '('+$.leftTrim(str)+')' ); //利用leftTrim去掉左空格
$.extend({ //用extend,json的写法,可以扩展多个leftTrim : function(str){return str.replace(/^\s+/,''); //这里用正则来去掉左空格},rightTrim : function(){},aaa : function(){alert(1);}
});
$.fn.extend({ //也是写成json形式
drag : function(){ //这里扩展拖拽//this : $('#div1')var disX = 0;var disY = 0;var This = this; //这里将this存入变量This中;this.mousedown(function(ev){disX = ev.pageX - $(this).offset().left;disY = ev.pageY - $(this).offset().top;$(document).mousemove(function(ev){This.css('left' , ev.pageX - disX);This.css('top' , ev.pageY - disY);});$(document).mouseup(function(){$(this).off();});return false;}); },aaa : function(){alert(2);}
});
//$.trim()
//$.leftTrim()
/*var str = ' hello ';
alert( '('+$.leftTrim(str)+')' );*/
$(function(){$('#div1').drag(); //这里调用上面插件的扩展
});
$.aaa(); // 1
$().aaa(); //2
转载于:https://www.cnblogs.com/webcome/p/5484005.html
jquery基本操作笔记相关推荐
- jQuery学习笔记--目录
jQuery学习笔记--Helloworld jQuery学习笔记--DOM对象和jQuery对象 jQuery学习笔记--jQuery选择器 jQuery学习笔记--jQuery的DOM操作 jQu ...
- jQuery学习笔记之DOM操作、事件绑定(2)
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...
- jQuery 基本操作
2019独角兽企业重金招聘Python工程师标准>>> jQuery 基本操作 jQuery 是一个轻量级的javascript类库, 只有14k(未压缩的版本有77k) jQuer ...
- 【转载】jQuery学习笔记
jQuery学习笔记 1 基础 HTML :一个人的裸体,是一个人的物质基础,是一个结构. CSS :一个人的漂亮外衣,使一个人看起来不是那么原始,修饰了一个人. JavaScript :一个人的灵魂 ...
- jQuery学习笔记:Ajax(二)
接上篇"jQuery学习笔记:Ajax(一)". 3.jQuery.get(url,[data],[callback],[type])通过远程 HTTP GET 请求载入信息. 这 ...
- json.js+ jquery 操作笔记
json.js+ jquery 操作笔记 json.js下载地址: http://www.json.org/js.html 我初学JSON,按照官方说明,在json2.js中有parse和string ...
- jQuery学习笔记02:核心部分
jQuery学习笔记:核心部分 一.$(expr) 1.说明 $(expr) 该函数通过CSS选择器.XPath或html代码来匹配目标元素 参数:expr(字符串,一个查询表达式或一段html字符串 ...
- jQuery学习笔记01:初试jQuery
jQuery学习笔记01:初试jQuery 一.下载jQuery jQuery官网:https://jquery.com 二.案例演示--Welcome to jQuery World 1.在WebS ...
- jQuery学习笔记(二)
jQuery学习笔记(二) 二.管理jQuery包装集 1.创建新的元素 使用HTML DOM 创建元素 var select=document.createElement("select& ...
最新文章
- 使用多线程还是用IO复用select/epoll? epoll 或者 kqueue 的原理是什么?
- 你所知道的深度学习发展史及核心节点事件?
- matlab怎么求hadamard,hadamard matlab
- java循环之后求和代码,Java lambda 循环累加求和代码
- 404是什么意思,404错误页面有什么用?
- Assets, Objects and serialization Assets, Objects与序列化 最佳实践系列3
- wps公式如何加序号_WPS表格技巧—筛选后也会自动连续的序号
- 抽象代数 群论(第1章)2 子群,配集分解,循环群
- 计算机毕业设计,java+mysql毕业设计 ,动漫论坛
- zonecreate
- 老贴纪念六(纪念热得快君)
- Android设置唤醒键唤醒系统的功能
- 【多源融合】Sage-Husa滤波完整推导
- CSS--层叠样式表
- 苹果电脑访问局域网Windows系统共享
- ARP攻击和欺骗原理讲解
- engine的工具中实现Snapping(捕捉)
- html怎么加一小部分图片,如何把一张照片放到电脑桌面一小块空地方
- Qt +opencv 通过级联分类器训练的模型进行识别(车辆识别+人脸识别)
- BZOJ 4338 BJOI2015 糖果
热门文章
- Pytorch 之 TSM(Time Shift Module)测试部分源码详解
- pytorch对张量的一些常用处理以及numpy对数组的一些常用处理
- mysql中int型的zerofill参数
- STL库容器vector at函数
- C++ volatile关键字说明
- hdc mfc 画扇形图_科学网—画扇形图(idl程序) - 张国印的博文
- c++-内存管理-G4.9
- 解决嵌入式开发过程中开发板与虚拟机的网络通信问题
- linux下搭建ntp服务,Linux 下快速搭建ntp 时间同步服务器
- 笔记-VUE滚动加载更多数据