JQuery

mac2022-06-30 161

一、jQuery简介

　　（一）jQuery 是一个快速、轻量级、可扩展的 js 库，它提供了易于使用的跨浏览器的API，使得访问dom，时间处理、动画效果、ajax请求变得简单；简化了JS对DOM的操作

　　（二）jQuery下载官网：https://jquery.com/download/

二、jQuery版本

　　（一）压缩版：compressed, production jQuery 压缩后的；用于生产环境的版本去掉了所有的不影响使用的代码和空格、换行等等保证jQuery文件的最小

　　（二）开发板：项目开发过程中使用的版本，代码是可读的

三、jQuery核心

　　（一）jQuery核心对象

　　　　window.jQuery = window.$ = jQuery;

　　　　在window对象中，多了两个属性，叫做jQuery 和 $jQuery属性和 $可以相互替代

　　（二）jQuery对象转换

　　　　1、使用jQuery获取的元素是jQuery对象，不是DOM对象，不能使用DOM对象方法；DOM对象可以和JQuery对象相互转换

　　　　　　DOM --> jquery

　　　　　　　　 let $div= $(dom对象);

　　　　　　jquery ---> DOM

　　　　　　　　 let div = $div[0] 或 let div = $div.get(0)

　　（三）优点

　　　　1、强大的选择器

　　　　2、优质的隐式迭代

　　　　3、无所不能的链式编程

四、选择器

　　注：jQuery选择元素永远是伪数组

　　（一）css选择器

　　　　1、标签选择器：

　　　　　　var div = $("div")；

　　　　2、类名选择器

　　　　　　var box = $(".box")；

　　　　3、ID选择器

　　　　　　var myId = $("#myId")；

　　　　4、属性选择器

　　　　　　 var text = $("[type='text']")；

　　　　5、伪类选择器

　　　　　　var firstTr = $("tr:first-child")；

　　　　　　var lastTr = $("tr:last-child")；

　　　　　　var secondTr = $("tr:nth-child(2)")；

　　　　　　var evenTr = $("tr:even")；//奇数

　　　　　　var oddTr = $("tr:odd")；//偶数

　　　　　　var empty = $("tr:empty")；

筛选器

和伪类选择一样，筛选出需要的元素

$("li:first") $("li:last") $("li:event") $("li:odd") $("li:eq(数字)") // 选择下标是指定数字的元素 $("li:lt(数字)") // 下标小于指定数字的元素 $("li:gt(数字)") // 下标小于指定数字的元素

表单元素选择器 -- 了解

$(":input") // 匹配所有的表单元素包括：文本框（input）下拉列表(select)、文本域(textarea) $(":text") // 匹配单行文本框type="text" $("input:text") $("input[type=text]") $(":password") // 匹配单行密码框 $(":radio") // 匹配单选按钮 $(":checkbox") // 匹配多选按钮 $(":submit") // 匹配提交按钮 $(":reset") // 匹配重置按钮 $(":image") // 匹配图片按钮 $(":button") // 匹配普通按钮 $(":file") // 匹配文件上传 $(":hidden") // 匹配隐藏域

表单对象选择器

$("input:enabled") // 所有可用表单元素 $("input:disbaled") // 所有禁用表单元素 $("input：checked") // 所有选中的表单元素 -- 重点 $("select:selected") // 被选中的下拉框元素 -- 重点

筛选器方法 -- 重点

使用方法来筛选元素

$("li").first() // 第一个元素 $("li").last() // 最后一个元素 $("div").next() // div的下一个兄弟元素 $("div").prev() // div的上一个兄弟元素 $("div").nextAll() // div后面的所有兄弟元素 $("div").prevAll() // div前面的所有兄弟元素 $("div").parent() // div的父元素 $("div").parents() // div的所有直系祖宗元素 $("div").eq(数字) // 指定下标的div元素 $("div").find(选择器) // div下的指定元素 $("div").siblings() // div的所有兄弟元素

筛选方法可以进行链式筛选

事件

jquery中的事件是将事件名作为方法名，传入回调函数即可。

$("div").click(function(){ }); $("div").mouseover(function(){ });

页面加载事件

在原生js中的页面加载事件是window.onload

在jquery中有两种写法：

