整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

web前端-轻量级框架应用（jQuery基础）

web前端-轻量级框架应用（jQuery基础）

query的安装和语法，jquery的多种选择器，dom操作和jquery事件。


jQuery框架，简介，优势，安装，语法，jQuery选择器，id选择器，类选择器，标记选择器，属性选择器，位置选择器，后代选择器，子代选择器，选择器对象，选择器对象遍历，页面初始化，jQuery的dom操作，查找，删除，创建，复制，插入，替换，jQuery事件，事件绑定，鼠标事件，键盘事件，表单事件，窗口事件，事件冒泡，事件解除。


jQuery是一个很好用的JavaScript函数库，写的少，做的多。


请问jQuery的好处在哪里？


它的好处在于它轻量级，什么是轻量级呢？就是说它非常请求，大小在30kb左右；具有强大的选择器和dom操作的封装，可靠的事件处理机制，有完善的ajax，jquery将所有的ajax操作封装到函数$.ajax()中；具有丰富的插件，完善的文档，开源的产品。


jquery安装，从jquery下载jquery库，二是从cdn中下载。


jquery官方网址http://jquery.com


首先进入download jquery下载页面，下载最新的jquery库文件，有两个版本：生产版，Production version，用于实际网站，Development version开发版，用于测试和开发。

<head>
 <meta charset="UTF-8">
 <title>jquery</title>
 <script type="text/JavaScript" src="./js/jquery-xx.js">
 </script>
</head>


<script type="text/JavaScript">
 $(document).ready(function(){
 // 等待dom元素加载完毕
 alert("成功引入");
 });
</script>

cdn中配置Jquery，如果不下载jquery的话，可以用cdn引用的。


jquery语法：

jquery
$(selector).action()
$(this).hide()
$("p").hide()
$("p.test").hide()
$("#test").hide()

// 入口
$(document).ready(function(){
 // 执行代码
});

$(function(){
 // 执行代码
});

JavaScript的入口函数
// 入口函数如下
window.onload=function(){
 // 执行代码
}

JavaScript的入口函数与jquery入口函数：


jquery的入口函数是在HTML所有标签都加载后执行；JavaScript的window.onload事件是等所有内容（包括图片文件等）加载完之后才执行。


jquery选择器

document.getElementById();
document.getElementsByClassName()
document.getElementsByTagName()

选择器$(" "),为一个函数，为工厂函数，$为函数名称。


id选择器

$("#id")

根据给定的id匹配一个元素


类选择器

$(".class")

根据给定的类匹配元素


标记选择器

$("element")

根据给定元素名匹配所有元素


属性选择器

$("element[attribute]")

匹配包含给定属性的元素

$("div[title=test]")


位置选择器

$(element:position)

匹配符合标签中相应位置的元素

$("div:first")

匹配所有div中第一个div元素


后代选择器

$("ancestor descendant")

匹配给定的祖先元素的所有后代元素

$("#ul li")匹配 id 为null的所有li元素


子代选择器

$("parent>child")

匹配所有指定"parent"元素中指定"child"的直接子元素

$("#标签id值")

// 原生
var div=document.getElementById('test');
div.style.border='3px solid blue';

// jquery
$("#test1").css("border", "3px solid red");

$(".class属性值")
$(".cls1").css(...);

$("标记名称");
// 找到所有P标签
$("p")

属性选择器
$("[属性名"])
匹配所有具有指定属性的元素

$("[属性名='值']")
匹配与值相等的元素

$("[属性名!='值']")
匹配与值不相等的元素

$("[属性名^='值']")
匹配以值开头的元素

$("[属性名$='值']")
匹配以值结尾的元素

$("[属性名*='值']")
匹配包含值的元素

位置选择器：


$("selector:first")

匹配第一个元素


$("selector:last")

匹配最后一个元素

$("selector:odd")

匹配索引值为奇数的元素，从0开始计数


$("selector:even")

匹配索引值为偶数的元素，从0开始计数

