整合营销服务商

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

免费咨询热线：

day56：jQuery

生JS事件绑定例题

1、开关灯示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{
            height: 400px;
            width: 400px;
            border-radius: 50%;
        }
        .bg_green{background-color: green}
        .bg_red{background-color: red}
    </style>
</head>
<body>
    <div id="d1" class="c1 bg_red bg_green"></div>
    <button id="d2">变色</button>
<script>
    let btnEle = document.getElementById('d2')
    let divEle = document.getElementById('d1')
    btnEle.onclick = function () {          //点击时调用事件句柄
        divEle.classList.toggle('bg_red')   //有则删除，无则添加
    }
</script>
</body>
</html>

2、input框获取焦点示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" value="hello world" id="d1">

<script>
    let iEle=document.getElementById('d1')  // 点击了后执行的操作（获取焦点）
    iEle.onfocus = function (){
        iEle.value =''  // 重新赋值为空
    }
    iEle.onblur = function (){  // 鼠标点击了其他地方执行的操作（移除焦点）
        iEle.value ='goodbye'
    }
</script>
</body>
</html>

3、input框实时刷新时间实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="d1" style="display: block;height: 50px;width:200px">
<button id="d2">开始</button>
<button id="d3">结束</button>

<script>
    //4、创建一个变量t，用来存储定时器
    let t = null
    //1、 把要操作的标签生成对象
    let inputEle = document.getElementById('d1')
    let starEle = document.getElementById('d2')
    let endEle = document.getElementById('d3')
    //2、定义一个函数用于展示实时时间
    function showTime(){
        let time = new Date();  //  生成一个时间对象
        inputEle.value = time.toLocaleString()  //获取当前时间，并赋值给input标签
    }
    //3、给页面上的按钮绑定功能，一个开始，一个结束
    starEle.onclick = function (){
        if (!t){
            t=setInterval(showTime,1000)    //每点击一下就会生成一个定时器
        }
    }
    endEle.onclick = function (){
        clearInterval(t)    //只能清除一个定时器
        t = null
    }
</script>
</body>
</html>

4、省市联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select name="" id="d1" >
    <option value="---请选择---" selected disabled>---请选择---</option>
</select>
<select name="" id="d2"></select>

<script>
    let proEle = document.getElementById('d1')
    let cityEle = document.getElementById('d2')
    //1、先模拟省市数据
    data={
        '江西':['南昌','九江','赣州','上饶'],
        '浙江':['杭州','义乌','绍兴','嘉兴'],
        '江苏':['南京','苏州','泰州','南通'],
        '广东':['广州','深圳','惠州','清远']
    };
    //2、for循获取到省
    for (let key in data){
        //2.1 将省信息做成一个个option标签，并添加到第一个select框中
        //1 创建option框
        let opEle = document.createElement('option')
        //2 设置value
        opEle.value = key
        //3 设置文本
        opEle.innerText = key
        //4 添加到第一个select中
        proEle.appendChild(opEle)
    }
    //3、设置文本域变化事件，使得再更换省的时候可以更新市
    proEle.onchange = function (){
        //先清空市select中所有的option
        cityEle.innerHTML = ''
        //先获取到用户选择的省
        let getPro = proEle.value
        //获取对应的市信息
        let getCity = data[getPro]
        //添加默认选择标签
        let oppEle = document.createElement('option')
        oppEle.innerText = '-请选择-'
        oppEle.setAttribute('selected','selected')
        oppEle.setAttribute('disabled','disabled')
        cityEle.appendChild(oppEle)
        //for循环所有的市，渲染到第二个select中
        for(let i=0;i<getCity.length;i++){
            //拿到市名
            let city = getCity[i]
            //创建标签
            let opEle = document.createElement('option')
            //设置文本
            opEle.innerText = city
            //设置值
            opEle.value = city
            //添加到第二个select中
            cityEle.appendChild(opEle)
        }
    }

</script>
</body>
</html>

jQuery

jQuery 是一个快速、小巧且功能强大的 JavaScript 库。它通过简化 JavaScript 编程，使开发人员能够更轻松地操作 HTML 文档、处理事件、执行动画效果以及处理 AJAX 请求等。

jQuery基本语法：

jQuery（选择器）.action（）
可以简写：jQuery() ===$()

基本选择器：

1. 元素选择器：使用元素名称选择 HTML 元素。例如：`$("p")` 会选择所有的 `<p>` 元素。

2. ID 选择器：使用元素的 ID 属性选择指定的元素。例如：`$("#myElement")` 会选择具有 ID 属性为 "myElement" 的元素。

