jQuery选择器 基本知识

2024-08-29 05:18

本文主要是介绍jQuery选择器 基本知识,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

jQuery选择器,jQuery基本知识

一、核心: 是 j q u e r y 类 的 一 个 别 名 , 是jquery类的一个别名, jquery,()构造一个jquery对象,jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都基于这个函数,或者说都是在以某种方式使用这个函数。

1、 ${表达式}:根据这个表达式来查找所有匹配的元素。

eg:$("div>p"); 查找所有p元素,且这些p元素都是div的子元素.$("input:radio",document.forms[0]); 查找文档第一个表单中,所有的单选按钮。$("div",xml.responseXML);在一个由ajax返回的xml文档中,查找所有的div元素。

2、$(html标记字符串) :根据提供的html字符串,创建jquery对象包装的dom元素。

 eg: $("<div><p>Hello</p></div>").appendTo("body");创建一个 <input> 元素必须同时设定 type 属性$("<input type='text'>")

、$(dom元素):将一个或多个dom元素转换为jquery对象。

eg: $(document.body).css( "background", "black" ); 设置页面背景色

4、 ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) ) = = (document).ready(function(){})== (document).ready(function())==(function(){});在页面加载完成后自动执行的代码。

二、jquery对象访问。eq返回的是jquery对象,只能使用jquery方法,get返回的是dom元素对象,只能使用dom方法.

1、$(dom元素).each(function(){}):以每一个匹配的元素作为上下文来执行一个函数

2、 ( d o m 元 素 ) . s i z e ( ) = = (dom元素).size()== (dom).size()==(dom元素).length;对象中元素的个数。eg: ,jquery代码:$(“img”).size(); 返回2

3、context:返回传给jQuery()的原始的DOM节点内容,即jQuery()的第二个参数。如果没有指定,那么context指向当前的文档(document)。

4、$(dom元素).get():取得所有匹配的dom元素的集合。如果你想要直接操作 DOM 对象而不是 jQuery 对象,这个函数非常有用。

5、$(dom元素).get(index):取得其中一个匹配的元素.

6、$(dom元素).index():搜索与参数表示的对象匹配的元素,并返回相应元素的索引值。

三、插件机制:

1、jQuery.fn.extend(object);扩展 jQuery 元素集来提供新的方法,针对某一个dom元素。

  eg:jQuery.fn.extend({check: function() { return this.each(function() { this.checked = true; });},uncheck: function() { return this.each(function() { this.checked = false; });}});调用:$("input[type=checkbox]").check();$("input[type=radio]").uncheck();

2、$.extend(object);用来在jQuery命名空间上增加新函数,针对所有dom元素。

 $.extend({min:function(a,b){return a<b?a:b;},max:function(a,b){return a>b?a;b;}});调用:$.max(10,20);

四、选择器

基本:

1、$("#id"): 根据给定的ID匹配一个元素。

2、$(“dom元素名”):根据给定的元素名匹配所有元素

3、$(".Class类名"): 根据给定的类匹配元素。

4、$("*") :匹配所有元素。

5、$(“dom元素.class类名”):选择所有class属性为指定类名的dom元素。

6、$(".stripe tr"): 获取class属性为stripe的table元素下的所有行

层级:

1、$(“ancestor descendant”):在给定的祖先元素下匹配所有的后代元素

2、$(“parent > child”):在给定的父元素下匹配所有的子元素

3、$(“prev + next”):匹配所有紧接在 prev 元素后的 next 元素

4、$(“prev ~ siblings”):匹配 prev 元素之后的所有 siblings(同级) 元素

简单:

1、$(“tr:first”) 匹配找到的第一个元素

2、$(“tr:last”) 匹配找到的最后一个元素

3、$(“input:not(:checked)”) 去除所有与给定选择器匹配的元素

4、$(“tr:even”) 匹配所有索引值为偶数的元素,从 0 开始计数

5、$(“tr:odd”) 匹配所有索引值为奇数的元素,从 0 开始计数

6、$(“tr:eq(1)”) 匹配一个给定索引值的元素

7、$(“tr:gt(0)”) 匹配所有大于给定索引值的元素

8、$(“tr:lt(2)”) 匹配所有小于给定索引值的元素

内容:

1、$(“div:contains(‘John’)”) 匹配包含给定文本的元素

2、$(“div:has§”) 匹配所有包含 p 元素的 div 元素

3、$(“td:empty”) 查找所有不包含子元素或者文本的空元素

可见性:

1、$(“tr:visible”) 查找所有可见的 tr 元素

2、$(“tr:hidden”) 匹配所有的不可见元素,input 元素的 type 属性为 “hidden” 的话也会被匹配到

属性:

1、$(“div[id]”) 查找所有含有 id 属性的 div 元素

2、$(“input[name=‘newsletter’]”) 查找所有 name 属性是 newsletter 的 input 元素

