jquery技巧小结

Posted 2020-09-23

由于主要还是负责后端，所以前端很多东西都不熟悉，jQuery作为web开发必备技能，有很多知识点，老是记不清楚，所以在这边整理一下。

1.加载页面后执行

$(function(){
    //程序段
})

2.点击事件

$("#xxx").click(function(){
        //程序段
    })

3.给元素添加class,或者改变class

$("#xxx").addClass("class1");

//点击时候改变样式
$("#aaa").click(function() {
     $("#xxx").toggleClass("class1");
  });

 

4.给元素的css，html属性赋值

$("#xxx").css("display","block");

$("#xxx").html("this is html<br/> this is html");

5.获取一个jquery元素

var a=$("#xxx");//获取id为xxx的jquery对象
var b=$(".xxx");//获取class为xxx的jquery对象

6.获取对象的值

$(".xxx").val();//文本框或者下拉框的值
$(".xxx").html();//对象的html内容
var sex=$("#radio1").is(":checked")?"男":"女";//radio1的值
var marry=$("#checkbox1").is(":checked")?"已婚":"未婚";//复选框的值

7.选择器

//基本选择器
$("#table1 tr:nth-child(even)").addClass("trOdd");
$("#divOne").val()//ID为divOne的元素
$(".divOne").val()//class为divOne的元素
$("div span").val()//div下的span元素,注意是空格隔开，表示下级元素
$(".class1 .class2").val()//class为class1下的class为class2的元素，同上
$("#divClass,span").val()//id为divClass或者span元素，都逗号表示或的关系
//层次选择器
$("div span").val();//div下的所有span,祖先跟后代关系，不管是几层嵌套，反正只要是div下的span都选择
$("div>span").val();//div下第一层的span，父子关系，注意只选中第一层span。
$("#divMid + div").val();$("#divMid").next("div").val();//id为divMid的下一个div元素
$("#divMid ~ div").val();$("#divMid").nextAll("div").val();//id为divMid后面的所有div元素
$("#divMid").siblings("div").val();//id为divMid的相邻的div元素