jQuery_学习笔记，家中常备

我会带着你远行 2023-06-16 14:52 11阅读 0赞

## 最最最基本的使用 ##

**获得/更改双标记标签中的内容**

$("span").text();
    $("span").text("abc");

**获得/更改单标记标签中内容**

$("input").val();
    $("input").val("abc");

**数组的each遍历**

var arr=$(...);
    arr.each(function(){
        
    	//each one does something...
    })

# 选择器 #

**css的选择器**

$("#id")	//id选择器
    $(".class")	//class选择器
    $("p")		//标签选择器
    $(".class,p")	//组合选择器
    $("p span")	//包含选择器
    $("a:hover")	//伪类选择器

**同辈选择器**

$(...).prevAll()	//获得该元素之前的所有同辈元素
    $(...).prevAll(...)	//获得该元素之前的所有指定同辈元素
    $("...~...")			//获得该元素之后的所有指定同辈元素

**索引选择器**

$(...).first();		//获得选中元素中的第一个
    $("...:first");		//同上
    //last()	:last同理
    $(...).eq(index);	//获得选中元素指定索引元素
    $(...:eq(index));
    //gt(index) :gt(index) lt(index) :lt(index)同理

**input标签type属性选择器**

$(":text")
    $(":button")
    ...

**属性选择器**

$("[value=...]")

**父子标记选择器**

$(...).parent()		//获得父标记
    $(...).parents()	//获得所有祖先标记
    $(...).parents(...)	//获得指定祖先标记
    $(...).children()	//获得子标记
    $(...).find()		//获得所有子孙标记
    $(...).find(...)	//获得指定子孙标记
    $("...:parent")		//获得身为父标记的某元素

# 事件 #

//一般格式
    $(function(){
        
    	$(...).click(function(){
        
    		//do something
    	})
    })
    //常用事件
    //blur 		当输入域失去焦点时
    //change	当text textarea select元素发生改变时
    //click		点击时
    //dblclick	双击时
    //focus		获得焦点时
    //hover		当鼠标指针悬停在被选元素上时要运行的两个函数。
    //			方法触发 mouseenter 和 mouseleave 事件。
    //			注意: 如果只指定一个函数，则 mouseenter 和 mouseleave 都执行它。
    //keydown	键被按下的过程
    //keypress	键被按下
    //keyup		键被松开
    //mousedown	按下鼠标左键
    //mouseup	鼠标左键松开
    //mouseenter	鼠标进入
    //mouseleave
    //mouseover		鼠标进入子元素也执行一次
    //mouseout
    //mousemove	在元素中移动即触发，慎用
    //on		适用当前及未来元素
    	$(...).on("event",function(){
        
    
    	})
    //scroll	触发滚动
    //select	text textarea中文本被选中时触发
    //submit	form表单提交时触发
    //绑定多个事件：
    $(...).on({
        
    	"event1":function(){
        
    	},
    	"event2":function(){
        
    	},
    })

# HTML CSS方法 #

addClass() 	方法向被选元素添加一个或多个类名。
    before() 	方法在被选元素之前插入指定的内容。
    after() 	方法在被选元素后插入指定的内容。
    append() 	方法在被选元素的内部结尾插入指定内容。
    prepend() 	方法在被选元素的内部开头插入指定内容。
    css() 		方法为被选元素设置或返回一个或多个样式属性。
    prop() 		方法设置或返回被选元素的属性和值。checked selected disabled
    removeProp()方法移除由 prop() 方法设置的属性。
    attr()		方法设置或返回被选元素的属性和值。
    removeAttr() 方法从被选元素移除一个或多个属性。
    remove()	方法删除所有被选元素
    show()		方法显示被选元素
    hide()		方法隐藏被选元素
    index(...)	方法返回某元素在被选元素中的索引

## 下拉列表select-options ##

**获得选中项的内容**

$("select option:selected").text();

**指定选中项**

$("select option[value='...']").prop("selected",true);

## 复选框checkbox ##

**判断复选框是否被选中**

$(":checkbox").prop("checked");
    $(":checkbox").is(":checked");
    //返回true or false

**设置复选框选中、取消选中**

$(":checked").prop("checked",true/false);

## 单选框 radio ##

**获取被选中值**

$(":radio[name='...']:checked").val()

## 获取当前时间 ##

//判断是否在前面加0
    function getNow(s) {
        
    return s < 10 ? '0' + s: s;
    }
    
    var myDate = new Date();             
    
    var year=myDate.getFullYear();        //获取当前年
    var month=myDate.getMonth()+1;   //获取当前月
    var date=myDate.getDate();            //获取当前日
    
    
    var h=myDate.getHours();              //获取当前小时数(0-23)
    var m=myDate.getMinutes();          //获取当前分钟数(0-59)
    var s=myDate.getSeconds();
    
    var now=year+'-'+getNow(month)+"-"+getNow(date)+" "+getNow(h)+':'+getNow(m)+":"+getNow(s);

## 设置输入框只读或不可用 ##

$('input:text').attr("disabled","disabled");//设为不可用
    $('input:text').removeAttr("disabled");   //取消不可用的设置
    $('input:text').attr("readonly","readonly");//设为只读
    $('input:text').removeAttr("readonly");//取消只读的设置