1. 当页面的文档部分加载完毕之后：
$(document).ready(function(){
alert("加载完毕");
});2. 当窗口打开之后：
window.onload=function(){
alert("窗口已打开");
}3. 元素的点击和双击事件
//点击事件
$("a").click(function(){
alert("a被点击了！");
});
//双击事件
$("a").dblclick(function(){
alert("a被双击了");
});4. 元素焦点中和失焦事件
//焦点中
<input type='text' value="" id="aa">
<script>
$('#aa').focus(function(){
alert("我进入输入状态了！");
});
</script>
//失去焦点
<input type='text' value="" id="bb">
<script>
$('#bb').blur(function(){
alert("我不是焦点了！");
});
</script>5. 给元素添加事件处理程序
$("a").bind("click",function(){
alert("a被点击了");
});
//现在常用
$("a").on("click",function(){
alert("a被点击了。");
});6. 监听元素值变化
$("input").change(function(){
alert("文本内容被修了");
});7. 添加选择器和移除选择器
//添加选择器
$("a").click(function(){
$("div").addClass("one");
});
//移除选择器
$("a").click(function(){
$("div").removeClass("one");
});
//增加id属性
$("div").attr("id","idiv");8. 改变元素css样式
//改变单个css属性
$("div").css("background-color","red");
//改变多个css属性
$("div").css({"background-color":"red","margin":"20px"});9. 改变value值
//获取value值
$("input").val();
//改变value值
$("input").val("改变");10. 修改src属性
//获取src值
$("#img").attr("src");
//改变src值
$("#img").attr("src","/1.jpg");11. 其他取值和赋值方法
//取值
$(".abc").text();
$(".abc").html();
$(".abc").val();
$(".abc").attr("href");//获取class为abc的href元素的属性值
//赋值
$(".abc").text("bcd");
$(".abc").html("bcd");
$(".abc").val("bcd");
$(".abc").attr("href","www.12564.cn");
$(".abc").attr({"href":"www.12564.cn","type":"text"});jquery常见取值示例：
// 单选radio标签
<input type="radio" name="gender" value="male" id="maleRadio">
<label for="maleRadio">男性</label>
<input type="radio" name="gender" value="female" id="femaleRadio">
<label for="femaleRadio">女性</label>
//获取radio的值
var selectedValue = $('input[name="gender"]:checked').val();
console.log(selectedValue); // 输出选中的值
------------------------------------------------------------------
// select下拉标签
<select id="mySelect">
<option value="option1">选项1</option>
<option value="option2">选项2</option>
<option value="option3">选项3</option>
</select>
//取select的选项值
var selectedValue = $('#mySelect').val();
console.log(selectedValue); // 输出选中的值
//取select的选项文本
var selectedText = $('#mySelect option:selected').text();
console.log(selectedText); // 输出选项的文本内容
-------------------------------------------------------------------
// 复选框CheckBox
<input type="checkbox" name="hobby" value="reading" id="readingCheckbox">
<label for="readingCheckbox">阅读</label>
<input type="checkbox" name="hobby" value="sports" id="sportsCheckbox">
<label for="sportsCheckbox">运动</label>
<input type="checkbox" name="hobby" value="music" id="musicCheckbox">
<label for="musicCheckbox">音乐</label>
// 获取选中的值，返回数组
var selectedValues = [];
$('input[name="hobby"]:checked').each(function() {
selectedValues.push($(this).val());
});
console.log(selectedValues); // 输出选中的值数组12. 根据name值获取元素
举例：
<input type="text" name="test" value="">
通过name获取input值
$("[name='test']").val();13. 元素值change()事件
举例：
<select class="form">
<option value="1">电话</option>
<option value="2">邮件</option>
<option value="3">微信</option>
</select>
当select值改变时，改变文字颜色为红色
$(".form").change(function(){
$(this).css("color","red");
});
$(this)为当前，如果要选择当前以外的可以用 $(this).siblings()14. 延迟5秒后执行
setTimeout(function (){
alert('5秒后执行');
}, 5000);15. 多个同名class中选中其中一个
//隐藏第二个class="exp";
<div class="exp">内容</div>
<div class="exp">内容</div>
<script>
$(document).ready(function(){
$(".exp:nth-of-type(2)").hide();
});
</script>16. 截取字符串最后1位字符
<script> var lm = "s-select-1"; var zhyw = lm.substr(-1); alert(zhyw);//运行结果弹出1 </script>
17. 当元素值发生改变时
<input type="text" id="wb" value="11">
<script>
$("#wb").bind("change",function(){
alert('它变了！');
});
</script>18. 移动元素到指定元素后面
//把id='aa'移动到id='cc'后面
<p id="aa"><p>
<p id="bb"><p>
<p id="cc"><p>
<script>
$("#aa").insertAfter($("#cc"));
</script>19. 点击元素显示和隐藏
//点击按钮隐藏p，再次点击显示p
<p id="aa">我是内容<p>
<button>显示隐藏</button>
<script>
$("button").click(function(){
$("#aa").toggle();
});
</script>20. 获取子元素的值
//获取子元素和获取子子元素的方法
<p id="aa">
<span>我是第一层子元素 <i>我是第二层</i> </span>
<p>
<script>
//获取子元素
$("#aa").children('span').html();
//获取子子元素
$("#aa").find('i').html();
</script>
说明：
1. children()方法只能获取父元素下最近一层子元素
2. find()方法可以无限循环查找父元素下的子元素，一直到找不到为止。
3. children和find的主要区别在于children只会查找直接子集，而find会向下查找每一层，一直到找不到为止。
4. 两者都可以通过length来获取子元素个数，分别为：$("#aa").children("span").length 和 $("#aa").find("i").length21. 移动元素到指定元素后方
//把aa移动到cc后面
<div id="aa">aa</div>
<div id="bb">bb</div>
<div id="cc">cc</div>
<script>
$("#aa").insertAfter($("#cc"));
</script>22. 延迟几秒执行
//延迟1秒执行函数ff
<script>
function ff(){
window.history.go(-1);
}
setTimeout(ff, 1000);
</script>22. 追加元素
//给元素追加新的子元素
<p>我想多点内容</p>
<ul>
</ul>
<button id="btna">加文本</button>
<button id="btnb">加列表</button>
<script>
$("#btna").click(function(){
$("p").append(" <span>我来了</span>.");
});
$("#btnb").click(function(){
$("ul").append("<li>我来了</li>");
});
</script>
默认append()方法是从元素后面开始追加新的元素，如果要在前面追加可以使用prepend()方法23. 获取元素距离顶部的距离
//焦点中
<p id="aa">我是元素aa</p>
<script>
$('#aa').offset().top;
</script>24. AJAX带参数请求
<!--GET方式请求-->
<div id="my-div">100</div>
<div id="result"></div>
<script>
var num = parseInt($('#my-div').text());
$.ajax({
url: '/path/to/server?num=' + num,
type: 'GET',
success: function(response) {
$('#result').html(response);
},
error: function(xhr, status, error) {
console.error(error);
}
});
</script>
<!--POST方式请求-->
<div id="my-div">
<span id="num1">100</span>
<span id="num2">200</span>
</div>
<div id="result"></div>
<script>
var num1 = parseInt($('#num1').text());
var num2 = parseInt($('#num2').text());
$.ajax({
url: '/path/to/server',
type: 'POST',
data: {
num1: num1,
num2: num2 },
success: function(response) {
$('#result').html(response);
},
error: function(xhr, status, error) {
console.error(error);
}
});
</script>24. 去除数组中的空值
<script>
var array = ["aa", "", "bb", " ", "cc", null, "dd"];
// 使用grep函数过滤数组中的空值
var filteredArray = $.grep(array, function(value) {
// 去除字符串两端的空白字符并判断是否为空值
return $.trim(value) !== "";
});
console.log(filteredArray);
</script>
//输出结果将为：
["aa", "bb", "cc", "dd"]如果内容有帮助，就点个赞吧！