jquery input值改变事件_前端技术--JQuery

JQuery

一、引言

1.JQuery是一个基于javascript语言的框架 --- 是对js代码的合理封装

2.js缺点，jquery优点

​1）js代码比较复杂 var tag = document.getElementById("idvalue")；

​jquery代码简单 var tag = $("#idvalue")；

2）js存在着浏览器差异，jquery可以屏蔽浏览器差异

​3）提供了强大的界面支持

二、第一个Jquery程序

1.搭建环境 -- 引入相关资源文件 （以.js文件形式存在）

<scripttype="test/javascript"src="js资源文件路径"></script>

2.知识点

​1）$("#id") --- 根据标签的id属性值获取标签对应的jquery对象

​2）html() --- 获取标签体里的内容

​3）css("css属性"，"css属性值") --- 设置标签的css样式

三、Jquery对象与DOM对象

区别：

​1.通过document.getElementById(..)获取的dom对象，不能使用jquery定义的函数

​2.通过jquery方式获取的对象为jquery对象 $("#id")，可以调用jquery定义的函数

四、Jquery对象选择器

1.通过jquery选择器获取jquery对象 [ 重点 ]

​1）基本选择器

​$("#id") --- id选择器，根据标签的id属性值，得到标签所有对应的jquery对象 [ 重点 ]

​$(".class") --- 类选择器，根据标签的class属性值获得相应的jquery对象

​$("标签名") --- 标签选择器，根据标签名获取jquery对象 [ 重点 ]

​$("div,span") --- 多路标签选择器

​$("*") --- 全选择器

​注意：$ 就是 jQuery 这几个字母

2）层次选择器

​$("选择符1 选择符2") -- 后代选择器，获取所有出现在选择器1里的选择符2（包括孩子和孙子......）

​$("选择符1>选择符2") -- 孩子选择器，获取选择符1里面的选择符2标签（只包括孩子）

​$("选择符1~选择符2") -- 后续所有的兄弟选择器

​$("选择符1+选择符2") -- 后续第一个兄弟选择器

3）过滤选择器

​概念：从一组jquery对象中，筛选出有用的jquery对象

​基本过滤选择器

​:first ---- 获取一组jquery对象中的第一个jquery对象，例：$("div:first") [ 重点 ]

​:last ---- 获取一组jquery对象中的第一个jquery对象，例：$("div:last")

​:not（"选择器"） ---- 排除指定的选择器对象，例：$("div:not('#dd')")

​:even ---- 获取一组jquery对象中下标为偶数的jquery对象，下标从0开始，例：$("div:even")

​:odd ---- 获取一组jquery对象中小标为奇数的jquery对象，例：$("div:odd")

​:eq(index) ---- 获取下标为index的jquery对象，例：$("div:eq(0)")

​:gt(index) ---- 大于给定下标的jquery对象，例：$("div:gt(1)") [ 重点 ]

​:lt(index) ---- 小于给定下标的jquery对象，例：$("div:lt(1)")

内容过滤选择器

​:contains(文本内容) ---- 获取包含指定内容的jquery对象，例：$(".aa:contains('xiaohei')")

​:empty ---- 获取没有内容的jquery对象，例：$("div:empty")

​:has(选择器) ---- 选择包含特定元素的jquery对象，例：$("div:has('div')")

​:parent ---- 获取为父元素的jquery对象，例：$("div:parent")

可见性过滤选择器

​:hidden ---- 获取一组jquery对象中被隐藏的标签，例：$("div:hidden")

​:visible ---- 获取可见的jquery对象，例：$("div:visible")

​属性过滤选择器

​[attribute] ---- 获取一组jquery对象中含有指定属性的标签，例：$("select option(value)")

​[attribute=value] ----获取一组jquery对象中的属性为value的标签对象 [ 重点 ]

​例：$("input[type=checkbox]")

​注意：给标签设置属性 attr() prop()

​在设置属性值时如果attr()不行就用prop()

表单属性过滤选择器

​:checked ---- 获取一组jquery对象中的被选中的标签对象 checked=true的[ 重点 ]

​例：$("input[type='checkbox']:checked").attr()

​:selected ---- 获取一组option标签对象中的被选中的option [ 重点 ]

​js ---> var tag = document.getElementById("pro");

​var value = tg.options[tag.selectedIndex].value;

​jquery ---> var value = $("#pro option:selected").val();

五、通过DOM对象获取jquery对象

Dom 与 JqueryDom对象通过原始js代码获取的对象一定是dom对象document.get....document.create.....Jquery对象1.通过jquery方式获取对象jquery对象2.将dom对象转为jquery对象$(dom) ---> jquery对象 例：var divDom = document.getElementById("dd");$(divDom).css();注意：只有jquery对象才能调用jquery相关方法普通标签：text() html()设置样式：css("","") css({key:value,...})获取value属性：val()设置标签属性：attr() prop("","")|prop({})

1.通过dom对象获取jquery对象

​ var jqueryObject = $(dom对象)

​ 2.通过html标签获取jquery对象

​ var div = $("chenyu "); ​ var input = $(" ");​ var span = $("chenyu");

六、Jquery对象的常用功能

注意：jquery对象支持链式调用，可以将所有功能通过.的方式全部缀在对象之后 obj.xx().xx()...