$("selector.eq(n)")

匹配集合中索引值为n的元素


$("selector.gt(n)")

匹配集合中索引值大于n的元素


$("selector:lt(n)")


$("选择器1 选择器2...")
$("#test li").css("border", "2px solid red");


$("选择器1>选择器2>...")

选择器对象：

$("选择器").each(function(index){this})

选择器对象的遍历

$("选择器").find()

找前面选择器匹配到的元素的子元素

$("选择器").not()

在前面选择器匹配到的元素中去除某个或者某几个

$("选择器").add()

在前面选择器中再追加节点

选择器对象遍历

<body>
 <ul id="test">
 <li>d</li>
 <li>a</li>
 </ul>
</body>

<script type="text/JavaScript">
 $("#test li").each(function(index){
 this.title="我是第"+(index+1)+"个";
 });
</script>

页面初始化

<script type="text/JavaScript">
 $(function(){
 //一定会在页面加载完成后运行
 })
</script>

将jquery函数代码放到这个函数就可以等到页面加载结束再运行。


Jquery中的dom操作。


dom是document object model的缩写。文档对象模型。dom是一种与浏览器，平台，语言无关的接口，jquery中的dom操作就是对HTML中的元素进行操作。

<script type="text/JavaScript">
 $(document).ready(function(){
 // 测试
 $("#btn1").click(function(){
 alert("文本内容："+$("#test0").text());
 });
 });
</script>

<p id="test0">da</p>
<button id="btn1">da</button>

attr()获取它的各种属性的值

$(document).ready(function(){
 $("button").click(function(){
 alert($("p").attr("title"));
 });
});

创建HTML元素：

$(document).ready(function(){
 var $li1=$("<li>d</li>");
 var $li2=$("<li>a</li>");
 $("button").click(function(){
 $("ul").append($li1);
 $("ul").append($li2);
 });
});

插入HTML元素


append()

向每个匹配的元素内部追加内容


appendTo()

将所有匹配的元素追加到另一个指定的元素集合中

注意：$(A).append(B)的操作，不是将B追加到A中，而是将A追加到B中


prepend()

向每个匹配的元素内部前置内容


prependTo()

将所有匹配的元素前置到另一个指定的元素集合中。

注意：$(A).prepend(B)的操作，不是将B前置到A中，而是将A前置到B中


after()

在每个匹配的元素之后插入内容


insertAfter()

将所有匹配的元素插入另一个指定的元素集合的后面

注意：$(A).after(B)的操作，不是将B插入到A后面，而是将A插入到B的后面


before()

在每个匹配的元素之前插入内容


insertBefore()

将所有匹配的元素插入另一个指定的元素集合的前面。

注意：$(A).before(B)的操作，不是将B插入A前面，而是将A插入B前面


删除HTML元素


删除HTML元素一般使用jquery中的remove()和empty()


remove()的作用就是从dom中删除被选元素以及子元素，就是如果某个元素被删除了，那么它的后代元素也都被删除。


empty()的作用并不是删除HTML元素，而是清空HTML元素，可以清空选中HTML元素中所有后代HTML元素。


复制HTML元素


clone()的作用是复制HTML元素。


$(document).ready(function() {
 $("button").click(function() {
 $("body").append($("p").clone());
 });
 });
});

替换HTML元素


有两种方法：replaceWith()和replaceAll()两个方法


repalceWith()

将所有匹配的元素替换成指定的HTML元素或dom元素


repalceAll(selector)

用匹配的元素替换所有selector匹配到的元素


replaceWith()和replaceAll()的作用是一样的，只是用法不同。


A元素替换B元素：


replaceWith()的写法

A.replaceWith("B")

B.replaceAll("A")


$(document).ready(function(){

 $("button").click(function(){
 $("ul li:eq(0)").replaceWith("<li>da</li>")
 });
 
});


事件


鼠标事件:

click，mouseover，hover


键盘事件：

keypress，keydown，keyup


表单事件：

