两者的主要区别:
1、在build/webpackdevconfjs和build/webpackprodconfjs中配置即可。
2、在模块中使用的时候代码如下:plugins:[//这里是需要导入的插件列表,定意思jquery为全局参数newwebpackProvidePlugin({$:'jquery',jquery:'jquery','windowjQuery':'jquery',jQuery:'jquery'})]
可以使用import的这种写法:importjQueryfrom'jQuery'ready:function()
{varself=this;jQuery(window)resize(function(){self$refsthisherechartdrawChart();})}。
3、jquery 理解成js的封装,使js更加简洁,快捷。它把相同的 *** 作封装起来,使用的时候直接调用。
js是脚本语言 有自己的变量和方法,多用于表单验证和与用户的交互性以及动态效果 功能强大
但是有时候使用起来很麻烦,所以就出了 jquery框架,它是对js常用的方法进行封装处理 形成自己的一套结构,使用的时候 需要加载jquery库 使用更少的代码 能做更多的事。
通过xxxstyle的方式等同于元素上加style属性,即内联样式
通过xxxclassName、classList的方式是在元素上加class,优先级取决于css中的定义
方法/步骤分步阅读
1
/7
新建一个html文件,命名为testhtml,用来讲解如何在js中获取下拉列表选择的值。
2
/7
在testhtml页面,创建一个form表单,下面将通过form表单对象来取得selet下拉框的值。
3
/7
在form表单里面,创建一个select下拉框列表,其选项有三个,分别是选择一,选择二,选择三,三个选项分别有不同value值。
4
/7
在form表单的下面,创建一个button按钮,并给它绑定一个onclick点击事件,当按钮被点击时,执行getvalue()函数。
5
/7
在getvalue()函数内,通过document对象获得表单myForm下面的mySelect下拉列表对象,并通过其value属性取得选中选项的值。
6
/7
在getvalue()函数内,将获得的下拉列表选项的值,通过alert()方法以d窗的形式显示出来。
7
/7
在浏览器打开testhtml页面,选择下拉列表的值,点击按钮,获得选项的值。
1documentgetElementById("id名")
通过id属性的值查找,返回满足条件的第一个元素
2documentgetElementsByTagName("标签名")
通过标签名来获取页面中的元素。返回的是多个标签。
并不是真正的数组,但是我们可以想 *** 作数组一样 *** 作他(类数组)
3documentgetElementsByClassName("class名")
通过类名来获取页面中的元素。返回的也是多个标签
4documentgetElementsByName("表单元素name")
通过表单的name属性的值来获取元素
5documentquerySelector("div p a")
匹配指定 CSS 选择器的 第一个元素 。 如果没有找到,返回 null。
6documentquerySelectorAll("div")
获取所有满足条件的元素
7三个特殊节点
8childNodes 所有节点。包括各种节点
9fristChild 获取一个元素的第一个子节点
10lastChild 获取一个元素的最后一个子节点
11parentNode 获取一个元素的父节点
12previousSibling 获取一个元素的上一个兄弟节点
13nextSibling 获取一个元素的下一个节点
14children 只获取子元素
15firstElementChild 获取第一个元素子节点
16lastElementChild 获取最后一个元素子节点
17nextElementsibling 获取下一个元素兄弟节点
18previousElementsibling 获取上一个元素兄弟节点
19parentElement 获取父元素节点
20childElementCount 获取子元素的个数
1documentcreateElement(元素名) 创建一个元素节点
2documentcreateTextNode("这是新创建的一段文本") 创建一个文本节点
3appendChild() 添加元素到容器中
4insertBefore() 在一个节点前插入新节点
5removeChild() 删除子节点
6replaceChild() 替换子节点
7cloneNode() 克隆节点 传入true则复制所有节点
8setAttribute() 给元素设置属性
参数1:属性的名
参数2:属性的值
如果属性不存在,则添加;存在,则修改
9romveAttribute() 删除属性
参数:要删除的属性名
10getAttribute() 获取属性的值
参数:属性名
11访问 元素 id 名
boxid
12访问 元素 class 名
boxclassName
boxclassList 类数组
13获取标签名
boxtagName
boxnodeName
14innerHTML属性
innerHTML 属性设置或返回标签的开始和结束标签之间的 HTML。
值为为文本
15innerText属性
16outerHTML
跟innerHTML相比多包括了一个它自身
1访问行内(内联)样式表
2内部样式表和外部样式表的获取
getComputedStyle()
参数1:表示样式表所属的元素
参数2:如果获取的是伪元素的样式,传入伪元素,正常元素传入null 或不传
兼容性问题
3获取元素实际的宽高
offsetWidth 宽
offsetHeight 高
4获取元素参考父容器的left 和 top
offsetLeft 距离左部
offsetTop 距离上部
offsetParent 查找这个元素的参照父容器
那得看你的编程习惯是什么,首先这种样式动态添加肯定会有一个click动作去触发,比如习惯用$(className)click(function(){})的这种,确定了是哪块点击的,然后在编辑器里对这个页面相关的js全局查找那个$(className)click
外联js:
indexhtml中的代码
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="printjs"></script>
</head>
<body onload="print()">
</body>
</html>
printjs中的代码
function print() {alert("我是外联js");
}
代码结构
运行结果:
改为内联js
indexhtml中的代码:
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body onload="print()">
</body>
<script>
function print() {
alert("我是内联js");
}
</script>
</html>
运行结果:
1:获取你要 *** 作的标签对象
2:用你获取到的对象改变其标签的样式。代码为:objstylebackground = "red";
这段代码中obj是你获取到的标签的对象,background是要改的css样式
或者这样写:objstylecssText = "background:red;color:#444;font-size:16px";
3:以上的这种方式都是动态添加元素的内联样式。你也可以改元素的class选择器或者ID选择器。
4:还有一种方法就是需要你自己封装一个获取外联样式属性值的方法,这种方法需要处理兼容。
5:对于以上回答如有哪里不理解请指正,追问
6:望采纳
以上就是关于js与Jquery的区别是什么全部的内容,包括:js与Jquery的区别是什么、javascript设置的css优先级是什么是否相当于内联样式、js怎么获取浏览器下拉到底之后下拉的值等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)