1.length()或者size() --- 获取一组jquery对象的个数

2.遍历一组jquery对象 --- each()

语法：$("li").each(function(idx)){ ​ this --- 代表当前正在被遍历的对象，是一个dom对象 ​ 使用时，$(this).css().attr().... ​ }）； ​ 全局遍历$.each(#("div").function(idx,dd){ ​ #(dd).css().attr() ​ }); ​ 此处idx表示正在被遍历的对象的下标

3.获取或者设置jquery对象的属性 --- prop() attr()

​ 获取属性 --- jquery对象.prop(属性名)

​ 设置属性 --- jquery对象.prop(属性名，属性值)

​ 如果属性不存在，函数会自动为对象添加属性

​ 删除属性 --- jquery对象.removeAttr(属性名)

如果需要设置多个属性 $("#input").prop("type","text").prop("name","btn");​ $("#input").prop((type:"text",name:"btn"));

4.获取和设置dom样式

​ 1）获取或者设置css样式

​ css() --- 单个设置css样式

​ 获取 --- jquery对象.css("css属性名")；

​ 设置or修改 --- jquery对象.css("属性名"，"属性值");

​ 2）关于隐藏和显示标签

​ hide(time) --- 在time毫秒内隐藏jquery对象看（有动画效果）

​ show(time) --- 以动画效果，在time毫秒内显示一个jquery对象

​ 3）关于添加一类css样式

​ jquery对象.addClass('css里的一类样式的class名') --- 等价于jquery对象.prop("class","value");

​ jquery对象.removeClass()

4）三个关于内容处理

​ html() --- 设置或者获取标签体里的内容（包括子标签和文本内容），等价于js里的innerHTML

​ 获取 --- jquery对象.html()；

​ 设置 --- jquery对象.html(内容);

​ text() --- 设置或者获取标签体里的文本内容

​ val() --- 设置或者获取标签体里的value属性值

​ 获取 --- jquery对象.val()；

​ 设置 --- jquery对象.val(值)；

​ 5）向指定标签中存取数据 data

​ 只有一个参数 代表在当前标签对象上获取这个参数对应的值

​ 设置：$("#dd").data("name","张三")；

​ $("#dd").data("age","23");

​ 获取：$("#dd").data("name");

​ 移除：$("#dd").removeDate("name");

​ 注意：保证键名不一致，保存的数据不显示，可以在之后调用

​ 6）测试滑动效果 slideDown slideUp 元素需要隐藏（display:none）

​ 例：$("#dd").slideDown(200, function(){​ });

​ 7）动画效果

例：$("#ddd").animate({​ "marginLeft":"200px",​ "backgroundColor":"blue",//不可直接使用​ });

​ 注意：如果要实现颜色动画效果，要添加jquery.color.js或者添加jquery-ui.js（ps：后者涵盖较多）

//实例：用data、事件等功能实现div颜色鼠标移入改变，移出恢复 $("div").mouseover(function(){//保存原来样式$(this).data("aa",$(this).prop("backgroundColor"));//修改新的样式$(this).css("background", "blue"); }).mouseout(function(){$(this).css("background", $(this).data("aa")); });

七、Jquery对象添加事件

事件三要素：

1.事件源 通常指html中标签 2.事件 发生动作 单击 双击... 3.事件处理程序 通常函数完成功能

1.js里的事件处理

标签式事件处理 <a href="" onclick="fun()"></a> 编程式事件处理 <script type="text/javascript">window.onload = function(){var tag = document.getElementById("btn");tag.onclick = function(){};} </script>

2.jquery里的编程式事件处理

第一种： <script type="text/javascript">$(document).ready(function(){ ===> window.onload=function{}jquery代码}); </script> 第二种： <script type="text/javascript">$(function(){$("#btn").click(function(){});}); </script>

八、复合事件

$(function(){//1.9之后废弃，但是通过各种方法可以加入$("div").toggle(functionn(){console.log("===1==="); },function(){console.log("===2==="); },function(){console.log("===3==="); }); });

九、图片建议放大

$(function(){//鼠标移入$("#img").mouseover(function(e){//0.获取鼠标的位置var x = e.pageX+20;//e.clientX;var y = e.pageY+20;//e.clientY;//1.创建一个div对象,并使用绝对路径，浮动显示var div = $("<div id="showImg"/>").css({"position":"absolute","top":y,"left":x,"display":"none"});//2.创建一个img标签var img = $("<img>").attr({//设置属性"src":$(this).attr("src")}).css({//设置样式"width":$(this).css("width")*2,"height":$(this).css("height")*2});//3.将图片放入div中div.append(img);//4.将div放入页面中$("body").append(div);//5.显示出来div.show(2000);}).mousemove(function(e){//绑定鼠标移动事件//0.获取当前鼠标的位置var x = e.pageX;//e.clientX;var y = e.pageY;//e.clientY;//1.获取页面中的div浮层$("#showImg").hide().css({"top":y+20,"left":x+20,});}).mouseout(function(){$("#showImg").remove();}); });

注：使用过程中还应注意对jquery其他插件的使用

作者：Cszdyz2020
链接：前端技术--JQuery - Cszdyz2020 - 博客园
来源:博客园

总结

以上是生活随笔为你收集整理的jquery input值改变事件_前端技术--JQuery的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。