$(function(){ }); $(document).ready(function(){ });

推荐使用jquery的页面加载事件，jquery的页面加载要比js原生的写法效率高，因为js元素的页面加载事件需要等到页面中的所有资源加载完毕才执行，而jquery的页面加载事件只需要等到页面的标签加载完毕就执行，而不会等待外部文件加载。

标准的事件处理：

on方法用于绑定事件、委托事件、传入参数

$(元素).on(事件类型[,委托元素][,传入的参数],处理的函数)

off方法用于解绑事件

$(元素).off(事件类型,处理函数)

trigger方法用于手动触发事件：

$(元素).trigger(事件类型,处理函数)

只能触发一次的事件：

$(元素).one(事件类型,处理函数);

特殊事件：

hover事件，包含鼠标放上去和鼠标离开

$("元素").hover(鼠标放上去的处理函数,鼠标离开的处理函数)

属性操作

设置属性：

$("div").prop(属性名,属性值);

获取属性：

$("div").prop(属性名);

设置自定义属性：

$("div").attr(属性名,属性值);

获取自定义属性：

$("div").attr(属性名);

删除属性：

$("div").removeProp(属性名); $("div").removeAttr(属性名); // 删除自定义属性

案例：全选反选

js写法

<body> <input type="checkbox">商品1<br> <input type="checkbox">商品2<br> <input type="checkbox">商品3<br> <input type="checkbox">商品4<br> <input type="checkbox">商品5<br> <input type="checkbox">商品6<br> <button class="all">全选</button><button class="reverse">反选</button><button class="allNot">取消</button><br> <span>删除</span> </body> <script src="../js/jquery.js"></script> <script type="text/javascript"> var checkboxs = document.querySelectorAll("input"); document.querySelector(".all").onclick=function(){ for(var i=0;i<checkboxs.length;i++){ if(!checkboxs[i].checked){ checkboxs[i].checked = true; } } } document.querySelector(".reverse").onclick=function(){ for(var i=0;i<checkboxs.length;i++){ if(!checkboxs[i].checked){ checkboxs[i].checked = true; }else{ checkboxs[i].checked = false; } } } document.querySelector(".allNot").onclick=function(){ for(var i=0;i<checkboxs.length;i++){ if(checkboxs[i].checked){ checkboxs[i].checked = false; } } } </script>

jquery写法：

$(".all").click(function(){ $("input[type='checkbox']").prop("checked",true); }); $(".reverse").click(function(){ if($("input[type='checkbox']").prop("checked")){ $("input[type='checkbox']").prop("checked",false); }else{ $("input[type='checkbox']").prop("checked",true); } }); $(".allNot").click(function(){ $("input[type='checkbox']").prop("checked",false); });

当操作jquery对象的时候，不需要遍历操作每一个，直接操作的就是每一个元素。因为在jquery内部自带遍历操作。这就是隐形迭代。

样式操作

设置样式：

$("div").css(css属性名,值); // 设置一个样式 $("div").css({ // 设置多个样式 css属性名:值, css属性名:值 })

获取样式：

$("div").css(css属性名);

类名操作

$("div").addClass(类名); // 添加类名 $("div").removeClass(类名); // 删除类名 $("div").toggleClass(类名); // 在添加和删除之间切换 $("div").hasClass(类名); // 判断元素是否有这个类名，有是true，没有是false

案例：选项卡

补充知识点：

$(this) 是将this关键字转为jquery对象 $(this).index() // index方法是获取元素的下标

链式编程在这里体现的淋漓尽致。

元素内容操作

$("div").text(); // 获取元素内容 === 相当于 div.innerText $("div").text("盒子"); // 设置元素内容 === 相当于 div.innerText = "盒子" $("div").html(); // 获取元素代标签的内容 === 相当于 div.innerHTML $("div").html("<b>文字</b>"); // 设置元素带标签的内容 === 相当于 div.innerHTML = "<b>文字</b>" $("input").val(); // 获取表单元素的值 === 相当于 input.value $("input").val("请输入用户名"); // 设置表单元素的内容 === 相当于 input.value = "请输入用户名"

转载于:https://www.cnblogs.com/liufuyuan/p/10585237.html

相关资源：jquerymobile设计完整例子

最新回复(0)