原生JS、jQuery和Vue.js的区别
- jQuery只是对原生js的API选择器等等进行了封装,便于操作DOM,本质还是操作DOM实现逻辑,数据和界面还是连在一起的。
- vue.js:MVVM模型,将数据层和视图层完全分离开,不仅对API进行封装,还提供了一系列的解决方案。数据驱动,主要操作数据而不是DOM。
jQuery常用方法
jQuery入口函数
作用:等待文档中的标签加载完毕(不等待内容加载完毕),然后再执行入口函数中的代码
语法:
`$(document).ready(function(){});`完整写法
`$(function(){});`简写
DOM入口函数
作用:等待文档中的标签和内容加载完毕,然后再执行入口函数中的代码
语法:`window.onload=function(){}`
区别
1.jQuery入口函数早于DOM入口函数执行
2.一个HTML文档中,最多只有一个DOM入口函数(后加的覆盖前边的),可以有多个jQuery入口函数
jQuery对象和DOM对象的相互转化
jQuery对象转换为DOM对象:jQuery对象[下标];
DOM对象转换为jQuery对象:$(DOM对象);
选择器
$('css选择器').css('属性','属性值');
$('标签名 :eq(index)').css('属性','属性值');选择容器中下标为number的元素;
$('标签名 子代标签:odd|even').css('属性','属性值');选择容器中下标为奇数(偶数)的元素;
$('标签名 子代标签:gt(index)|lt(index)').css('属性','属性值');选择容器中下标大于(小于)index的元素;
//获取表单元素:
$(':input').css('background', 'red');
$(':text').css('background', 'red');
$(':password').css('background', 'red');
console.log($(':radio'));
console.log($(':checkbox'));
console.log($(':submit'));
console.log($(':reset'));
console.log($(':button'));
console.log($(':checked'))
console.log($(':selected').text())
text方法
作用:获取或者设置jQuery对象中的内容
格式:jQuery对象.text()或jQuery对象.text(内容);
html方法
作用:获取或者设置jQuery对象中的内容
格式:jQuery对象.html()或jQuery对象.html(内容);
区别
1.text返回jQuery对象下所有文本内容拼接的字符串
2.html返回jQuery对象下的文本内容和后代节点
3.设置时,text不解析标签,html解析标签
4.如果jQuery对象有多个元素构成,text在执行时会有隐式迭代,html支取jQuery对象中的第一个元素
val方法
作用:获取或者设置表单元素中的值
格式:表单元素.val()或表单元素.val(值);
attr方法和prop方法
作用:为jQuery对象添加或设置属性
格式:jQuery对象.attr('属性名','属性值')
jQuery对象.prop('属性名','属性值')
注意:只有属性名时表示获取当前属性,属性名和属性值同时存在表示设置当前属性,prop不支持私有属性的操作.
removeAtt方法和removeProp方法
作用:删除jQuery对象中的属性
格式:jQuery对象.removeAttr('属性名');
jQuery对象.removeProp('属性名');
区别:removeProp的删除是将指定属性的值设为undefined,不能操作自定义属性,并且一次只能删除一个,否则删除失败,removeAttr如果要删除多个属性,属性名之间用空格隔开.
css方法
作用:获取或设置当前jQuery对象的css样式
格式:jQuery对象.css('属性名','属性值');
注意:当需要同时设置多个属性时,把属性和属性值以键值对的形式存放在对象中.
格式:jQuery对象.css({属性:'属性值',属性:'属性值'...})
addClass,removeClass和toggleClass
addClass:添加类名
格式:jQuery对象.addClass('类名1 类名2...')
removeClass:删除类名
格式:jQuery对象.removeClass('类名1 类名2...')
toggleClass:删除或添加类名
格式:jQuery对象.toggleClass('类名1')
注:当该对象存在该类名时,操作内容为删除,否则为添加
获取尺寸
jQuery对象.width()
jQuery对象.height()
获取当前对象的宽高,不受其他因素影响
jQuery对象.innerwidth()
jQuery对象.innerheight()
获取当前对象的宽高,受内边距的影响
jQuery对象.outerwidth()
jQuery对象.outerheight()
获取当前对象的宽高,受内边距和边框的影响
scroll滚轮事件
$(window).scroll(function() {
console.log($(window).scrollTop());//jQuery中已经解决IE低版本的不兼容问题
});
创建jQuery对象
// 格式1:$('<开始标签名称>')
var $div = $('<div>');
console.log($div);
// 格式2:$('<开始标签>内容</结束标签>')
var $div = $('<div>hello</div>');
console.log($div);
// 格式3:$('<开始标签 属性名称="属性值" 属性名称="属性值"...>内容</结束标签>');
var $div = $('<div id="box" class="sty" title="ok">hello</div>');
console.log($div);
内部追加jQuery对象
append方法和appendTo方法
1.作用:将jQuery对象以尾部追加的方式添加到容器内部
2.格式:
1)容器.append(被添加的jQuery对象或标签形成的字符串);
2)被添加对象.appendTo(代表容器的jQuery对象或选择器);
prepend方法和prependTo方法
1.作用:将jQuery对象添加到容器的前端
2.格式:
1)容器.prepend(被添加的jQuery对象或标签形成的字符串);
2)被添加对象.prependTo(代表容器的jQuery对象或选择器);
外部追加
after方法、insertAfter方法
1.作用:在目标元素的后面插入新的jQuery对象
2.格式:
1)目标元素.after(要插入的新的jQuery对象)
2)要插入的新的jQuery.insertAfter(目标元素)
before方法、insertBefore方法
1.作用:在目标元素的前面插入新的jQuery对象
2.格式:
1)目标元素.before(要插入的新的jQuery对象)
2)要插入的新的jQuery.insertbefore(目标元素)
如果要操作的节点是页面中已有的,那么append、appendTo、prepend、prependTo、after、before、insertAfter、insertBefore方法具有移动节点的功能
删除元素
empty方法
1.作用:清空某个容器下面的所有的内容
2.格式:容器.empty();
remove方法
1.作用:删除页面中的某个jQuery对象
2.格式:要被删除的jQuery对象.remove('选择器');
3.注意:如果被删除的元素身上有事件,那么事件会被删除
// $('ul').empty();
$('#box').remove();// 表示删除id为box的li
$('li').remove('#box');//表示删除带有id=box的li
clone方法
1.作用:克隆页面中的元素
2.格式:要被克隆的元素.clone(true/false);false为默认值,表示不克隆元素的事件
3.返回值:被克隆出来的节点
$('div')
.click(function() {
console.log('helloworld');
})
.clone(true)
.appendTo('body')
.html('我是被克隆出来的div');
获取祖先元素
<body>
<div id