1导入JQuery插件（jar包）
首先到家可以自行前往官网下载JQueryjar包，博主下载的是331版本的，读者可自行选择版本
jar包导入很简单，首先我们传建一个项目，在项目中创建一个名为js的文件夹，把下载好的jar包粘贴到js文件夹即可，如：
2JQuery的基本使用方法
1连接
在编写项目中我们一般使用外联法，即新建一个后缀名为js的文件，用以下方法在HTML文件的<head>标签中添加下面两行代码，第一行为下载的JQueryjar包的文件地址，第二个则是我们新建的js文件（注意：新建js文件一定要写在JQueryjar包后，因为执行顺序是从上往下，先解析jar包在解析我们自己新建的js文件）
<script src="/js/jquery-331minjs"></script>
<script src="/js/loginjs"></script>
2编写
在js文件中我们第一件事就是要编写这样一个语句
$(function(){
JQuery语句体；
})
其作用为：$(function(){})是$(document)ready(function(){})的简写，或者$()ready(function(){})，会在DOM加载完成之后执行。也就是会在项目最后执行，就不会产生在THML语句前执行而出现的一系列问题；
3DOM对象与JQuery对象之间的转换
1获取DOM对象
var 对象名 = document(id获取，class获取，标签名获取)（“id名，class名，标签名”）；//创建DOM对象
documentgetElementsById("Obj")
documentgetElementsByClassName("Obj")
documentgetElementsByName("div");
var Domobj = documentgetElementById("Obj");//获取id为Obj的对象
alert(DomobjinnerHTML);//输出Domobj对象的HTNL内容在d窗上
2获取JQuery对象
var $对象名 = $("#id名 或者 class名 或者 标签名")
//获取Jquery对象
var $JQobj = $("#Obj");$("#xx")获取id名 $("xx")获取class名 $("div")获取标签名
alert($JQobjhtml());
3DOM对象---->JQuery对象
var $对象名 = $(DOM对象)；
// Dom对象--->Jquery对象
var $D_JQ = $(Domobj);
alert($D_JQhtml()) ;//获取标签体
$D_JQhtml("对呀，你真可爱");
4JQuery对象---->DOM对象
var Dom对象名 = $JQuery对象名[0];
var Dom对象名 = $JQuery对象get(0);
// Jquery对象--->Dom对象
var JQ_D = $JQobj[0];
alert(JQ_DinnerHTML);
JQ_DinnerHTML = "天呐，你也太可爱了吧";
var JQ_D = $JQobjget(0);
JQ_DinnerHTML = "天呐，你也太可爱了吧";
其实JQuery对象实际上就是DOM对象的的一个数组，[0],get(0)即为获取DOM对象数组中的第一个元素
先给你看下面两段代码：
<div id="div1">test!</div><script>
consolelog(documentgetElementById("div1")); //这个能够获得值
</script><script>
consolelog(documentgetElementById("div1")); //这个不能获得值！
</script>
<div id="div1">test!</div>
看出原因没有？当js代码是先于html运行时，是获取不到DOM元素的！因为这时候该DOM元素尚未加载到内存，相当于不存在！
要想实现js代码放到任何位置都能获得DOM元素，就要保证代码在页面完全加载完毕后才开始运行，比如：
<script>windowonload=function(){ //网页完全加载完毕才会触发这个事件
consolelog(documentgetElementById("div1")); //这时候就能获得了
}
</script>
<div id="div1">test!</div>
在移动端，用户每时每刻都在触发移动事件，比如触摸的事件，点击，长按，左右滑动的事件，手指缩放，等等。都是移动事件的对象。在pc端，我们的事件对象是和鼠标和键盘的事件处理监听等等。我们首先是要通过DOM0级和DOM二级来进行绑定事件处理对象。在绑定事件的时候，我们可以在事件的回调函数来进行传参进行事件对象的调用。也可以通过Window对象来调用。这样，可以在pc端兼容问题。var e = ev || event 在移动端，我们的移动事件对象，是通过在事件的回调函数中传参就可以了。这个是标准做法。我们通过事件对象，可以找到，我们需要的事件对象的坐标点。和具体的坐标。还有触发事件的对象，特别是在移动端的事件中，我们更需要事件对象的各种属性 ，来进行相关 *** 作。这个是与pc端不一样的地方。
移动端的事件的绑定方法是通过DOM二级来进行。DOM二级来绑定事件，有很多优势。可以绑定多个同样的事件。不会发生覆盖。其二是，在事件名可以绑定多个不一样的事件。这样，我们的移动端就采用了DOM二级来进行绑定事件。
emlentaddEventListen（"事件名",function（ev）{
// 具体要 *** 作的内容。
}）;
移动端的事件常见的是：touchstart touchmove touchend tap hold drag -----
都是通过DOM二级来进行绑定，这些事件。
我们来看看移动端的事件对象。我们可以通过事件对象下的targettouches 来找到我们需要的事件的相关方法和属性。而事件对象的targettouches是个类数组的结构，所以，我们如果是一个手指的触发的事件，我们需要通过数组的形式来进行访问具体的事件属性。写法如下：var touch = etargetTouches[0]; 这样，就可以通过这样的形式来进行拿到具体的属性和我们事件触发的具体的坐标值。
在touch下，有我们的需要的关键属性：
clientX:41343798828125 // 这是我们需要用到的,事件触发的元素的到视口的水平方向的距离。
clientY:28481298828125 //这是事件触发元素到视口的垂直方向的距离。
force:1
identifier:0
pageX:41343798828125
pageY:28481298828125
radiusX:3521875
radiusY:3521875
rotationAngle:0
screenX:424
screenY:237
target:保存的是触发事件元素。事件代理的通过来通过该属性获取的是触发事件对象。
$event：当前触发的是什么事件
$eventtarget:触发事件的元素对象（不一定是绑定事件的对象，会因为事件冒泡变化）
$eventcurrentTarget:绑定事件的元素对象
参考：
vue中关于$event的通俗理解
Vue 点击获得父元素，子元素，兄弟元素（DOM *** 作）
1 浏览器的每个坐标点对应一个或者多个DOM对象比如hover事件,鼠标每次移动一个像素,硬件驱动程序就向 *** 作系统报告一次,这里可以假装是浏览器,浏览器根据这个鼠标的位置,找到对应的DOM对象,并运行这个对象里面hover属性绑定的函数,这是最简单的模型
2 但是一个像素点会被不同的DOM包含,而这些dom往往还是父子嵌套关系那么点击这个点,我们想要的是要运行子组件的事件函数还是父组件的函数还是父子都运行不同的额解决方式,就形成了由内而外的捕获模式和由内而外的冒泡模式
3 在冒泡模式下,想要精细化的约束某个事件执行,就要阻止函数冒泡,这样父就感受到不到此事件了
4 还有另一种解释
5 事件冒泡最后会到window上面就算是有iframe的话,也是不影响的就算把这个页面嵌入到另一个页面,也会冒到这个页面的window,这个iframe加一个事件,也不会冒泡到这个iframe,事件冒泡是相互独立的
1 好处是可以实现事件委托,但是有时又会出问题
1 eventstopImmediatePropagation();
2 stopImmediatePropagation() 和 stopPropagation()的区别在哪儿呢？后者只会阻止冒泡或者是捕获。 但是前者除此之外还会阻止该元素的其他事件发生，但是后者就不会阻止其他事件的发生
3 如果多个事件监听器被附加到相同元素的相同事件类型上，当此事件触发时，它们会按其被添加的顺序被调用。如果在其中一个事件监听器中执行 stopImmediatePropagation() ，那么剩下的事件监听器都不会被调用。
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 查找这个元素的参照父容器
以上就是关于jquery怎么导入jar包全部的内容，包括:jquery怎么导入jar包、javascript 如何获得html DOM节点的属性值、移动端------移动事件对象等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）