3. 类选择器：使用元素的类名选择指定的元素。例如：`$(".myClass")` 会选择具有类名为 "myClass" 的元素。

4.属性选择器：使用元素的属性选择指定的元素。例如：$("[name='myName']") 会选择具有 name 属性值为 "myName" 的元素。

通过jQuery选择器获取到的对象都是jQuery对象，如需使用JavaScript代码对其进行操作的话，则需要转换成标签对象。

$("#myElement")[0]	//转成标签对象

同样，标签对象也可转成jQuery对象：

$(document.getElementByid('#myElement')) //转成jQuery对象

组合分组嵌套选择器：

jQuery也支持组合选择器：

$('div#d1')	//选择具有 id 属性为 "d1" 的 <div> 元素。
$('div.c1')	//选择具有 class 属性为 "c1" 的 <div> 元素。
... ...
$('div span')	//后代选择器，用于选择 <div> 元素内的所有 <span> 元素。
$('div>span')	//子元素选择器，用于选择 <div> 元素的直接子元素中的 <span> 元素。
$('div+span')	//相邻元素选择器，用于选择紧接在 <div> 元素后面的第一个 <span> 元素。
$('div~span')	//兄弟元素选择器，用于选择所有在 <div> 元素后出现的同级别的 <span> 元素。

基本筛选器：

在jQuery中，筛选器可以根据不同的条件来选择匹配的元素，从而实现对元素的精确控制和操作。

jQuery提供了许多基本筛选器，用于选择匹配指定条件的元素。以下是一些常用的基本筛选器：

- `:first`：选择第一个匹配的元素。

- `:last`：选择最后一个匹配的元素。

- `:even`：选择索引为偶数的元素（从0开始计数）。

- `:odd`：选择索引为奇数的元素（从0开始计数）。

- `:eq(index)`：选择索引为指定值的元素。

- `:gt(index)`：选择索引大于指定值的元素。

- `:lt(index)`：选择索引小于指定值的元素。

- `:header`：选择所有标题元素（如`<h1>`、`<h2>`等）。

- `:not(selector)`：选择不匹配给定选择器的元素。

- `:has(selector)`：选择包含匹配给定选择器的元素。

- `:contains(text)`：选择包含指定文本内容的元素。

$('ul li') #ul下面的所有li子标签
$('ul li:first') #ul下面的第一个li子标签 $('ul li').first()
$('ul li:last') #ul下面的最后一个li子标签 $('ul li').last()
$('ul li:eq(2)') #放索引，根据索引取值
$('ul li:even') #偶数索引，0包含在内
$('ul li:odd') #奇数索引
$('ul li:gt(2)') #大于索引
$('ul li:lt(2)') #小于索引
$('div:has("p")') #选举出包含一个标签，或多个标签在内的标签（父级）
$('ul li:not("#d1")') # 移除所有满足条件的标签

这些基本筛选器可以与其他选择器和方法组合使用，以便更精确地选择和操作网页中的元素。

表单筛选器：

特殊情况

筛选器方法：

介：

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

关于jQuery开发教程的详细内容：（点击下方“了解更多”，记得收藏哦~）

（本课程可以帮助学员掌握jQuery开发技术，适合人群前端开发者学习）

jQuery 选择器：

允许您对元素组或单个元素进行操作。

3.1 元素选择器

使用 CSS 选择器来选取 HTML 元素。

3.2 属性选择器 [ ]

带有给定属性的元素。

$('[title]').hide();

改变 HTML 元素的 CSS 属性。

3.3 CSS 选择器

$('p').css('background-color', 'red');

语言特点：

  • 快速获取文档元素

jQuery的选择机制构建于Css的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。

  • 提供漂亮的页面动态效果

jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页，许多网站都使用jQuery的内置的效果，比如淡入淡出、元素移除等动态特效。

  • 创建AJAX无刷新网页

AJAX是异步的JavaScript和ML的简称，可以开发出非常灵敏无刷新的网页，特别是开发服务器端网页时，比如PHP网站，需要往返地与服务器通信，如果不使用AJAX，每次数据更新不得不重新刷新网页，而使用AJAX特效后，可以对页面进行局部刷新，提供动态的效果。

  • 提供对JavaScript语言的增强

jQuery提供了对基本JavaScript结构的增强，比如元素迭代和数组处理等操作。

  • 增强的事件处理

jQuery提供了各种页面事件，它可以避免程序员在HTML中添加太事件处理代码，最重要的是，它的事件处理器消除了各种浏览器兼容性问题。

  • 更改网页内容

