js教程：https://www.w3school.com.cn/js/index.asp
jQuery教程：https://www.w3school.com.cn/jquery/index.asp
以下是部分代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript</title>
<!--必须使用完整<script></script>标签独立引入-->
<script src="js/jquery-3.7.0.min.js"></script>
<script>
function btnclick1() {
alert("ceshi... : " + arguments.length + " : " + typeof (arguments) + " : " + arguments[0]);
}
function btnclick2(obj) {
alert(obj.value);
}
//@1 是 @2 的基础 ， @2是@3的基础 （此处只为记录，未调试参数）
//@1 原⽣的JS实现⽅式
function xmlhttpFun() {
//1.创建核⼼对象
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//2. 建⽴连接
/*
参数：
1. 请求⽅式：GET、POST
* get⽅式，请求参数在URL后边拼接。send⽅法为空参
* post⽅式，请求参数在send⽅法中定义
2. 请求的URL：
3. 同步或异步请求：true（异步）或 false（同步）
*/
//4.接受并处理来⾃服务器的响应结果
//获取⽅式 ：xmlhttp.responseText
//什么时候获取？当服务器响应成功后再获取
//当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。
xmlhttp.onreadystatechange = function () {
//判断readyState就绪状态是否为4，判断status响应状态码是否为200
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//获取服务器的响应结果
var responseText = xmlhttp.responseText;
alert(responseText);
}
}
xmlhttp.open("GET", "ajaxServlet?username=tom", true);
//3.发送请求
xmlhttp.send();
}
//@2 使用$.ajax 参考地址：https://www.w3school.com.cn/jquery/ajax_ajax.asp
function ajaxFun() {
//使⽤$.ajax()发送异步请求
$.ajax({
url: "ajaxServlet", // 请求路径
type: "POST", //请求⽅式
//data: "username=jack&age=23",//请求参数
data: {"username": "jack", "age": 23},
/*
可⽤值:
"xml": 返回 XML ⽂档，可⽤ jQuery 处理。
"html": 返回纯⽂本 HTML 信息；包含的 script 标签会在插⼊ dom 时执⾏。
"script": 返回纯⽂本 JavaScript 代码。不会⾃动缓存结果。除⾮设置了 "cache" 参数。注意：在远程请求时(不在同⼀个域下)，所有 POST 请求都将转为 GET 请求。（因为将使⽤ DOM 的script标签来加载）
"json": 返回 JSON 数据 。
"jsonp": JSONP 格式。使⽤ JSONP 形式调⽤函数时，如 "myurl?callback=?" jQuery 将⾃动替换 ? 为正确的函数名，以执⾏回调函数。
"text": 返回纯⽂本字符串
*/
dataType: "text",//设置接受到的响应数据的格式
success: function (data) {
alert(data);
},//响应成功后的回调函数
error: function () {
alert("出错啦...")
},//表示如果请求响应出现错误，会执⾏的回调函数
});
}
//@3 使用$.get() 参考地址：https://www.w3school.com.cn/jquery/ajax_get.asp
function getFun() {
$.get(
"ajaxServlet",
{username: "woniu"},
function (data) {
alert(data);
}
);
}
//@3使用$.post() 参考地址：https://www.w3school.com.cn/jquery/ajax_post.asp
function postFun() {
$.post(
"ajaxServlet",
{username:"woniu"},
function(data){
alert(data);
}
);
}
//javascript 原生获取element示例
window.onload = function () {
// 1. 通过id属性值获取element
//var js_btn = document.getElementById("btn_Id1");
// js_btn.onclick=btnclick1;
// 2. 通过classname属性值获取element
// var elemAry = document.getElementsByClassName("btn_class1");
// elemAry[0].onclick=btnclick1;
// 3. 通过name属性值获取element
// var elemAry = document.getElementsByName("btn_name1");
// elemAry[0].onclick=btnclick1;
// 4. 通过标签名获取element
// var elemAry = document.getElementsByTagName("button");
// elemAry[0].onclick=btnclick1;
}
//jQuery选择器 获取element示例
$(function () {
//jQuery选择器：https://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
// 规则： $("css选择器")
// $("#btn_Id1") //通过id 属性值获取
//通过类获取
// $(".btn_class1").first().click(btnclick1);
//通过标签名获取
// $("button").first().click(btnclick1);
//属性获取
// $("[name='btn_name1'][value='测试btn1']").first().click(btnclick1);
})
//等价 $(function (){})
$(document).ready(function () {
// $("#btn1").click(btnclick1);
})
//---------window.onload 与 --$(function (){})比较---------------------------------
// window.onload=function () {
// $("#btn1").click(function () {
// alert("132");
// });
// }
// 定义多次，后⾯的会覆盖前⾯的
// window.onload=function () {
// $("#btn1").click(function () {
// alert("abc");
// });
// }
//-----------------------------------------------
// $(function () {//dom⽂档加载完成之后，执⾏其中的代码
// $("#btn1").click(function () {
// alert("234");
// });
// });
// //可以定义多次 定义几次弹几次，不会覆盖
// $(function () {
// $("#btn1").click(function () {
// alert("456");
// });
// });
//--------javascript 与 jQuery---操作细节比较------------------
$(function () { //此处使用jquery方式
var js_span2 = document.getElementById("span_Id2");
var jq_span2 = $("#span_Id2");
//获取/设置元素的标签体纯⽂本内容
$("#btn_Id3").click(function () {
//获取
console.log(js_span2.innerText);
//修改
js_span2.innerText = "js新的文字";
});
$("#btn_Id4").click(function () {
//获取
console.log(jq_span2.text());
//修改
jq_span2.text("jq新的文字");
});
//获取/设置元素的标签体内容
$("#btn_Id5").click(function () {
//获取
console.log(js_span2.innerHTML);
//修改
js_span2.innerHTML = "<small>变成small标签</small>";
});
$("#btn_Id6").click(function () {
//获取
console.log(jq_span2.html());
//修改
jq_span2.html("<big>变成big标签</big>")
});
//属性设置对比
$("#btn_Id7").click(function () {
//获取
console.log("attribute:" + js_span2.getAttribute("style"));
//修改
// js_span2.setAttribute("style","color:red");
js_span2.style = "color:red";
});
$("#btn_Id8").click(function () {
/*
* jQuery认为：attribute的checked、selected、disabled就是表示该属性初始状态的值，property的checked、selected、disabled才表示该属性实时状态的值(值为true或false)。
* 获取和设置disabled、selected、checked这些属性时，应该使⽤prop()⽅法，不要使⽤attr()⽅法！！能够⽤prop()操作的尽量⽤prop()操作，不要⽤attr()操作
* */
console.log("attr:" + jq_span2.attr("style") + " prop:" + jq_span2.prop("style"));
//----------通用属性操作
// jq_span2.attr("style","color:blue");
// jq_span2.removeAttr("style");//删除属性
// jq_span2.prop("style","color:blue");
// jq_span2.removeProp("style");//删除属性
alert($("#select2").prop("selected"));
alert($("#select2").attr("selected"));
//-------css属性操作------------
// jq_span2.css("color","red");//css()处理样式信息
/*-------class属性操作------------------
* addClass():添加class属性值
* removeClass():删除class属性值
* toggleClass():切换class属性
* toggleClass("one"):判断如果元素对象上存在class="one"，则将属性值one删除掉。 如果元素对象上不存在class="one"，则添加
* */
jq_span2.toggleClass("one");
});
//过滤选择器
// 选择器：https://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
// 更多详细过滤器查看：https://www.jquery123.com/
/*
* 1. ⾸元素选择器
语法： :first 获得选择的元素中的第⼀个元素
2. 尾元素选择器
语法： :last 获得选择的元素中的最后⼀个元素
3. ⾮元素选择器
语法： :not(selector) 不包括指定内容的元素
4. 偶数选择器
语法： :even 偶数，从 0 开始计数
5. 奇数选择器
语法： :odd 奇数，从 0 开始计数
6. 等于索引选择器
语法： :eq(index) 指定索引元素equals
7. ⼤于索引选择器
语法： :gt(index) ⼤于指定索引元素greater than
8. ⼩于索引选择器
语法： :lt(index) ⼩于指定索引元素 less than
9. 标题选择器
语法： :header 获得标题（h1~h6）元素，固定写法
表单过滤选择器
1. 可⽤元素选择器
语法： :enabled 获得可⽤元素
2. 不可⽤元素选择器
语法： :disabled 获得不可⽤元素
3. 选中选择器
语法： :checked 获得单选/复选框选中的元素
4. 选中选择器
语法： :selected 获得下拉框选中的元素
* */
$("#btn_Id9").click(function () {
// alert($("button:first").text());
// alert($("button:last").text());
// alert($("#select_Id1 option:selected").val());
// alert($("#select_Id1").select().val());
alert($("#select_Id1:enabled").val());
// alert($("#select_Id1:enabled").first().val());
});
//crud操作
/*
1.append():⽗元素将⼦元素追加到末尾
对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾
2.prepend():⽗元素将⼦元素追加到开头
对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头
3.appendTo():
对象1.appendTo(对象2):将对象1添加到对象2内部，并且在末尾
4.prependTo()：
对象1.prependTo(对象2):将对象1添加到对象2内部，并且在开头
5.after():添加元素到元素后边
对象1.after(对象2)： 将对象2添加到对象1后边(外部)。对象1和对象2是兄弟关系
6.before():添加元素到元素前边
对象1.before(对象2)： 将对象2添加到对象1前边（外部）。对象1和对象2是兄弟关系
7.insertAfter()
对象1.insertAfter(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系
8.insertBefore()
对象1.insertBefore(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系
9.remove():移除元素
对象.remove():将对象删除掉
10.empty():清空元素的所有后代元素。
对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点
*/
$("#btn_Id10").click(function () {
//javascript 添加element
var txt3 = document.createElement("p"); // 以 DOM 创建新元素
txt3.innerHTML = "以 DOM 创建新元素";
var elementById = document.getElementById("div_Id1");
elementById.appendChild(txt3);
// var txt1="<p>以 HTML 创建新元素</p>"; // 以 HTML 创建新元素
// var txt2=$("<p></p>").text("以 jQuery 创建新元素"); // 以 jQuery 创建新元素
// 添加
// $("#div_Id1").append(txt1, txt2);
//清空
// $("#div_Id1").empty();
//移除
// $("#span_Id2").remove("#span_Id2");
});
//遍历 更多遍历：https://www.w3school.com.cn/jquery/jquery_ref_traversing.asp
$("#btn_Id11").on("click", function () {
//jq遍历
var buttons = $("button");
// buttons.each(function (index, element) {
// alert(index + ":" +element.id);
// })
//jq转成js
for (let i = 0; i < buttons.length; i++) {
alert(i + ":" + buttons[i].id);
}
//js转成jq
// var elementsByTagName = document.getElementsByTagName("button");
// $(elementsByTagName).each(function (index, element) {
// alert(index + ":" +element.id);
// })
});
//效果：https://www.w3school.com.cn/jquery/jquery_ref_effects.asp
$("#js_ajax").click(getFun);
});
</script>
</head>
<body>
<select id="select_Id">
<option id="select1" class="select" value="北京">北京</option>
<option id="select2" class="select" value="上海" selected="true">上海</option>
<option id="select3" class="select" value="广州">广州</option>
</select>
<hr/>
<select id="select_Id1">
<option id="select4" class="select" value="张三">张三</option>
<option id="select5" class="select" value="李四" selected="true">李四</option>
<option id="select6" class="select" value="王五">王五</option>
</select>
<hr/>
<div id="div_Id1" class="div_class1">
<span id="span_Id1" class="span_class">测试文字一</span><br/>
<span id="span_Id2" class="span_class" style="color: cadetblue">测试文字二</span><br/>
</div>
<br/>
<button id="btn_Id1" class="btn_class1" name="btn_name1" value="测试btn1">测试摁钮1</button>
<br/>
<button id="btn_Id2" class="btn_class2" name="btn_name2" value="测试btn2">测试摁钮2</button>
<br/>
<hr/>
<button id="btn_Id3">js_innerText</button>
<br/>
<button id="btn_Id4">jq_innerText</button>
<br/>
<hr/>
<button id="btn_Id5">js_html</button>
<br/>
<button id="btn_Id6">jq_html</button>
<br/>
<hr/>
<button id="btn_Id7">js_attr</button>
<br/>
<button id="btn_Id8">jq_attr</button>
<br/>
<hr/>
<button id="btn_Id9">js_filter</button>
<br/>
<button id="btn_Id10">js_crud</button>
<br/>
<button id="btn_Id11">js_serch</button>
<br/>
<button id="btn_Id12">js_ajax</button>
<br/>
<hr/>
</body>
</html>
标签：jQuery,function,示例,对象,js,ajax,span2,alert,选择器 From： https://www.cnblogs.com/ruber/p/17575689.html