3、$(“input[name!=‘newsletter’]”) 查找所有 name 属性不是 newsletter 的 input 元素

4、$(“input[name^=‘news’]”) 查找所有 name 以 ‘news’ 开始的 input 元素

5、 ( " i n p u t [ n a m e ("input[name ("input[name=‘letter’]") 查找所有 name 以 ‘letter’ 结尾的 input 元素

6、$(“input[name*=‘man’]”) 查找所有 name 包含 ‘man’ 的 input 元素

7、 ( " i n p u t [ i d ] [ n a m e ("input[id][name ("input[id][name=‘man’]") 找到所有含有 id 属性,并且它的 name 属性是以 man 结尾的

子元素:

1、nth-child(even)/:nth-child(odd)/:nth-child(3n)/:nth-child(2)/:nth-child(3n+1)/:nth-child(3n+2) 匹配其父元素下的第N个子或奇偶元素

2、$(“ul li:first-child”) 在每个 ul 中查找第一个 li

3、$(“ul li:last-child”) 在每个 ul 中查找最后一个 li

4、$(“ul li:only-child”) 在 ul 中查找是唯一子元素的 li

表单:

1、$(":input") 查找所有的input元素

2、$(“text”) 匹配所有的单行文本框

3、$(":password") 匹配所有密码框

4、$(“radio”) 匹配所有单选按钮

5、$(“checkbox”) 匹配所有复选框

6、$(“submit”) 匹配所有提交按钮

7、$(“image”) 匹配所有图像域

8、$(“button”) 匹配所有按钮

9、$(“file”) 匹配所有文件域

10、$(“hidden”) 匹配所有不可见元素,或者type为hidden的元素

表单对象属性:

1、$(“input:checked”) 匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)

2、$(“input:enabled”) 匹配所有可用元素

3、$(“input:disabled”) 匹配所有不可用元素

04、$(“select option:selected”) 匹配所有选中的option元素

五、属性操作

操作属性:

1、$("img").attr("src"); 返回文档中第一个图像的src属性值。2、$("img").attr("src","test.jpg"); 为所有匹配的元素设置一个属性值3、$("img").attr("title", function() { return this.src }); 为所有匹配的元素设置一个计算的属性值4、$("img").removeAttr("src"); 从每一个匹配的元素中删除一个属性5、$("img").attr({ src: "test.jpg", alt: "Test Image" }); 将一个“名/值”形式的对象设置为所有匹配元素的属性。

操作CSS:

1、$("p").addClass("selected"); 为每个匹配的元素添加指定的类名2、$("p").removeClass("selected"); 从所有匹配的元素中删除全部或者指定的类。一个或多个要删除的CSS类名,请用空格分开

$(“p”).removeClass();删除匹配元素的所有类

3、$("p").toggleClass("selected"); 如果存在(不存在)就删除(添加)一个类4、 var count = 0;$("p").click(function(){$(this).toggleClass("highlight", count++ % 3 == 0);

}); 每点击三下加上一次 ‘selected’ 类

HTML代码:

1、$(“div”).html(); 取得第一个匹配元素的html内容

2、$(“div”).html(“

Hello Again

”); 设置每一个匹配元素的html内容

文本:

1、$(“p”).text(); 取得所有匹配元素的内容

2、$(“p”).text(“Some new text.”); 设置所有匹配元素的文本内容

值:

1、 $("#single").val() 获得第一个匹配元素的当前值。

2、$(“input”).val(“hello world!”); 设置每一个匹配元素的值

六、筛选

过滤:

1、$(“p”).eq(1) 获取第N个元素,这个元素的位置是从0算起

2、 if ( $(this).hasClass(“protected”) ) 检查当前的元素是否含有某个特定的类,如果有,则返回true。

3、$(“p”).filter(".selected") 筛选出与指定表达式匹配的元素集合

4、is(expr) 用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true。

5、$(“p”).not( $("#selected")[0] ) 删除与指定表达式匹配的元素

查找:

1、$(“div”).children();取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

2、$(“p”).find(“span”);搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

3、$(“p”).next();取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合

4、$(“p”).prev();取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。

5、$(“div”).parent;取得一个包含着所有匹配元素的唯一父元素的元素集合。

6、$(“span”).parents;找到每个span元素的所有祖先元素

7、$(“div”).siblings();取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合

七、文档处理

内部插入:

1、$(“p”).append(“Hello”); 向每个匹配的元素内部尾部追加内容

2、$(“p”).prepend(“Hello”); 向每个匹配的元素内部前部追加内容

2、$("p").appendTo("#foo"); 把所有段落追加到ID值为foo的元素中。

外部插入:

1、$(“p”).after(“Hello”); 在每个匹配的元素之后插入内容

2、$(“p”).before(“Hello”); 在每个匹配的元素之前插入内容

包裹

1、$(“p”).wrap("

"); 把所有匹配的元素用其他元素的结构化标记包裹起来。

替换:

1、$(“p”).replaceWith("Paragraph. "); 将所有匹配的元素替换成指定的HTML或DOM元素。

删除:

1、$(“p”).empty(); 删除匹配的元素集合中所有的子节点。

2、$(“p”).remove(); 从DOM中删除所有匹配的元素

八、CSS操作

CSS:

1、$("p").css("color"); 取得第一个段落的color样式属性的值2、$("p").css({ color: "#ff0011", background: "blue" }); 把一个“名/值对”对象设置为所有匹配元素的样式属性。3、$("p").css("color","red"); 在所有匹配的元素中,设置一个样式属性的值

位置:

1、var offset = p.offset();获取匹配元素在当前视口的相对偏移,返回的对象包含两个整形属性:top 和 left。此方法只对可见元素有效。2、var position = p.position();获取匹配元素相对父元素的偏移

尺寸:

1、$("p").height(); 取得第一个匹配元素当前计算的高度值(px)。2、$("p").height(20); 为每个匹配的元素设置CSS高度(hidth)属性的值3、$("p").width(); 取得第一个匹配元素当前计算的宽度值(px)。$(window).width(); 获取当前窗口的宽4、$("p").width(20); 为每个匹配的元素设置CSS宽度(width)属性的值

九、效果

基本:

1、$("p").show() 显示隐藏的匹配元素2、$("p").hide() 隐藏显示的元素3、$("p").show("slow"); 以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数。speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)

callback (Function) : (Optional) 在动画完成时执行的函数,每个元素执行一次。

用迅速的动画将隐藏的段落显示出来,历时200毫秒。并在之后执行反馈!

Hello

jQuery 代码:

$(“p”).show(“fast”,function(){

$(this).text(“Animation Done!”);

});

4、$(“p”).hide(“slow”); 以优雅的动画隐藏所有匹配的元素,并在显示完成后可选地触发一个回调函数。

5、$(“p”).toggle() 切换元素的可见状态

6、$(“p”).toggle(“slow”); 以优雅的动画切换所有匹配的元素,并在显示完成后可选地触发一个回调函数

淡入淡出:

1、$(“p”).fadeIn(“slow”); 通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数

2、$(“p”).fadeOut(“slow”); 通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。

3、 ( " p " ) . f a d e T o ( " s l o w " , 0.66 ) ; ("p").fadeTo("slow", 0.66); ("p").fadeTo("slow",0.66);(“p”).fadeTo(“slow”, 0.66); 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数

自定义:

1、$("#block").animate({

width: "90%",height: "100%",fontSize: "20em",borderWidth: 10

}, 1000 );用于创建自定义动画的函数。

十、事件

事件处理:

1、$("p").bind("click", function(){ alert( $(this).text() );}); 为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数

2、KaTeX parse error: Expected '}', got 'EOF' at end of input: …nction(){alert({this}.text());}) 当所有段落被第一次点击的时候,显示所有其文本

3、trigger(type,[data])在每一个匹配的元素上触发某类事件

事件委派:KaTeX parse error: Expected '}', got 'EOF' at end of input: …k", function(){(this).after(“

Another paragraph!

”);});。给所有当前以及将来会匹配的元素绑定一个事件处理函数(比如click事件)。也能绑定自定义事件。与bind()不同的是,live()一次只能绑定一个事件