submit，change，focus


窗口事件:

scroll，resize


事件绑定


事件绑定语法bind()方法：

bind(type,[data],fn)
click(),blur(),focus(),
mouseover(),mouseout(),
mousedown(),mouseup()
mouseenter(),mouseleave(),
resize(),scroll(),
keydown(),keyup(),keypress()

type参数是含有一个或多个事件类型的字符串，data参数是作为event.data属性值传递给事件对象的额外数据对象，fn参数为绑定到每个匹配元素事件上面的处理函数。

$(document).ready(function(){
 $("input").bind("focus",function(){
 $("span").show();
 });
});

简写绑定事件

$(document).ready(function(){
 $("input").focus(function(){
 $("span").show();
 });
});

鼠标事件click(),dblclick()双击在短时间内发生两次click就是依次双击事件。

mouseenter()当鼠标指针穿过元素时会发生mouseenter事件，mouseleave()当鼠标指针离开元素时会发生mouseleave事件。hover()用于模拟光标悬停事件。

$(document).ready(function(){
 $("#p1").hover{
 function(){
 $("#p1").css('background','green');
 },
 function(){
 $('#p1").css("background","pink");
 }
 }
});

keydown()键盘或按钮被按下时，发生keydown事件，keyup当键盘被松开时发生keyup事件。keypress()当键盘或按钮被按下时，发生keypress事件。


表单事件


当提交表单时，会发生submit事件。change()当元素的值发生改变时，会发生change事件，focus()当元素获得焦点时，触发focus事件。blur()当元素失去焦点时触发。


窗口事件：


scroll()当用户滚动指定的元素时，会触发scroll事件。scroll事件适用于所有可滚动的元素和window对象。resize()当调整浏览器窗口的大小时，会触发resize事件。

x=0;
$(document).ready(function(){

 $(window).resize(function(){
 $("span").text(x+=1);
 });
 
});

事件冒泡，事件会按照dom的层次结构像水泡一样不断向上直至顶端

停止冒泡和默认行为：

stopPrapagation()和preventDefault()

event.preventDefault();
// 阻止默认行为
event.stopPropagation();
// 停止事件冒泡

事件解除：


unbind(type, [data])

type为事件类型

data为将要解除的函数、




原文链接：https://mp.weixin.qq.com/s/GX7QiTZBLz7Kr64dtm8mbw
作者：达达前端小酒馆

录：

  1. 简介

  2. 添加JQuery库

  3. 语法

  4. 选择器

  5. 事件

简介

JQuery是一个JavaScript函数库，是目前最流行的 JS 框架。

JQuery官方的主旨是：write less, do more（以更少的代码，实现更多的功能）

添加JQuery库

  • 网络添加

  1. 百度静态公共库：http://cdn.code.baidu.com/

  2. 新浪静态公共库：http://lib.sinaapp.com/

  3. Bootstrap中文网开源项目免费CDN加速服务 http://www.bootcdn.cn/

  • 本地

本地添加 JQuery

语法

基础语法： $(selector).action()

  • 美元符号定义 jQuery

  • 选择符（selector）"查询"和"查找" HTML 元素

  • jQuery 的 action() 执行对元素的操作

选择器

（一）基本

  • #id：根据给定的ID匹配一个元素

  • element：根据给定的元素名匹配所有元素

  • .class：根据给定的类匹配元素

  • * ：匹配所有元素

注意：要引用JQuery-1.12.4.js文件才有效果

1

2

3

（二）层级

  • selector1,selector2,...,selectorN ：将每一个选择器匹配到的元素合并后一起返回

  • ancestor descendant：在给定的元素下匹配所有的后代元素

  • parent >child：在给定的元素下匹配所有的子元素

  • prev + next：匹配所有紧接在 prev 元素后的 next 元素

  • prev ~ siblings ：匹配 prev元素之后的所有 siblings 元素

事件

（一），单击事件

click() 方法是当按钮点击事件被触发时会调用一个函数。

代码

单击按钮效果图

（二），双击事件

当双击鼠标右键时，会发生 dblclick() 事件。

以下事件方法参考“双击事件”，代码格式可能一样的。

下面与事件有关的方法

  1. mouseenter()当鼠标指针穿过元素时，会发生 mouseenter() 事件。

  2. mouseleave()当鼠标指针离开元素时，会发生 mouseleave() 事件

  3. mousedown()当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown() 事件

  4. mouseup()当在元素上松开鼠标按钮时，会发生 mouseup 事件。

  5. hover()方法用于模拟光标悬停事件。

  6. focus()当元素获得焦点时，发生 focus 事件。

  7. blur()当元素失去焦点时，发生 blur 事件。

QueryEasyUI中的拖拽事件通过给它设置代理元素使其拖拽、可设置拖动元素相对于x.y轴拖动，可设置拖拽何时停止等效果

jQuery中的easyui是一个非常好用的插件，它虽然使用简单方便，但是它的功能确十分强大，今天将向大家介绍如何使用easyui插件实现基本的拖动和放置，有一定的参考价值，希望对大家有所帮助。

【推荐课程：jQueryEasyUI教程】

Draggable(拖拽)

Draggable是easyui中用于实现拖拽功能的一个插件，通过它我们可以实现对控件的拖拽效果。

它具有以下属性值：

属性名含义proxy

指拖动时要使用的代理元素，设置为clone时，克隆元素将被用作代理；如果指定一个函数，它必须返回一个 jQuery 对象。revert是一个boolean值，设置为 true时表示拖动结束后元素将返回它的开始位置。 （默认值为false）cursor 拖动时的 css 光标，默认值为move deltaX 指的是拖动的元素相对于当前光标的 X 轴的位置，默认值为null deltaY 指的是拖动的元素相对于当前光标的 Y 轴位置，默认值为null handle 指启动可拖动元素的处理，默认值为null disabled是一个boolean值，如果设置为 true，则停止可拖动，默认值为false edge 指能够在其中开始可拖动的拖动宽度，默认值为0 axis 指定义拖动元素可在其上移动的轴，可用的值是 'v' 或 'h'，当设为 null，将会沿着 'v' 和 'h' 的方向移动

案例分析：

通过三个div元素来启用它们的拖动和放置

外部引用必须有的插件

<link rel="stylesheet" type="text/css" href="D:\jquery-easyui-1.6.10\themes\default\easyui.css">

<link rel="stylesheet" type="text/css" href="D:\jquery-easyui-1.6.10\themes\icon.css">

<script src="D:\jquery-easyui-1.6.10\jquery.min.js"></script>

<script src="D:\jquery-easyui-1.6.10\jquery.easyui.min.js"></script>

HTML与CSS代码

<style>

div{

width:100px;

height: 100px;

margin-bottom:5px;

text-align: center;

line-height: 100px;

}

#box1{background: pink;}

#box2{background: skyblue;}

#box3{background: yellow;}

</style>

</head>

<body>

<div id="box1">box1</div>

<div id="box2">box2</div>

<div id="box3">box3</div>

效果图：

设置box1元素为可拖动的

$('#box1').draggable();

效果图：

对于box2通过给原来的元素的代理（proxy）创建一个clone值，让其可以拖动

$('#box2').draggable({

proxy:'clone'

});

效果图：

第三个box我们设置元素只能在v轴上拖动：

$("#box3").draggable({

axis: 'v'

})

效果图：

总结：以上就是本篇文章的全部内容了，希望对大家学习有所帮助。

以上就是jQueryEasyUI中的拖拽事件如何使用的详细内容，更多请关注其它相关文章！

更多技巧请《转发 + 关注》哦！


在线咨询
上一篇：干货！这几个素材网站-视频制作者爱疯了！
下一篇：electron 和 tauri 都不想用，那就自己

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 杏花岭区 黄岩区 日照 行唐县 榆社县 汨罗市 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服