jquery技巧小结

2021-07-20 07:05

阅读:525

标签:span   val   空格   dcl   func   知识点   点击   层次选择器   lock   

由于主要还是负责后端,所以前端很多东西都不熟悉,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
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元素

 

jquery技巧小结

标签:span   val   空格   dcl   func   知识点   点击   层次选择器   lock   

原文地址:http://www.cnblogs.com/roy-blog/p/7056942.html


评论


亲,登录后才可以留言!