jquery如何调用dll jquery怎么调用函数

转载

mob64ca14173efa 2024-03-11 15:42:27

文章标签 jquery如何调用dll jquery html5 javascript jQuery 文章分类 jQuery 前端开发

详细jQuery使用介绍（包含案例），请关注后，可以在本博客的jQuery和Ajax相关专栏进行详细阅读！！！

1、jQuery介绍

理解：jQuery就是一个js文件，里面封装了原生的js代码，使用jQuery可以加快开发效率。

2、jQuery基本使用

(1)jQuery的入口函数

jQuery有两种常见的入口函数：

第一种：简单

$(function (){代码体})//相当于DOM页面加载完成后，在执行代码体

第二种：繁琐

$(document).ready(function(){代码体})

(2)jQuery对象和DOM对象转换***

理解：因为原生js比jQuery更大，原生的一些属性和方法jQuery是没有封装的，如果想要在jQuery使用原生的一些属性，就需要把jQuery对象转换为DOM对象才可以使用
方法：

DOM对象转换为jQuery对象只有一种方法

var box = document.getElementById('box');  // 获取DOM对象
var jQueryObject =$(box);//把DOM对象转换为jQuery对象

jQuery对象转换为DOM对象共两种方法

第一种

//   2.1 jQuery对象[索引值]
var domObject1 = $('div')[0]

第二种

//   2.2 jQuery对象.get(索引值)
var domObject2 = $('div').get(0)

注意：jQuery对象是包含了DOM对象的一个伪数组

3、jQuery选择器

（1）基础选择器***

语法：

$("选择器");//  里面选择器直接写 CSS 选择器即可，但是要加引号

常用的基础选择器方法

ID选择器 $("#id") 获取指定ID的元素
全选选择器 $("*") 匹配所有元素
类选择器 $(".class") 获取同一类class的元素
标签选择器 $(“div”) 获取同一类标签的所有元素
并集选择器 $(“div,p,li”) 选取多个元素
交集选择器 $(“li.current”) 交集元素

（2）层级选择器***

理解：层级选择器是经常使用的共有两种：

第一种后代选择器：$(“ul li”) 使用空格代表后代选择器包括ul下的所有li元素，包括孙子等
第二种子代选择器：$(“ul>li”);使用>号获取亲儿子层级的元素，**注意：**并不会获取孙子层级的元素

（3）筛选选择器

理解：就是在所有的选项中选择满足条件的进行筛选选择，
语法：基础选择器/层级选择器：关键字（:冒号前可以是标签选择器，类选择器，层级选择器）
常见如下：

：first $(“li:first”) 获取第一个li元素
:last $(“li:last”) 获取最后一个li元素
:eq(index) $(“li:eq(2)”) 获取到的li元素中，选择索引号为2的元素，索引号index从0开始
:odd $(“li:odd”) 获取到的li元素中，选择索引号为奇数的元素
:even $(:li:even) 获取到li元素中，选择索引号为偶数的元素

（4）筛选方法***

常用语法：

parent() $(“li”).parent(); 查找父级
children(selector) $jquery如何调用dll jquery怎么调用函数_jQuery$ (“ul>li”),最近一级(亲儿子)
find(selector) $jquery如何调用dll jquery怎么调用函数_html5_02$ (“ul li”),后代选择器
siblings(selector) $(".first").siblings(“li”); 查找兄弟节点，不包括自身
nextAll([expr]) $(".first").nextAll(); 查找当前元素之后所有的同辈元素
prevtAll([evpr]) $(".last").prevAll(); 查找当前元素之前所有的同辈元素
hasClass(class) $(“div”).hasClass(“protected”); 查找当前的元素是否含有某个特定的类，如果有，则返回true
eq(index) $jquery如何调用dll jquery怎么调用函数_javascript_03$ (“li:eq(2)”),index从0开始

重点记住：parent() children() find() siblings() eq()
**注意：**上述方法中，children，find，sliblings这三种方法的参数为字符串，代表选择器

（5）知识铺垫

1、jQuery设置样式

$('div').css('属性', '值')

2、jQuery 里面的排他思想

// 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。
$(this).css(“color”,”red”);
$(this).siblings().css(“color”,””);

