JQuery
语法
-
jq里的对象.行为(处理函数)
-
css()
-
css() 里面写属性名则为 获取 属性值
-
css() 里面写key,value 设置key属性的值为value
-
css() 里面写{k1:v1,k2:v2,k3:v3} 同时设置k1 k2 k3三个属性
-
css() 里面还可以写key,function() 则 设置 key属性的值为 函数的返回值
jq里可以进行链式编程,原因是css函数 返回值是对象本身
-
-
-
jq文件的引入
<!-- 引入jquery的文件 -->
<!-- js文件的导入 可以在html的任何位置 -->
<script src="js/jquery-3.7.1.js"></script>
-
jq与js
对象转换
-
**js->jq : **使用$()包裹即可
-
jq->js : jq对象 一般是 选择器 方式 获取的 ,它获取到的是一个类似数组的对象
-
jq对象使用下标获取到 数组里的单个 js对象
-
p1[0].innerText = "first P!"
-
-
jq对象使用get行为来获取指定下标的 数组里的单个 js对象
-
ps.get(1).innerText = "33 段落!"
-
-
jq->jq :
-
jq对象使用eq行为来获取制定下标的 数组里的单个 jq对象
-
ps.eq(0).text("jq对象设置的文本内容");
-
-
一些jq里的js对象
-
$("input:hidden").each(function (i) {
//this指jq对象集合里的元素 对应的js对象
console.log(i+"---"+$(this).val());//可以直接this.xxxx
})
$("input:hidden").each(function (i,obj) {
//obj 也是 jq对象集合里的每一个元素 对应的 js对象
console.log(i+"---"+$(obj).val()+"===="+obj.value);
})
取值
-
js里取对象的值 使用 value
jq里取对象的值 使用 val() — 获取匹配元素集合里的第一个对象的值 val()获取时 只获取第一个
text() 获取时 获取所有复合的
举例:
<script>
window.onload = function () {
document.getElementById("h21").style.backgroundColor = "pink"
}
---- ready()是 文档准备完毕的行为
//行为(处理函数)
//事件源 事件 处理函数
$(document).ready(function () {
//$()里面 使用 选择器 来 选择 html 元素
$("#h22").text("jq更改后的内容!")
$("#h22").css("backgroundColor","skyblue")
})
</script>
选择器
选择器是指$("")双引号内部的
基本选择器
- id选择器
#id
$("#b1").click(function () {
let attrs = {backgroundColor:"#0000FF",border:"2px solid red"};
//$("#one").css("backgroundColor","#0000FF");
//$("#one").css(attrs);
$("#one").css("backgroundColor",function () {
return "red";
})
})
- 类选择器
.class
//类
$("#b2").click(function () {
$(".mini").css("backgroundColor","#FF0033")
})
- 属性选择器
属性
$("#b3").click(function () {
$("div").css("backgroundColor","#00FFFF")
})
- 所有选择器
*
$("#b4").click(function () {
$("*").css("backgroundColor","#00FF33")
})
- 并列选择器
选择器,选择器
$("#b5").click(function () {
$("span,#two").css("backgroundColor","#3399FF")
})
可见性选择器
- 可见
:visible
$("#b1").click(function () {
$("div:visible").css("backgroundColor","#0000FF")
})
- 不可见
:hidden
$("div:hidden").css("backgroundColor","#0000FF").show(2000/*,function () {
alert("显示完成!")
}*/)
遍历
-
jq对象
-
let hids = $("input:hidden");//jq对象集合(类似数组) for (let i = 0; i < hids.length; i++) { console.log(hids.eq(i).val()); } -
专门遍历jq对象集合的行为 each()
-
each() 里面 为每一个 jq对象集合里的元素 进行调用一个函数
-
each(function(){})fun()里可以设置 下标 或 当前对象(对应的js对象)
$("input:hidden").each(function () { //this指jq对象集合里的元素 对应的js对象 console.log(this.value+"---"+$("this").val()); }) -
-
-
js对象
-
for (const i in hids) { console.log(hids[i].value); }不推荐,会把jq对象集合里的一些其他东西也遍历出来,成为undefine
-
属性选择器
-
含有某属性
$("#b1").click(function () { $("div[title]").css("backgroundColor","red"); }) -
属性值等于
$("#b2").click(function () { $("div[title='test']").css("backgroundColor","purple") }) -
属性值不等于
$("#b3").click(function () { $("div[title!=test]").css("backgroundColor","yellow") })//没有属性title的也将被选中 -
属性值开头等于
$("#b4").click(function () {
$("div[title^=te]").css("backgroundColor","yellow")
})
- 属性值结尾等于
$("#b5").click(function () {
$("div[title$=est]").css("backgroundColor","yellow")
})
- 属性值含有xxx
$("#b6").click(function () {
$("div[title*=es]").css("backgroundColor","yellow")
})
- 并列
$("#b7").click(function () {
$("div[id][title*=es]").css("backgroundColor","yellow")
})
表单属性选择器
-
匹配所有可用元素
-
$(function () { $("#b1").click(function () { //val内的函数 参数 i 是单个对象的索引,old是单个对象的原先值 $("input[type='text']:enabled").val(function (i,old) { //return old + i; return "冰球"+i; }) })
-
-
匹配所有不可用元素
-
$("#b2").click(function () { $("input[type='text']:disabled").val(function (index) { return "大雪球"+index; }) })
-
-
checked
-
$("#b3").click(function () { alert("复选框选中的个数:"+$("input[type='checkbox']:checked").length) })
-
-
selected
$("#b4").click(function () {
alert("下拉框选中的内容:"+$("select option:selected").text())
})
表单标签选择器
除标注外其余筛选内容与css相同
- :input 匹配所有 input, textarea, select 和 button 元素
- :text
- :password
- :radio
- :checkbox
- :submit [ , ]
- :image
- :reset
- :button [ , ]
- :file
获取值和属性
-
html
-
$("#btn1").click(function () { alert($("#hh1").html()) })
-
-
text
-
$("#btn2").click(function () { alert($("#hh1").text()) })
-
-
attr(prop)
-
.prop()是用于获取或设置 DOM 元素的属性，而.attr()是用于获取或设置元素的自定义属性或 HTML 属性。对于像checked、selected和disabled这样的布尔属性，建议使用.prop()。 -
$("#btn3").click(function () { alert($("#in1").attr("type")) })//设置一个属性 $("#img1").mouseenter(function () { //$(this).attr("src","../img/head.jpg") let attrs = {src:"../img/head.jpg",title:"修勾"} $(this).attr(attrs);//设置多个属性 }) $("#img1").mouseout(function () { $(this).removeAttr("src"); })
-
-
CSS类
-
$("#h1last").mouseenter(function () { //$(this).addClass("myborder"); $(this).toggleClass("myborder"); }) /*$("#h1last").mouseout(function () { $(this).removeClass("myborder"); })*/
-
文档处理
插入
<input type="button" id="b2" value="添加成都li到 北京前"/><br/>
$("#b2").click(function () {
let bool = false;//保存是已存在的结果
$("li").each(function () {//遍历,判断原先是否有成都
if (this.innerText==="成都"){
bool = true;
return;
}
})
if (bool===true) {//进行结果判断,如果存在
alert('已有!')
return;//结束该程序
}
//新的li
let newLi = $("<li></li>");
newLi.text("成都");//设置内容 注意input型为value() 其它为text()
newLi.attr({id:"cq",name:"chengdu"});//设置属性
//父子
$("#city").prepend(newLi);//在首部追加新的li
})
<input type="button" id="b4" value="添加成都li到 北京和上海之间"/><br/>
$("#b4").click(function () {
let bool = false;
$("li").each(function () {
if (this.innerText==="成都"){
bool = true;
return;
}
})
if (bool===true) {
alert('已有!')
return;
}
//新的li
let newLi = $("<li></li>");
newLi.text("成都");
newLi.attr({id:"cq",name:"chengdu"});
//兄弟
$("#sh").before(newLi);
})
-
练习
-
下拉框左右选择
-
$("#add").click(function () { $("#first option:selected").appendTo($("#second")); }) $("#add_all").click(function () { $("#first option").appendTo($("#second")); }) $("#remove").click(function () { $("#second option:selected").appendTo($("#first")); }) $("#remove_all").click(function () { $("#second option").appendTo($("#first"));
-
-
checkbox
-
$("#checkedAll_2").change(function () { let chk = $(this).prop("checked"); /*alert(chk)*/ $(":checkbox[name='items']").prop("checked",chk); }) $("#CheckedAll").click(function () { $(":checkbox[name='items']").prop("checked",true); }) $("#CheckedNo").click(function () { $(":checkbox[name='items']").prop("checked",false); }) $("#CheckedRev").click(function () { $(":checkbox[name='items']").each(function () { $(this).prop("checked",!$(this).prop("checked")); }) }) //运动选项必须有选择才能提交,js里,表单对象有提交事件,jq里,表单对象有提交行为 $("#send").click(function () {//此处是一个普通按钮 let length = $(":checkbox[name='items']:checked").length;//筛选选择的 if (length === 0){ let newP = $("<p></p>"); newP.css("color","red"); newP.text("必须选择一个!"); newP.insertBefore($("#CheckedAll"))//插入 }else{ //表单提交 $(this).parent().submit(); } })
-
-
删除
- .empty() 清空标签内容
- .remove() jq里的删除行为, 将该元素删除
replace() 替换
-
replaceAll(选择器/jq对象/js对象) 替换所有
-
let $button = $("<button></button>"); $button.css("backgroundColor","#FD1"); $button.replaceAll($("p:even")); -
$("p:first").replaceAll($("p:last"));
-
-
replaceWith() 用…替代
-
let myimg = $("<img/>"); myimg.attr({src:"../img/head.jpg",width:"200",title:"head"}) $("p:eq(1)").replaceWith(myimg);
-
-
保留原本
-
$("p:first").clone().replaceAll($("p:last"));
-
clone() 复制
- 不克隆事件
$("#b0").click(function () {
$("p:first").clone().insertAfter($("img:first"))
})
- 连同事件一起克隆
$("#b0").click(function () {
//克隆一并连同事件一起克隆
$("p:first").clone(true).insertAfter($("img:first"))
})
事件
hover(fun入,fun出)
只有一个fun时则移入移出都为该函数
效果
- fadeIn() fadeOut()
$("button:first").hover(
function () {
$("#d1").fadeIn(800)
},
function () {
$("#d1").fadeOut(800)
}
)
- animate()
$("button:first").hover(
function () {
let props = new Object();
props.left = "-=100";
props.width = "-=20"
props.borderRadius = "+=200"
$("#d1").animate(props,3000)
}
)
补充
$("#addUser").click(function () {
//接收
let nameV = $("#name").val();
let emailV = $("#email").val();
let telV = $("#tel").val();
//创建tr,td
let newTr = $("<tr></tr>");
let nameTd = $("<td></td>");
nameTd.text(nameV);
let emailTd = $("<td></td>");
emailTd.text(emailV);
let telTd = $("<td></td>");
telTd.text(telV);
let aTd = $("<td></td>");
let a = $("<a></a>");
a.attr("href","javascript:void(0)")//特殊的写法:表示什么都不做
a.text("Delete");
a.click(function () {
let b = confirm("你确定要删除:"+nameV+"的记录吗?");
if (b) {
//jq里的删除行为, remove() 将匹配的元素删除
newTr.remove();
}
})
aTd.append(a);
newTr.append(nameTd);
newTr.append(emailTd);
newTr.append(telTd);
newTr.append(aTd);
$("#usertable tbody").append(newTr);
})
在您提供的代码片段中，您使用了 jQuery 来动态地向表格中添加新行，并为每行中的 “Delete” 链接分配了一个点击事件处理程序。当您添加多行数据时，程序能够准确地定位并删除特定行，是因为每个 “Delete” 链接的点击事件处理程序是在其被创建时绑定到特定的表格行（<tr>）上的。
以下是几个关键点解释为什么能准确删除特定行：
-
事件委托: 您使用了事件委托，也就是将点击事件绑定到父元素（这里是
<tbody>）上，然后通过事件冒泡来处理点击。但是，在您的代码中，实际上是直接在创建的<a>元素上绑定了点击事件。 -
闭包: 当您为 “Delete” 链接创建点击事件时，它实际上是在一个闭包内。闭包可以访问它被创建时的词法环境，这意味着它可以访问到当时存在的局部变量，比如
newTr。let a = $("<a></a>"); a.click(function () { // 这个函数可以访问它创建时的 newTr 变量 newTr.remove(); }); -
DOM引用: 在闭包中，
newTr引用的是创建它的<tr>元素。当点击事件发生时，事件处理函数仍然可以访问这个引用，并且可以调用.remove()方法来从 DOM 中删除它。 -
动态创建元素: 虽然您动态地创建了多个行和链接，但每个链接都绑定到它所在的那一行。因此，当您点击 “Delete” 链接时，事件处理程序只与它直接相关的行交互。
总之，当用户点击 “Delete” 链接时，事件处理程序通过闭包正确地找到并删除了它所附加的行，而不是其他的行。这是因为在事件绑定和执行时，JavaScript 的闭包机制保持了正确的元素引用。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
