jQuery常用事件函数集锦

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").length

21. 移动元素到指定元素后方

//把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"]