JQ随笔

jQuery基本

• 1.下载和安装
• 2.Dom对象和jQuery包装集对象
• 3.jQuery选择器
• 4.jQueryDOM
• 5.Jquery事件

1.下载和安装

• 下载

https://jquery.com/download/

• 安装

  <script type="text/javascript" src="js/jquery-3.4.0.min.js"></script>

2.Dom对象和jQuery包装集对象

• 2.1jQuery 包装集|对象

**dom对象**
var divDom = document.getElementById("lifei1");
**jquery包装集对象**
var jqbd = $("#lifei1");
console.log(jqbd);

• 2.2 dom和jq互相转换

dom对象与jquery对象的转换

var domToQuery = $(divDom);
console.log(domToQuery);

var jqToDom = jqbd[0];
console.log(jqToDom);

3.jQuery选择器

• 3.1 基础选择器

//id选择器
var div1 = $("#div1");

//类选择器
var cls = $(".test");

//元素选择器
var divs = $("div");

//通用选择器
var all = $("*");

//组合选择器
var group = $("#div1,span,.test");

• 3.2层次选择器

//后代选择器
var houdai = $("#parent div");

//子代选择器
var zidai = $("#parent > div");

//相邻选择器
var xl = $("#child + p");

//同辈选择
var tb = $(".gray ~ img");

• 3.3表单选择器

表单元素:文本框\密码框\单选框\复选框\文件域\隐藏域\textarea文本域\下拉框select
非表单元素:div\span\p\h1~h6\img\a\table

//表单元素
var inputs= $(":input");
//非表单元素
var inputs= $("div");

• 3.4过滤选择器

//checked 选择所有被选中的元素
//eq(index)匹配指定下标的元素
//gt(index)匹配下标大于指定值的所有元素

var checkboxs2 = $(":checkbox:checked");
var second = $(":checked:eq(0)");
var gtfirst = $(":checkbox:gt(2)");

jQueryDOM

1. 4.1操作元素
2. 4.1.1获取属性

attr(属性名称) 获取指定的属性值，操作 checkbox 时选中返回 checked，没有选中返回 undefined。

$("#ck1").attr("checked");

prop(属性名称) 获取具有 true 和 false 两个属性的属性值 prop(‘checked’)

$("#ck1").prop("checked");

• 4.1.2设置属性

//设置元素的class属性(如果属性不存在,则添加属性)
$("#conRed").attr("class", "red");
//如果属性存在,则修改属性值
$("#conBlue").attr("class","green");
		
//addClass()添加样式,原来的样式保留,如果出现相同的样式,以最后定义的样式为准
$("#conRed").addClass("larger");
	
//添加一个具体样式	css({"样式名":"样式值","样式名2":"样式值2"})
$("#remove").css({"color":"red","background-color":"gray"});

//操作元素的内容
//设置(非表单)元素的内容
//包含的html的标签
$("#html").html("<h3>广州</h3>");
$("#text").text("<h3>北京</h3>");
$("#text").text("北京");
	
//设置表单元素的值
$("input").val("hello");

• 4.1.3移除属性

removeAttr(属性名) 移除指定的属性 removeAttr(‘checked’)

• 4.2操作元素的样式

css({‘样式名’:’样式值’,’样式名 2’:’样式值 2’}) 例：css({"background-color":"red","color":"#fff"});

• 4.3创建元素

$(‘元素内容’);
$(‘<p>this is a paragraph!!!</p>’)

• 4.4添加元素

prepend(content) 在被选元素内部的开头插入元素或内容，被追加的 content 参数，可以 是字符、HTML 元素标记

var parent = $("#parent");
var span = $("<span class='pink'>hkk</span>");
//前追加(追加)
parent.prepend(span);

append在被选元素内部的结尾插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记

var singer = '<span class = "green">歌手</span>'
$(singer).append(parent);

• 4.5删除元素

remove() 删除所选元素或指定的子元素，包括整个标签和内容一起删。

$(".green").remove();

empty() 清空所选元素的内容

$(".blue").empty();

• 4.6遍历元素

each() $(selector).each(function(index,element)) :遍历元素 参数 function 为遍历时的回调函数， index 为遍历元素的序列号，从 0 开始。 element 是当前的元素，此时是 dom 元素。

$(".green").each(function(index,element){
			console.log(index);
			console.log(element);
})

5.Jquery 事件

• 5.1 ready

ready()加载事件
ready()类似于onload()事件
ready()可以写多个,按顺序执行

$(document).ready(function() {
	console.log(1);
});

• 5.2 bind()绑定元素事件

("#btn").bind("click",function(){
	 alert('这是个按钮。。。');
});

//绑定多个
$("#txt").bind("focus",function(){
		console.log("aaa");
}).bind("blur",function(){
		console.log("bbb");
});