jQuery选择器及常见操作实现方式

jQuery 常见操作实现方式

$(“标签名”) //取html元素 document.getElementsByTagName("")

$("#ID") //取单个控件document.getElementById("")

$(“div #ID”) //取某个控件中 控件

$("#ID #ID") // 通过控件ID取其中的控件

$(“标签.class样式名”) //通过class来取控件

$("#ID").val(); //取value值

$("#ID").val(""); //赋值

$("#ID").hide(); //隐藏

$("#ID").show(); //显示

$("#ID").text(); //相当于取innerText

$("#ID").html(); //相当于innerHTML=""

$("#ID").css(“属性”,“值”) //添加CSS样式

$(“form#表单id”).find("#所找控件id").end() //遍历表单

$("#ID").load("*.html") //载入一个文件

引用资料

javascript与jquery

/* 原生js写法 */
		var btn = document.getElementById('btn');
		btn.onclick = function () {
   
			var div = document.createElement('div');
			div.style.width = '100px';
			div.style.height = '100px';
			div.style.background = 'green';

			document.body.appendChild(div);
		}

/* jQuery的写法 */
		$('#btn').click(function () {
   
			$('div').css({
   
				width: '100px',
				height: '100px',
				background: 'green'
			}).appendTo('body');
		});

//原生转jquery
		$(h1).css('color', 'blue');
//jquery转原生
		$h1[0].style.color = 'purple';

.each()

$.each()是对数组

1. 遍历一维数组

var arr1=['aa','bb','cc','dd'];
$.each(arr1,function(i,val){
    //两个参数，第一个参数表示遍历的数组的下标，第二个参数表示下标对应的值
console.log(i+'```'+val);
//0'''aa
//1'''bb
//2'''cc
//3'''dd

2.遍历二维数组

var arr2=[['aaa','bbb'],['ccc','ddd'],['eee','fff']];
$.each(arr2,function(i,item){
    //两个参数，第一个参数表示下标，第二个参数表示一维数组中的每一个数组
console.log(i+'````'+item);
//0''''aaa,bbb
//1''''ccc,ddd
//2''''eee,fff

3.当二位数组中有json对象时

var arr=[{
   name:'n1',age:22},{
   name:'n2',age:33},{
   name:'n3',age:44}];
        $.each(arr,function(i,val){
   
            console.log(i+'`````'+val);   
　　　　//输出
　　　　// 0`````[object Object] 1`````[object Object] i2`````[object Object]
           

		    console.log(val.name); //获取每一个json里面的name值
            console.log(val["name"]);