大佬教程收集整理的这篇文章主要介绍了JQuery(一),大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
维护IE678是一件让人头疼的事情,一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少,PC端用户已经逐步被移动端用户所取代,如果没有特殊要求的话,一般都会选择放弃对678的支持。
jQuery对象@H_616_76@就是通过jQuery包装DOM对象后产生的对象。jQuery对象@H_616_76@是 jQuery独有的。如果一个对象是 jQuery对象@H_616_76@,那么它就可以使用jQuery@H_616_76@里的方法:例如$(“#i1”).html()。
$("#i1").html()
的意思是:获取id值为 i1
的元素的HTML代码。其中 html()
是jQuery里的方法。
相当于: document.getElementById("i1").innerHTML;
虽然 jQuery对象
是包装 DOM对象
后产生的,但是 jQuery对象
无法使用 DOM对象
的任何方法,同理 DOM对象
也没不能使用 jQuery
里的方法。
一个约定,我们在声明一个jQuery对象变量的时候在变量名前面加上$:
var $variable = jQuery对像 var variable = DOM对象 $variable[0]//jQuery对象转成DOM对象
拿上面那个例子举例,jQuery对象和DOM对象的使用:
$(SELEctor).action()
id选择器:@H_616_76@
$("#id")
$("tagName")
class选择器:@H_616_76@
$(".className")
配合使用:@H_616_76@
$("div.c1") // 找到有c1 class类的div标签
所有元素选择器:@H_616_76@
$("*")
组合选择器:@H_616_76@
$("#id,.className,tagName")
x和y可以为任意选择器
$("x y");// x的所有后代y(子子孙孙) $("x > y");// x的所有儿子y(儿子) $("x + y")// 找到所有紧挨在x后面的y $("x ~ y")// x之后所有的兄弟y
:first // 第一个 :last // 最后一个 :eq(indeX)// 索引等于index的那个元素 :even // 匹配所有索引值为偶数的元素,从 0 开始计数 :odd // 匹配所有索引值为奇数的元素,从 0 开始计数 :gt(indeX)// 匹配所有大于给定索引值的元素 :lt(indeX)// 匹配所有小于给定索引值的元素 :not(元素选择器)// 移除所有满足not条件的标签 :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
例子:@H_616_76@
$("div:has(h1)")// 找到所有后代中有h1标签的div标签 $("div:has(.c1)")// 找到所有后代中有c1样式类的div标签 $("li:not(.c1)")// 找到所有不包含c1样式类的li标签 $("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
练习:
<!DOCTYPE html> <html lang="zh-CN"> <head> <Meta charset="UTF-8"> <Meta http-equiv="x-ua-compatible" content="IE=edge"> <Meta name="viewport" content="width=device-width,initial-scale=1"> <title>自定义模态框</title> <style> .cover { position: fixed; left: 0; right: 0; top: 0; bottom: 0; BACkground-color: darkgrey; z-index: 999; } .modal { width: 600px; height: 400px; BACkground-color: white; position: fixed; left: 50%; top: 50%; margin-left: -300px; margin-top: -200px; z-index: 1000; } .hide { display: none; } </style> </head> <body> <input type="button" value="弹" id="i0"> <div class="cover hide"></div> <div class="@H_15_291@modal hide"> <label for="i1">姓名</label> <input id="i1" type="text"> <label for="i2">爱好</label> <input id="i2" type="text"> <input type="button" id="i3" value="关闭"> </div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script> var tButton = $("#i0")[0]; tButton.onclick=function () { var coverEle = $(".cover")[0]; var moDalele = $(".modal")[0]; $(coverElE).removeClass("hide"); $(moDalelE).removeClass("hide"); }; var cButton = $("#i3")[0]; cButton.onclick=function () { var coverEle = $(".cover")[0]; var moDalele = $(".modal")[0]; $(coverElE).addClass("hide"); $(moDalelE).addClass("hide"); } </script> </body> </html> jQuery版自定义模态框
例子:@H_616_76@
以上是大佬教程为你收集整理的JQuery(一)全部内容,希望文章能够帮你解决JQuery(一)所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。