页面引入cdn,下载本地在页面引入 $.('.div').hide();支持css选择器还有许多自有选择器来选择dom元素
入口函数:$.(function() {});
dom对象和jQuery对象转换
dom对象转换成jQuery对象 $.(oDiv) 把原生js获取到的对象用$()包装一下jQuery对象转换成dom对象 $.('div')[index] 或 $('div').get(index)支持css选择器$.('选择器')
遍历dom元素的过程叫隐式迭代,相当于将匹配到的所有元素for循环遍历添加css
$.('div).css('background','pink')jquery筛选选择器
$.('li:first') 获取第一个li元素 $.('li:last') 获取最后一个li元素 $.('li:eq(index)') 选中获取到的li中索引为index位的li元素 $.('li:odd') 选中获取到的li中,索引为奇数的li元素 $.('li:even') 选中获取到的li中,索引为偶数的li元素jQuery筛选方法 $.('li').parent(); 选中li元素的父级 。。。。。
jQuery可以使用css方法来简单修改元素样式 $.(this).css({width: '200px', height: '100px'})这种方式可以一起修改多个样式
通过设置类的方式修改元素样式(大量样式修改)
添加类名 $.('div').addClass('class')删除类名 $.('div').removeClass('class')切换类名 $.('div').toggleClass('class') 有就删除,没有就添加原生js中className会覆盖原有类名,jQuery中这类操作不影响原类名显示和隐藏: 显示:show() 隐藏:hide() 切换显示隐藏效果:toggle()
滑动: slideDown() slideUp() slideToggle()
淡入淡出: fadeIn() fadeOut() fadeToggle() fadeTo()
自定义动画:animate(params,[speed],[easing],[fn]) 参数:params: 想要更改的样式属性,以对象形式传递,必须写,如果是符合属性需要采用小驼峰写法,其他参数可省略 eg:
$.(function() { $.('button').click(function() { $.('div').animate({ left: 500, top: 500, opacity: 0.5 }, 500) }) })停止动画效果: 取消上一个动画效果不影响本次动画: 相当于防抖 stop() 方法必须写到动画前面 eg: $.(this).stop().slideToggle();
元素的固有属性值的设置和获取 element.prop() 获取属性值:prop(‘属性’) 设置属性值:prop(‘属性名’,‘属性值’)
元素自定义属性值的设置和获取 element.attr() 获取属性值:attr(‘属性’) 设置属性值:attr(‘属性名’,‘属性值’)
数据缓存 data() 这个里面的数据是存放在元素的内存里的 设置:$.('span').data('uname', 'parker') 获取:console.log($.('span').data('uname'))
主要针对元素内部还有表单的值操作
获取普通元素内容 (相当于原生innerHTML) $.('div').html()
设置普通元素内容 eg: $.('div').html('123') ==> div内部只有‘123’
普通文本元素文本内容 text() (相当于原生 innerText) $.('div').text()
设置普通元素文本内容 $.('div').text(‘Parker’)
获取表单值 val() $.('input').val()
设置表单值 $.(input').val('haha')
主要是遍历、创建、添加、删除元素操作
是对同一元素做了同样的操作,如果想要给同一元素做不同操作,就需要遍历 语法1:$.('div').each(function (index, domEle) { xxxx; } ) eg: (div{$}*3)
$.(function() { var sum = 0; //each() 方法遍历 var arr = ['red', 'green', 'vlue']; $.('div').each(functon(index, domEle) {//第二个参数是dom对象 $.(domEle).css('color', arr[i]); sum += parseInt($.(domEle).text()); }) console.log(sum);//6 })语法2:$.each($('div'), function(incex, ele) { }) 主要用来处理数据
创建方法:var li = $.('<li></li>')
添加元素
内部添加:$.('ul').append(li) 类似于原生的 appendChild 外部添加:element.after('内容') //把内容放在目标元素后面 element.before('内容') //把内容放在目标元素前面
内添加生成父子结构,外部天加生成兄弟结构
$.('ul').remove(); 删除该节点 $.('ul').empty(); 清空该节点中的子节点 $.('ul').html('空字符串') 清空该节点中的子节点
常见的注册事件 on绑定事件的优势 jQuery事件委派的优点以及方式 绑定事件与解绑事件
语法: ele.事件名(functoin() {}) 常见事件:mouseover、 mouserout、 blur、 focus、 change、 keydown、 keyup、 resize、 scroll等
on{}方法在匹配元素上绑定一个或多个事件的事件处理函数 on绑定事件可以给动态创建的元素绑定事件 jQuery中绑定事件如无特殊要求,一般都用on来绑定
语法:element.on(events, [selector], fn) events:一个或多个用空格分隔的事件类型 selector:元素的子元素选择器 fn: 回调函数
方法一:
ele.on({//多个事件绑定 click: functon() {}, mouseenter: function() {} })方法二:
ele.on('mouseenter mouseleave', function() { alert(123) })one()绑定事件只会触发一次 $.('div').one('click', function() {} )
$.('ul').on('click', 'li', function() {}); //事件绑定在ul上却在它的子元素li上触发(事件冒泡)
off()方法可以移除通过on()方法添加的事件处理程序 $.('div').off(); //解除div上所有on绑定的事件 $.('div').off('click'); //解除div上on绑定的click事件 $.('ul').off('click', 'li'); //解除事件委托
方法一:ele.click() //元素直接调用身上绑定的方法 方法二:ele.trigger('type') //自动触发模式 type是需要触发的绑定在元素上的方法 方法三:ele.triggerHandler('click') //与以上方法的区别是不会触发元素的默认行为,如input获取焦点
事件被触发,就会有事件对象产生 ele.on('click', function(e) { console.log(e) }) 阻止默认行为: e.preventDefault() 或者 return false 阻止冒泡:e.stopPropagation()
参数为空,就获取值类型为数字型;如果参数为数字则是修改相应值;参数不写单位; width()/height() 获得匹配元素宽度和高度值 只算width/height innerWidth()/innerHeight() 获得匹配元素宽度和高度值 包含 padding outerWidth()/outerHeight() 获得匹配元素宽度和高度值 包含 padding 、border outerWidth(true)/outerHeight(true) 获得匹配元素宽度和高度值 包含 padding 、border 、margin
主要有三个 offset() position() scrollTop()/scrollLeft()
offset() 设置或获取元素相对文档的偏移坐标,与父级无关,该方法有俩属性left、top 获取元素属性方法 offset().top/left 设置元素偏移 offset({top:10,left:10})
position() 只能获取,最近有定位的父级偏移,没有就相对于文档,不能设置
scrollTop()/scrollLeft() 获取或设置页面被滚动条隐藏的距离(获取设置滚动条位置)参数为空是获取,为数字是设置
jQuery对象的拷贝方法 $.extend() 相当于合并对象,浅拷贝冲突项会被拷贝来的值覆盖,深拷贝不冲突的属性不会被覆盖 语法:$.extend([deep], target, object1, [objectN]) deep:如果设置为true为深拷贝,默认为false浅拷贝 target:要拷贝的目标对象 object1:第一个要被拷贝的对象
浅拷贝,是将被拷贝对象的引用地址,拷贝给目标对象,修改目标对象会影响被拷贝对象 深拷贝,参数前面加true,完全克隆对象,修改目标对象不会影响被拷贝对象
为了让jQuery与其他js库共存的方法
方法一: 不用$.('div')符号直接用,jQuery('div') 方法二: 自定义标识符 $.noConflict() eg: var zdy = $.noConflict() //便可以使用 zdy 来代替 $/jQuery
bootstrap是基于jQuery开发的 引入文件,复制代码,修修改改