jQuery学习

1.在页面中引入jQuery

<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>

敲src再按Enter键即可快速联想上述代码

2.获取表单元素的value属性值

<input type="text" id="count" value="0" />
$("#count").val()

3.获取非表单元素内容的值

<h1 id="title">今天学习jquery</h1>
$("#title").text()

4.获取HTML代码

<span id="ex"><font size="7" color="red">我要努力！！</font></span>
$("#ex").html()

5.隐藏某个元素

<div id="div1"></div>
$("#div1").hide(1000) //1000毫秒后隐藏

6.显示某个元素

<div id="div1"></div>
$("#div1").show(1000)//1000毫秒后显示

7.显示或隐藏某个元素（来回切换）

<div id="div1"></div>
$("#div1").toggle()

8.设置布尔属性的值

//给真假属性赋值
$("#ck”").prop("checked",false)//true,false

//取真假属性
let c=$("#ck").prop("checked")//true,false

9.设置非布尔属性的值

//取非真假属性赋值
$("#ck").attr("name","阿波罗")

//取非真假属性
let c=$("#ck").attr("name")//h001

10.迭代函数，相当于循环

//jq的each
$.each(a,function(index,obj){
	console.log(obj,index)
})

11.点击事件

<input type="button" id="addRow" value="添加商品" />
$("#addRow").clik(function(){
				
})

12.keyup、keydown事件(按键按下，弹起)

<td><input type="text" id="count" value="0" /></td>
//id=count注册事件
$("#count").keyup(function(){
	getTotal()
})

13.变换事件change

$("#count").change(function(){
	getTotal()
})

14.鼠标移入移出事件

$("p").mouseover(function(){
   $("p").css("background-color","yellow");
 });
$("p").mouseout(function(){
  $("p").css("background-color","lightgray");
});

15.删除（添加）一个类

$(selector).toggleClass(class)：
//如果存在（不存在）就

16.被选元素的轮流的click事件

//id=div1注册用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的click事件		
$("#div1").toggle(
function(){
	$(this).removeClass("aa").addClass("bb")
},
function(){
	$(this).removeClass("bb").addClass("aa")
}
)

17.$和jQuery是同等效力
18.jQuery如何对select下拉列表取值

let value=jQuery("#edu option:selected").val()
let text=$("#edu option:selected").text()

19.jQuery中eq是一个方法，用于选择匹配到的元素集合中指定索引位置的元素，作用是通过指定元素的索引值来获得对应的 DOM 元素，并将它包装为 jQuery 对象返回。

$("p").eq(1).css("background-color","yellow");

20.页面加载事件

//jq页面加载事件:相当于js的onload事件
//jq中页面加载事件能写多个.js中onload只有一个.
//格式 $(function(){})
$(function(){
	//代码初始化的
	//格式 $("选择器").事件名(function(){})
	//给id=show注册事件
	$("#show").click(function(){
		$("#div1").show()
	})
	//给id=hide注册事件
	$("#hide").click(function(){
		$("#div1").hide()
	})

})

$(document).ready(function() {})

21.添加一行

//把tr添加到id=goodslist中,在末尾添加一行
$("#goodslist").append(tr)

22.正则匹配

let price=$("#price1").val()
f(!price.match(reg_value))
{
	$("#price1").val(0)
}

23.同一批类的选择器处理

//匹配id=row1 下的所有td元素.取几个匹配的元素
let index1=$("#row"+index+" td").eq(0).text()

24.表格删除一行

//删除一行
$("#row"+index).remove()

25.匹配被选中的

男<input type="radio" value="男"  name="xb" checked/>
女<input type="radio" value="女" name="xb" />
//匹配所有的input元素name=xb,被 选中的,取value属性的值
let xb=$("input[name=xb]:checked").val()

26.数组添加元素

let ids=[]
ids.push($(this).val())