jQuery可以修改网页中的内容，比如更改网页的文本、插入或者翻转网页图像，jQuery简化了原本使用JavaScript代码需要处理的方式。

语言评价：

jQuery 是继prototype 之后又一个优秀的轻量级JavaScript 框架。其宗旨是———“Write Less, Do More”,写更少的代码,做更多的事情。 它是一个快速和简洁的JavaScript 库，可以简化HTML 文档元素的遍历，事件处理，动画和Ajax 交互以实现快速Web 开发，它被设计用来改变编写JavaScript 脚本的方式。

jQuery 的文档非常丰富，因为其轻量级的特性，文档并不复杂，随着新版本的发布，可以很快被翻译成多种语言，这也为jQuery 的流行提供了条件。jQuery 被包在语法上，jQuery 支持CSS1-3 的选择器， 兼容IE 6.0+, FF 2+,Safari 3.0+, Opera 9.0+, Chrome 等浏览器。同时，jQuery 有约几千种丰富多彩的插件，大量有趣的扩展和出色的社区支持，这弥补了jQuery功能较少的不足并为jQuery 提供了众多非常有用的功能扩展。加之其简单易学，jQuery 很快成为当今最为流行的JavaScript 库，成为开发网站等复杂度较低的Web 应用程序的首选JavaScript 库，并得到了大公司如微软，Google 的支持。

jQuery 最有特色的语法特点就是与CSS 语法相似的选择器，并且它支持CSS1 到CSS3 的几乎所有选择器，并兼容所有主流浏览器，这为快速访问DOM 提供了方便。

阿里云开发者社区全面升级，一站式体验，用得更爽：https://developer.aliyun.com?spm=a2c41.12958151.0.0（复制网址链接到浏览器，记得收藏）

好程序员web前端学习路线分享jQuery学习技巧，jQuery在web前端学习中是一个必不可少的内容，很多小伙伴都在学习这阶段的时候遇到问题，今天我们就来聊一下jQuery，让我们一起来看一看吧！

1、关于页面元素的引用

通过jquery的$引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象(集合对象)，不能直接调用dom定义的方法。

2、jQuery对象与dom对象的转换

只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。普通的dom对象一般可以通过$转换成jquery对象。

如：$(document.getElementById("msg"))则为jquery对象，可以使用jquery的方法。

由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。

如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get[1]，$("td")[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。

以下几种写法都是正确的：

$("#msg").html;

$("#msg")[0].innerHTML;

$("#msg").eq(0)[0].innerHTML;

$("#msg").get(0).innerHTML;

3、如何获取jQuery集合的某一项

对于获取的元素集合，获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个

元素的内容。

有如下两种方法：

$("div").eq(2).html;//调用jquery对象的方法

$("div").get(2).innerHTML;//调用dom的方法属性

4、同一函数实现set和get

Jquery中的很多方法都是如此，主要包括如下几个：

· $("#msg").html;//返回id为msg的元素节点的html内容。

· $("#msg").html("new content");

· //将“new content” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content

· $("#msg").text;//返回id为msg的元素节点的文本内容。

· $("#msg").text("newcontent");

· //将“new content” 作为普通文本串写入id为msg的元素节点内容中,页面显示new content

· $("#msg").height;//返回id为msg的元素的高度

· $("#msg").height("300");//将id为msg的元素的高度设为300

· $("#msg").width;//返回id为msg的元素的宽度

· $("#msg").width("300");//将id为msg的元素的宽度设为300

· $("input").val(");//返回表单输入框的value值

· $("input").val("test");//将表单输入框的value值设为test

· $("#msg").click;//触发id为msg的元素的单击事件

· $("#msg").click(fn);//为id为msg的元素单击事件添加函数

· 同样blur,focus,select,submit事件都可以有着两种调用方法

5、集合处理功能

· $.extend({

· min:function(a, b){return a < b?a:b; },

· max:function(a, b){return a > b?a:b; }

· });//为jquery扩展了min,max两个方法

· 使用扩展的方法(通过“$.方法名”调用)：

· alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));

6、支持方法的连写

所谓连写，即可以对一个jquery对象连续调用各种不同的方法。

例如：

$("p").click(function{alert($(this).html)})

.mouseover(function{alert('mouseover event')})

.each(function(i){this.style.color=['#f00','#0f0','#00f'][i ]});

7、操作元素的样式

主要包括以下几种方式：

· $("#msg").css("background");//返回元素的背景颜色

· $("#msg").css("background","#ccc")//设定元素背景为灰色