3、隐式迭代（悄悄的遍历，jquery内部自动遍历）

// 遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。
// 简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。
$('div').hide();  // 页面中所有的div全部隐藏，不用循环操作


// 以前的js是不允许对于一组对象直接操作的，只能对一个元素对象进行操作
var divs = document.getElementsByTagName('div');
divs.style.backgroundColor = 'red'; // 错误，style是dom对象的属性，不能通过伪数组调用
divs[0].style.backgroundColor = 'red'; // 正确

注意：为啥jquery对象是一个伪数组，因为要做隐式迭代

4、链式编程（此知识点不要求必须掌握，能够看懂即可）

// 链式编程是为了节省代码量，看起来更优雅。
$(this).css('color', 'red').siblings().css('color', ''); 
$(this).css();// 返回的是调用者
$(this).siblings();// 返回我的兄弟姐们
//jq的操作方法： css(),hide(),show()，事件等等，会将调用者返回  (操作方法，会隐式迭代)
//jq的筛选方法，会将筛选完的对象返回。 非筛选方法（操作方法），会将调用者（jq对象）返回

4、jQuery样式操作

理解：jQuery中常用的样式操作有两种：css()和设置类样式方法

1.4.1. 方法1: 操作 css 方法

jQuery 可以使用 css 方法来修改简单元素样式；也可以操作类，修改多个样式。

常用以下三种形式 :

// 1.参数只写属性名，则是返回属性值var strColor = $(this).css('color');
// 2.  参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号$(this).css('color', 'red');
// 3.  参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号
$(this).css({ "color":"white","font-size":"20px"});
function css(){    
	var length  = paramters.length    
	if(length==1){
	// 一个获取参数的属性名参数，设置多组属性的对象
	  if (typeof(paramters[0]) == 'string' ){
	   // 获取操作        
	   }else{            
	  // 设置操作（对象形式）        
	  } 
	 }else{        
	  //设置一组属性    
	  }}

注意：css() 多用于样式少时操作，多了则不太方便。

css()操作的是行内样式（style属性）

1.4.2. 方法2: 设置类样式方法

作用等同于以前的 classList，可以操作类样式，注意操作类里面的参数不要加点。

常用的三种设置类样式方法：

// 1.添加类
$("div").addClass("current");  
// className，classList
// 2.删除类
$("div").removeClass("current");
// 3.切换类
$("div").toggleClass("current");
// 通过addClass，removeClass与hasClass实现toggleClass的效果
// 如果这个元素有current，应该移除
if($('#div01').hasClass('current')){    		
	$('#div01').removeClass('current');
}else{    
// 如果这个元素没有current，应该添加
    $('#div01').addClass("current")
}

注意：

设置类样式方法比较适合样式多时操作，可以弥补css()的不足。
原生 JS 中 className 会覆盖元素原先里面的类名，jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。

5、jquery效果

jQuery 给我们封装了很多动画效果，最为常见的如下：

显示隐藏：show() / hide() / toggle() ;
划入划出：slideDown() / slideUp() / slideToggle() ;
淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
自定义动画：animate() ;

注意：

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
jQuery为我们提供另一个方法，可以停止动画排队：stop() ;

（1）显示隐藏（对角线动画）

常用动画有三种：show()/hide()/toggle();

显示语法规范：show(speed,[easing],[fn]);
（1）显示参数：

参数都可以省略，吴东华直接显示。
speed:三种预定速度之一的字符串(“slow”,“normal”,or,“fast”)或表示动画市场的毫秒数值（如：1000）。
easing:(Optional)用来指定切换效果，默认是“swing”，可用参数“linear：”。
fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

隐藏语法规范：hide(speed,[easing],[fn])
(2)隐藏参数

和显示参数一致