事件切换:一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法

$(“td”).hover(

function () {

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

},

function () {

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

}

);鼠标悬停的表格加上特定的类

4、每次点击后依次调用函数。

$(“td”).toggle(

function () {

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

},

function () {

$(this).removeClass(“selected”);

}

);

5、事件:

1、$(“p”).blur(); 触发每一个匹配元素的blur事件

2、$(“p”).blur( function () { alert(“Hello World!”); } ); 在每一个匹配元素的blur事件中绑定一个处理函数

3、change();change事件会在元素失去焦点的时候触发,也会当其值在获得焦点后改变时触

4、change(fn);在每一个匹配元素的change事件中绑定一个处理函数。

5、$(“p”).click(); 触发每一个匹配元素的click事件

6、$(“p”).click(function(){});在每一个匹配元素的click事件中绑定一个处理函数

7、dblclick();dblclick事件会在元素的同一点双击时触发。

8、$(“p”).dblclick( function () { alert(“Hello World!”); }); 在每一个匹配元素的dblclick事件中绑定一个处理函数。

9、$(document).ready(function(){ $("#login").focus();}); 触发每一个匹配元素的focus事件。

10、$(“input[type=text]”).focus(function(){this.blur();}); 在每一个匹配元素的focus事件中绑定一个处理函数。

11、keydown();keydown事件会在键盘按下时触发。