· $("#msg").height(300);$("#msg").width("200"); //设定宽高

· $("#msg").css({color: "red", background:"blue" });//以名值对的形式设定样式

· $("#msg").addClass("select");//为元素增加名称为select的class

· $("#msg").removeClass("select");//删除元素名称为select的class

· $("#msg").toggleClass("select");//如果存在(不存在)就删除(添加)名称为select的class

8、完善的事件处理功能

Jquery已经为我们提供了各种事件处理方法，我们无需在html元素上直接写事件，而可以直接为通过jquery获取的对象添加事件。

如：

$("#msg").click(function{alert("good")})//为元素添加了单击事件

$("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i ]})

//为三个不同的p元素单击事件分别设定不同的处理

jQuery中几个自定义的事件：

(1)hover(fn1,fn2)：一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。

//当鼠标放在表格的某行上时将class置为over，离开时置为out。

$("tr").hover(function{

$(this).addClass("over");

},

function{

$(this).addClass("out");

});

(2)ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

$(document).ready(function{alert("Load Success")})

//页面加载完毕提示“Load Success”,相当于onload事件。与$(fn)等价

(3)toggle(evenFn,oddFn):每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。

//每次点击时轮换添加和删除名为selected的class。

$("p").toggle(function{

$(this).addClass("selected");

},function{

$(this).removeClass("selected");

});

(4)trigger(eventtype):在每一个匹配的元素上触发某类事件。

例如：

$("p").trigger("click");//触发所有p元素的click事件

(5)bind(eventtype,fn)，unbind(eventtype): 事件的绑定与反绑定

从每一个匹配的元素中(添加)删除绑定的事件。

例如：

$("p").bind("click",function{alert($(this).text);}); //为每个p元素添加单击事件

$("p").unbind;//删除所有p元素上的所有事件

$("p").unbind("click")//删除所有p元素上的单击事件

9、几个实用特效功能

其中toggle和slidetoggle方法提供了状态切换功能。

如toggle方法包括了hide和show方法。

slideToggle方法包括了slideDown和slideUp方法。

10、几个有用的jQuery方法

$.browser.浏览器类型：检测浏览器类型。有效参数：safari, opera,msie,mozilla。如检测是否ie：$.browser.isie，是ie浏览器则返回true。

$.each(obj,fn)：通用的迭代函数。可用于近似地迭代对象和数组(代替循环)。

如

$.each([0,1,2], function(i, n){ alert( "Item #" + i + ": " + n );});

等价于：

vartempArr=[0,1,2];

for(vari=0;i

alert("Item#"+i+": "+tempArr[ i ]);

}

也可以处理json数据，如

$.each({ name: "John", lang: "JS" }, function(i, n){ alert("Name: " + i + ", Value: " + n ); });

结果为：

Name:name,Value:John

Name:lang,Value:JS

$.extend(target,prop1,propN)：用一个或多个其他对象来扩展一个对象，返回这个被扩展的对象。这是jquery实现的继承方式。

如：

$.extend(settings,options);

//合并settings和options，并将合并结果返回settings中，相当于options继承setting并将继承结果保存在setting中。

var settings =$.extend({}, defaults, options);

//合并defaults和options，并将合并结果返回到setting中而不覆盖default内容。

可以有多个参数(合并多项并返回)

$.map(array,fn)：数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中，并返回生成的新数组。

如：

vartempArr=$.map( [0,1,2], function(i){ return i + 4; });

tempArr内容为：[4,5,6]

vartempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });

tempArr内容为：[2,3]

$.merge(arr1,arr2):合并两个数组并删除其中重复的项目。

如：$.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,3,4]

$.trim(str)：删除字符串两端的空白字符。

如：$.trim(" hello, how are you? "); //返回"hello,how are you? "

11、解决自定义方法或其他类库与jQuery的冲突

很多时候我们自己定义了$(id)方法来获取一个元素，或者其他的一些js类库如prototype也都定义了$方法，如果同时把这些内容放在一起就会引起变量方法定义冲突，Jquery对此专门提供了方法用于解决此问题。

使用jquery中的jQuery.noConflict;方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用Jquery的时候只要将所有的$换成jQuery即可，如原来引用对象方法$("#msg")改为jQuery("#msg")。


在线咨询
上一篇：20个神级插件合集，好用到让Edge浏览器起飞
下一篇：HTML基础篇-17HTML之视频播放

您的项目需求

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

推荐阅读
友情链接 朝阳区 美溪区 湖里区 新城区 信宜市 简阳市 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服