切换语法规范：toggle([speed,[easing],[fn]
(3)切换参数

和显示参数一致

建议：平时一般不带参数，直接显示隐藏即可。

（2）滑入滑出（卷拉门，高度动画）

滑入滑出动画，常见有三个方法：slideDown() / slideUp() / slideToggle() ;

1、下滑效果语法规范：slideDown([speed,[easing],[fn]])
下滑效果参数：

和显示参数一致，对照

2、上滑效果语法规范：slideUp([speed,[easing],[fn]])
上滑效果参数：和显示参数一致，对照
3、滑动切换效果语法规范：slideToggle([speed,[easing],[fn]])
滑动切换效果参数：参考显示参数

（3）淡入淡出(透明度动画)

淡入淡出动画，常见有四个方法：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;

1、淡入效果语法规范：fadeIn([speed,[easing],[fn]])

淡入效果参数：参数参考上面

2、淡出效果语法规范：fadeOut([speed,[easing],[fn]])

淡出效果参数：参数参考上面

3、淡入淡出切换效果语法规范：fadeToggle([speed,[easing],[fn]])

淡入淡出切换效果：参数参考上面

4、渐进方式调整到指定的不透明度：fadeTo([[speed],opacity,[easing],[fn]])

效果参数

opacity透明度必须写，取值0~1之间
**speed:**三种预定速度之一的字符串(“show”,"normal"or,“fast”)或表示动画时长的毫秒数值（如：1000）。必须写
easing:(Optional)用来指定切换效果，默认是“swing”，可用参数“linear：”。
fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

（4）自定义动画***

自定义动画非常强大，通过参数的传递可以模拟以上所有动画，方法为：animate() ;

语法：animate(params,[speed],[easing],[fn])

参数

**params:想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是符合属性则需要采取驼峰命名法borderLeft。**其余参数都可以省略
剩下三个参数参照上面的参数

（5）停止动画排队***

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。

停止动画排队的方法为：stop() ;

stop() 方法用于停止动画或效果。
stop() 写到动画或者效果的前面，相当于停止结束上一次的动画。

总结: 每次使用动画之前，先调用 stop() ,在调用动画。

（6）事件切换

jQuery中为我们添加了一个新事件 hover() ; 功能类似 css 中的伪类 :hover 。介绍如下

语法

hover([over,]out)     // 其中over和out为两个函数

over:鼠标移到元素上要触发的函数（相当于mouseenter）
out:鼠标移出元素要触发的函数（相当于mouseleave）
如果只写一个函数，则鼠标经过和离开都会触发它

=day2= （详细介绍和案例实现点击查看.）

1、jQuery属性操作

jQuery 常用属性操作有三种：prop() / attr() / data() ;

（1）元素固有属性值prop()***

理解：固有属性就是元素本省自带的属性，比如href等
获取属性语法：

prop(“属性”)

设置属性语法：

prop(“属性”,“属性值”)

注意：prop() 除了普通属性操作，更适合操作表单属性：disabled / checked / selected 等。

prop：property属性的意思。

（2）元素自定义属性值attr()***

理解：用户自己给元素添加的属性，称之为自定义属性。如给div添加index=“1”
获取属性语法：

attr(“属性”) //类似原生 getAttrbute()

设置属性语法

attr(“属性”,“属性值”)//类似原生setAttribute()

注意：attr() 除了操作自定义属性，还可以操作固有属性。（该方法也可以获取 H5 自定义属性）

attr：attribute属性的意思

操作固有属性的区别：

prop()函数的结果:       
	1.如果写有相应的属性，返回指定属性值。      
	2.如果没有写相应的属性，返回值是空字符串。
attr()函数的结果:     
	 1.如果写有相应的属性，返回指定属性值。      
	 2.如果没有写相应的属性，返回值是undefined。
 对于HTML元素的固有属性，在处理时，使用prop方法。
 对于HTML元素我们自己自定义的属性，在处理时，使用attr方法。具有 true 和 false 两个属性值的属性，如 
 	checked, selected 或者 disabled 使用prop()	
 	prop返回的是boolean类型的true或false	
 	attr返回的是字符串：checked、selected、disabled

（3）数据缓存data()

理解：data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。
附加数据语法：

data(“name”,“value”)//向被选元素附加数据

获取数据语法

date(“name”)//向被选元素获取数据

注意：同时，还可以读取 HTML5 自定义属性 data-index ，得到的是数字型。

data()添加的name是数据，而不是属性，所以F12查看界面元素的时候是看不到name的。它存储在内存中

2、jQuery文本属性值***

jQuery的文本属性值常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性。

（1）jQuery内容文本值

常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性，主要针对元素的内容还有表单的值操作。

普通元素内容html() （相当于原生innerHTML)

html() //获取元素的内容
html(“内容”)//设置元素的内容

普通元素文本内容text() （相当于原生innerText）

text()//获取元素的文本的内容
text(“文本内容”)//设置元素的文本内容

表单的值val() (相当于原生value)

val()//获取表单的值
val(“内容”)//设置表单的值

注意：html() 可识别标签，text() 不识别标签。

parents()

用处：固定两位小数处理：
注意： parents(‘xx’)理解为获取长辈中的某一个/某几个
toFixed()：fix有修复的意思，这里就是将数字修复一下让他保留几位小数修改数量，计算小计

3、jQuery元素操作

jQuery 元素操作主要讲的是用jQuery方法，操作标签的遍历、创建、添加、删除等操作。

（1）遍历元素***

理解：jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用到遍历。
语法1：$(“div”).each(function(index,domEle){ 执行语法；})

each()方法遍历匹配的每个元素，主要用DOM处理，each每一个里面的回调函数有2个参数：index是每个元素的索引号，domEle是每个DOM元素对象，不是jQuery对象
所以想要使用jQuery方法，需要给这个DOM元素转换为jQuery对象$(domEle)

注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。

因为jquery对象是伪数组，里边存储的就是一个一个DOM对象，所以遍历出来的自然是DOM对象啦。

语法2：$.each(object,function(index,element){执行代码；})

$.each()方法可用于遍历任何对象，主要用于数据处理，比如数组，对象
里面的函数有2个参数：index是每个元素的索引号，element遍历内容

注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。

$点each()方法，$是一个对象，所以可以调用方法。

总结：

如果遍历jquery对象，使用$(‘div’).each( function(){} )

如果遍历普通对象，使用$.each(obj,function(){})

（2）创建、添加、删除***

创建：$("<li></li>");

动态创建了一个

内部添加：

element.append(“内容”)

把内容放入匹配元素内部最后面，类似原生appendChild

element.prepend(“内容”)

把内容放入匹配元素内部最前面

外部添加：

element.after(“内容”)//把内容放入目标元素后面
element.before(“内容”)//把内容放入目标元素前面

注意：

内部添加元素，生成之后，他们是父子关系
外部添加元素，生成之后，他们是兄弟关系

删除元素：

element.remove()//删除匹配的元素本身
element.empty();//删除匹配元素集合中所有的子节点
element.html("");//清空匹配的元素内容

注意：

remove删除元素本身
empt()和html("")作用等价，都可以删除元素里面的内容，只不过html还可以设置内容

以上只是元素的创建、添加、删除方法的常用方法，其他方法请参详API。

4、jQuery尺寸、位置操作

jQuery 尺寸操作包括元素宽高的获取和设置，且不一样的API对应不一样的盒子模型。

（1） jQuery 尺寸操作 ***

语法：

width()/height() 取得匹配元素宽度和高度值只算width和height
innerWidth()/innerHieght() 取得匹配元素宽度和高度值包含padding
outerWidth()/outerHeight() 取得匹配元素宽度和高度值包含padding、border
outerWidth(true)/outerHeight(true) 取得匹配元素宽度和高度值包含padding、border、margin

注意：

以上参数为空，则是获取相应值，返回的是数字型
如果参数为数字，则是修改相应值
参数可以不必写单位

（2） jQuery 位置操作***

jQuery的位置操作主要有三个： offset()、position()、scrollTop()/scrollLeft() ,

offset()设置或获取元素偏移

offset()方法设置或返回被选元素相对于文档的偏移量坐标，跟父级没有关系
该方法有2个属性left、top。offset().top 用于获取距离文档顶部的距离 offset().left 用于获取距离文档左侧的距离。
可以设置元素的偏移：offset({top:10,left:30});

position()获取元素偏移

position()方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准
该方法有2个属性left，top。position().top用于获取距离定位父级顶部的距离，position.left用于获取距离定位父级左侧的距离
该方法只能获取。

注意: 这个方法的特点与offsetLeft和offsetTop一致
scrollTop()/scrollLeft()设置或获取元素被卷曲的头部和左侧

scrollTop()方法设置或返回被选元素被卷去的头部
不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部

=day3=（详细介绍及案例实现）

1、jQuery事件注册

优点: 操作简单，且不用担心事件覆盖等问题。
缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。
语法：

element.事件(function(){})
$(“div”).click(function(){事件处理程序})
其它事件和原生基本一致，如：mouseover、mouseout、blur、focus、change、keydown、keyup、resize、soroll等

2、jQuery事件处理

因为普通注册事件方法的不足，所以jQuery提供多个处理方法

on():用于事件绑定，目前最好用的时间绑定方法
off():事件解绑
trigger()/triggerHandler():事件触发

（1）事件处理on()绑定事件***

jQuery提供很多新的事件绑定方法bind()\live()\delegate()\on()等，其中on()最好用

语法：

on()方法1：可以绑定多个事件，多个处理事件处理程序。

$("div").on({    
	mouseover:function(){},    
	click:function(){}
});
//如果事件处理程序相同
$("div").on("mouseover mouseout",function(){
    $(this).toggleClass("current");
 })

on()方法2：可以事件委派操作，事件委派定义是，把原来加给子元素身上的时间绑定到父元素身上，就是把时间委派给父元素。

$("ul").on("click","li",function(){
   alert(1111);
});

on()方法3：动态创建的元素，click()没有办法绑定事件，on()可以给动态生成的元素绑定事件。

$("div").on("click","p",function(){
	alert(999);
})
$("div").append($("<p>我是动态创建的p</p>"));

注意：on通过事件委托绑定事件，可以对未来元素生效

（2）事件处理off()解绑事件

理解：当某个事件上面的逻辑，在特定需求下不需要的时候，可以把该事件上的逻辑移除，这个过程我们称为事件解绑jQuery 为我们提供了多种事件解绑方法：die() / undelegate() / off() 等，甚至还有只触发一次的事件绑定方法 one()
语法：off()方法可以移除通过on()方法添加的事件处理程序

$("p").off() //解绑p元素所有事件处理程序
$("p").off("click")//解绑p元素上面的点击事件
$("ul").off("click","li")//解绑事件委托
//如果有的事件只想要触发一次，可以使用one()来绑定事件

（3）事件处理trigger()自动触发事件***

理解：有些时候需要某些事件可以自动触发，比如轮播图
语法：

第一种：trigger()

element.click()//第一种简写方式
element.trigger("type")//第二种自动触发模式

第二种:triggerHandler()

element.triggerHandler(type)//第三种自动触发

注意：triggerHandler模式不会触发元素的默认行为，这是和前面两种的区别

3、jQuery事件对象

jQuery 对DOM中的事件对象 event 进行了封装，兼容性更好，获取更方便，使用变化不大。事件被触发，就会有事件对象的产生。

语法：element.on(events,[selector],function(event){})

阻止默认行为：event.preventDefault()或者return false
阻止冒泡：event.stopPropagation()

4、jQuery拷贝对象

理解：jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API，方便易用
语法：$.extend([deep],target,objectl,[objectN])

deep:如果设为true为深拷贝，默认为false浅拷贝
target：要拷贝的目标对象
object1:待拷贝到第一个对象的对象
objectN：待拷贝到第N个对象的对象
浅拷贝目标对象引用的被拷贝的对象地址。修改目标对象会影响被拷贝对象
深拷贝，前面加true，完全克隆，修改目标队形不会影响被拷贝对象

5、jQuery多库共存(不太重要，暂不说)

6、toDoList

补充：

//  json  : 是一种有着特殊格式的字符串，格式与对象或者数组是非常类似的，只不过属性名是带双引号的。
 //  json  ： 用于对象和数组的序列化。（序列化：格式转换）  用于对象和数组与字符串进行相互转换。
 //  1.  JSON.stringify(对象)   stringify：字符串化 ， 将对象字符串化
 //  2.  JSON.parse(字符串)     parse：解析 ， 将字符串解析为对象

//  json: 为啥使用json。  

// 在数据保存，数据传输过程中，不允许操作对象，只允许操作字符串。  需要将对象转换为字符串。
// 在程序计算，运算过程中，操作字符串比较麻烦，会将字符串转换为对象。

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：python 部署django python 部署项目数据库密码

下一篇：Android studio Giraffe 链接数据库 android studio连接云数据库

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