世界杯主题曲歌词 / 2026-07-04 23:17:52
1.jQuery的介绍
jQuery是一个轻量级的、兼容多浏览器的JavaScript库。jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。jQuery对象：jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象$("#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的使用:
1.首先要下载jQuery,放到html文件下2.在html中boby中引入jQuery 3.如果进行jQuery的操作，在script标签中执行
查找标签
选择器
1.基本选择器
1.所有元素选择器：$("*")2.id选择器：$("#id")3.标签选择器：$("tagName")4.class选择器：$(".className")配合使用：$("div.c1") // 找到有c1 class类的div标签。and的关系5.组合选择器：$("#id, .className, tagName") 把符合条件的都能找到，or的关系，逗号分开
2.层级选择器
找到的都是y标签1.$("x y");// x的所有后代y（子子孙孙） 2.$("x > y");// x的所有儿子y（儿子）3.$("x + y")// 找到所有紧挨在x后面的y4.$("x ~ y")// x之后所有的兄弟y
我很好
1.$(".dropdown-menu a") #r.fn.init(4) [a, a, a, a, 4个符合条件的，找到的都是a标签
2.$(".dropdown-menu>a") #fn.init 无结果
3.$(".dropdown-menu>li") #r.fn.init(5) [li, li, li, li.divider, li
4.$(".dropdown-menu+div") #r.fn.init [div,
5.$(".dropdown-menu~div") #r.fn.init(2) [div, div,
3.属性选择器
篮球1.[attribute]2.[attribute=value]// 属性等于$("input[type='checkbox']");// 取到checkbox类型的input标签$("input[name='username']") // 取到name属性为username类型的input标签$("input[type!='text']");// 取到类型不是text的input标签
4.基本筛选器
:first // 第一个 $("div:first");:last // 最后一个 $("#1 >div:last");:eq(index)// 索引等于index的那个元素 $("#1 > div:eq(1)");:even // 匹配所有索引值为偶数的元素，从 0 开始计数:odd // 匹配所有索引值为奇数的元素，从 0 开始计数:gt(index)// 匹配所有大于给定索引值的元素:lt(index)// 匹配所有小于给定索引值的元素not和has
:not(元素选择器)// 找到所有满足not条件的标签，即在这个标签内没有noy中的条件
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)111111111144
$("#1:has(div)");将后代中有div标签的id=1的标签找出来。找到的时id=1这个大标签
$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("li:not(“a")// 找到所有本身不含a标签的li标签
$("span:not("icon-bar")找到所有本身不含icon-bar类的span标签
5.表单常用筛选
:text:password:file:radio:checkbox$("input[type='checkbox']");可以直接写成$(":checkbox")表单对象属性:
:enabled #可用的:disabled:checked #单选和复选框:selected #下拉框$(":selected") // 找到所有被选中的option
$(":selected") // 找到所有被选中的option
对符合条件的标签做css样式：$("div").css("color", "red")
筛选器方法
1.下一个元素：指同一级的元素$("#id").next()$("#id").nextAll()$("#id").nextUntil("#i2")
$("#1").next();显示的是
$("#1").nextAll() 显示所有和它同级的元素
2.上一个元素：$("#id").prev()$("#id").prevAll()$("#id").prevUntil("#i2")
3.父亲元素：$("#id").parent() $("#2").parent();父元素是body$("#id").parents() // 查找当前元素的所有的父辈元素 找祖先，一直找到html$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。$(".jk").parentsUntil("#1");4.儿子和兄弟元素：$("#id").children();// 儿子们$("#id").siblings();// 兄弟们 #上下都找 find和filter
find查找元素：$("#id").find()// 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。$("div").find("p") 等价于$("div p") 找到div标签中的所有p标签$("div").find("span") #r.fn.init(8) [span.sr-only, span.icon-bar,filter筛选：用于缩小匹配的范围$("div").filter(".c1") // 等价于 $("div.c1") 从结果集中过滤出有c1样式类的div标签。找到的时div标签$("div").filter(".navbar-header") #r.fn.init [div.navbar-header
操作标签
样式类操作
addClass();// 添加指定的CSS类名。removeClass();// 移除指定的CSS类名。hasClass();// 判断样式存不存在toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
1.$(".container").addClass("item")
2.$(".container").hasClass("item") #true
将所有p标签的字体设置为红色：
$("p").css("color", "red");
菜单操作
View Code
位置
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置position()// 获取匹配元素相对父元素的偏移scrollTop()// 获取匹配元素相对滚动条顶部的偏移scrollLeft()// 获取匹配元素相对滚动条左侧的偏移$(".c1").offset(); #{left: 200, top:200}可以自定义：$(".c1").offset({left: 400, top:100});
文本操作
我很好
1.HTML代码：html()// 取得第一个匹配元素的html内容$(".jer").html() "你好吗"html(val)// 设置所有匹配元素的html内容$(".jer").html("zhaoguangfei")
zhaoguangfei
2.文本值：text()// 取得所有匹配元素的内容 $(".jer").text() 你好吗我很好你怎么样"text(val)// 设置所有匹配元素的内容3.val值：用于获取form表单的值val()// 取得第一个匹配元素的当前值val(val)// 设置所有匹配元素的值val([val1, val2])// 设置checkbox、select的值
#单选框 checked=""默认被选中
男 #默认被选中
女
不详
#多选框 checked=""默认被选中
篮球
足球
网球
#单选下拉框 selected="" 默认被选中
#多选下拉框 selected="" 默认被选中
View Code
1.获取值：
1.获取单选框被选中的value值console.log($('input[type=radio]:checked').val())2.复选框被选中的value,获取的是第一个被选中的值console.log($('input[type=checkbox]:checked').val())
获取所有选中的值：
var content=$("input[type='checkbox']:checked")
$.each(content,function(){
console.log($(this).val());
})
basketball
football
获取所有的值存到列表中：
var value=new Array();
$.each(content,function(){
value.push(($(this).val()));
})
#["basketball", "football"]
3.下拉列表被选中的值$("select[name='book'] option:selected").val()4.下拉列表被选中的值，获取的是第一个被选中的值$("select[name='tv] option:selected").val()
2.设置值：
1.设置单选按钮和多选按钮被选中项$('input[type=radio]').val(['112']);$('input[type=checkbox]').val(['a','b']);2.设置下拉列表框的选中值，必须使用select因为option只能设置单个值，当给select标签设置multiple。那么我们设置多个值,就没有办法了，但是使用select设置单个值和多个值都可以 $('select').val(['3','2'])
属性操作
attr(attrName)// 返回第一个匹配元素的属性值attr(attrName, attrValue)// 为所有匹配元素设置一个属性值attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值removeAttr()// 从每一个匹配的元素中删除一个属性
attr():
1.获取值：attr()设置一个属性值的时候 只是获取值
$("select").attr('name'); #"zhao"$("div").attr('class') #"jer"2.设置值1.设置一个值 设置div的class为box$('div').attr('class','box')//2.设置多个值，参数为对象，键值对存储
$('div').attr({name:'hahaha',class:'happy'})
$("div").attr({name:'haahha',class:['box','zhao']})
#
removeAttr():
1.删除单个属性$('div').removeAttr('class')2.删除多个属性$('div').removeAttr('name class');
jquery中attr和prop的区别
对于HTML元素本身就带有的固有属性(本身就带有的属性)，在处理时，使用prop方法。对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
这个例子里元素的DOM属性有“href、id,class和action”，很明显，前三个是固有属性，而后面一个“action”属性是我们自己自定义上去的元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时，建议使用attr方法使用prop方法对自定义属性取值和设置属性值时，都会返回undefined值。像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此需要使用prop方法去操作才能获得正确的结果。
$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true
如果上面使用attr方法，则会出现：
$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"
为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked")。
文档处理
1.添加
1.添加到指定元素内部的后面 父元素.append(子元素)
$(A).append(B)// 把B追加到A$(A).appendTo(B)// 把A追加到B追加某元素，在父元素中添加新的子元素。子元素可以为：stirng | element（js对象） | jquery元素
var newtag=document.createElement("span")
newtag.innerText="天青烟雨";
$("[name=jerd]").append(newtag); #js对象
$('[name=jerd]').append('
$('[name=jerd]l').append($('#app')); #jquery元素
如果追加的是jquery对象那么这些元素将从原位置上消失。简言之，就是一个移动操作。
2.添加到指定元素内部的前面父元素.prepend(子元素)
$(A).prepend(B)// 把B前置到A 前置添加， 添加到父元素的第一个位置
$(A).prependTo(B)// 把A前置到B
3.添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面$(A).insertAfter(B)// 把A放到B的后面
4.添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面$(A).insertBefore(B)// 把A放到B的前面增加.删除操作
| # | 姓名 | 操作 |
|---|---|---|
| 1 | 金老板 | |
| 2 | 景女神 | |
| 3 | 隔壁老王 |
View Code
2.修改
replaceWith()和replaceAll() 替换remove()// 从DOM中删除所有匹配的元素。empty()// 删除匹配的元素集合中所有的子节点。
1.replaceWith()和replaceAll()
$(selector).replaceWith(content);将所有匹配的元素替换成指定的string、js对象、jquery对象。//将所有的h5标题替换为a标签$('h5').replaceWith('hello world')//将所有h5标题标签替换成id为app的dom元素$('h5').replaceWith($('#app'));替换所有。将所有的h2标签替换成p标签。$('
哈哈哈
')replaceAll('h2');2.remove()
$(selector).remove(); 删除节点后，事件也会删除（简言之，删除了整个标签）$(selector).detach();：删除节点后，事件会保留var $btn = $('button').detach()//此时按钮能追加到ul中,$('ul').append($btn) 在原来位置消失，但在ul标签内会出现
3.empty()
清空选中元素中的所有后代节点//清空掉ul中的子元素，保留ul$('ul').empty()
克隆操作
$(选择器).clone();1.clone()：克隆匹配的DOM元素2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力)
如何用ppt做瀑布图
盘点英国首相任期时长：撒切尔夫人是特拉斯的近百倍