12、keydown(fn);在每一个匹配元素的keydown事件中绑定一个处理函数。

13、keypress();触发每一个匹配元素的keypress事件

14、keypress(fn);在每一个匹配元素的keypress事件中绑定一个处理函数。

15、keyup();触发每一个匹配元素的keyup事件

16、keyup(fn);在每一个匹配元素的keyup事件中绑定一个处理函数。

17、mousedown();

18、mouseup();

19、mousemove();

20、mouseover();

21、mouseout();

22、$(“form:first”).submit();提交本页的第一个表单。

23、$(“form”).submit(function(){return false;});阻止页面提交。

十一、ajax

  ajax请求:1、通有方式:$.ajax(prop);prop是一个hash表,它可以传递的key/value有以下几种:(String)type:数据传递方式(get或post)。((String)url:数据请求页面的url((String)data:传递数据的参数字符串,只适合post方式((String)dataType:期待数据返回的数据格式(例如 "xml", "html", "script",或 "json")((Boolean)ifModified: 当最后一次请求的相应有变化是才成功返回,默认值是false((Number)timeout:设置时间延迟请求的时间。可以参考$.ajaxTimeout((Boolean)global:是否为当前请求触发ajax全局事件,默认为true((Function)error:当请求失败时触发的函数。((Function)success:当请求成功时触发函数((Function)complete:当请求完成后出发函数2、$.get(url, params, callback) 用get方式向远程页面传递参数,请求完成后处理函数,除了url外,其它参数任意选择!eg:$.get(   "ajax.asp",{ name: "young", age: "25" },function(data){ alert("Data Loaded: " + data); })3、$.getJSON(url, params, callback) 用get方式向远程json对象传递参数,请求完成后处理函数callback4、$.post(url, params, callback) 用post方式向远程页面传递参数,请求完成后处理函数callback

十二、工具类

  数组和对象操作:1、$.each(obj,callback); 通用例遍方法,可用于例遍对象和数组。回调函数拥有两个参数:第一个为对象的成员或数组的索引,第二个为对应变量或内容。$.each( [0,1,2], function(i, n){alert( "Item #" + i + ": " + n );});2、jQuery.grep(array,callback,[invert]);使用过滤函数过滤数组元素,此函数至少传递两个参数:待过滤数组和过滤函数3、$.map(array,callback);将一个数组中的元素转换到另一个数组中4、$.inArray(value,array);确定第一个参数在数组中的位置(如果没有找到则返回 -1 ),从0开始。5、$.merge( [0,1,2], [2,3,4] ) ;合并两个数组。返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素,不去掉重复项。6、$.unique(array);删除数组中重复元素7、$.trim(" hello, how are you? "); 去掉字符串起始和结尾的空格8、$.isArray(obj);测试对象是否为数组。9、$.isFunction(obj); 测试对象是否为函数

URL:

1、$.param(obj);将表单元素数组或者对象序列化。是.serialize()的核心方法。

 eg:var params = { width:1680, height:1050 }; var str = jQuery.param(params);

2、$(“form”).serialize() ;序列表单内容为字符串,用于 Ajax 请求

十三、jquery操作单选框

  if($("input[type='radio']:checked")){var tt=$("input[name='chk']:checked").val();}

十四、jquery操作复选框

var chkArr="";$(".cc:checked").each(function(){chkArr+=$(this).val()+"|";});

十五、jquery实现复选框全选

   var checked=$("#allchk").attr("checked");$(".ww").each(function(){if($(this).attr("checked")!=checked){$(this).click();}});

这篇关于jQuery选择器 基本知识的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1116945

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

关于数据埋点,你需要了解这些基本知识

产品汪每天都在和数据打交道,你知道数据来自哪里吗? 移动app端内的用户行为数据大多来自埋点,了解一些埋点知识,能和数据分析师、技术侃大山,参与到前期的数据采集,更重要是让最终的埋点数据能为我所用,否则可怜巴巴等上几个月是常有的事。   埋点类型 根据埋点方式,可以区分为: 手动埋点半自动埋点全自动埋点 秉承“任何事物都有两面性”的道理:自动程度高的,能解决通用统计,便于统一化管理,但个性化定

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧

【VUE】跨域问题的概念,以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略,该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同,则需要服务器显式地允许这种跨域请求。一般在springbo

HTML提交表单给python

python 代码 from flask import Flask, request, render_template, redirect, url_forapp = Flask(__name__)@app.route('/')def form():# 渲染表单页面return render_template('./index.html')@app.route('/submit_form',

Java 后端接口入参 - 联合前端VUE 使用AES完成入参出参加密解密

加密效果: 解密后的数据就是正常数据: 后端:使用的是spring-cloud框架,在gateway模块进行操作 <dependency><groupId>com.google.guava</groupId><artifactId>guava</artifactId><version>30.0-jre</version></dependency> 编写一个AES加密