1. DOM对象和Jquery对象
<body>
<div id="mydiv1" class="divclass1">文本1</div>
<div id="mydiv2" class="divclass2">文本2</div>
</body>
<script type="text/javascript" src="jquery-3.6.0.js" charset="utf-8"></script>
<script type="text/javascript">
//DOM对象
var divDom=document.getElementById("mydiv1");
//jquery对象
var divJquery=$("#mydiv2");//通过id选择器
//DOM对象->jquery对象
var divDomToJquery=$(divDom);
//jquery对象->DOM对象
var divJqueryToDom=divJquery[0];//通过下表索引
</script>
2. Jquery选择器
2.1 基础选择器
$("#id属性值") id选择器,id="id属性值"
$("元素名称") 元素选择器
$(".class属性值") 类选择器,class="class属性值"
$("*") 通用选择器
$("#id,.class,div") 组合选择器
var j1=$("#mydiv1"); //id选择器
var j2=$("div"); //元素选择器
var j3=$(".divclass2"); //类选择器
var j4=$("*"); //通用选择器
var j5=$("#mydiv1,.divclass2,div"); //组合选择器
2.2 层次选择器
$("#parent div") 后代选择器 选择id为parent的元素的所有div元素,包括第一代第二代等
$("#parent>div") 子代选择器 选择id为parent的直接div子元素,第一代
$(".class+img") 相邻选择器 选择css类为class的下一个img元素,下一个不是则没找到
$(".class~img") 同辈选择器 选择css类为class的之后的img元素
2.3 表单选择器
$(":input") 会匹配所有的input、textarea、select和button元素
$(":text")
$(":password")
$(":radio")
$(":checkbox")
$(":submit")
$(":image")
$(":reset")
$(":button")
$(":file")
3. DOM操作
操作属性:(如果属性类型为boolean(即checked、selected等)则使用prop,否则使用attr)
获取:
attr(属性名)
prop(属性名)
//获取id="aa"元素的name属性值
var name=$("#aa").attr("name");
var name=$("#aa").prop("name");
设置:
attr(属性名,属性值)
prop(属性名,属性值)
//id="aa"元素的name属性值设置为name1
var name=$("#aa").attr("name","name1");
var name=$("#aa").prop("name","name1");
删除:
attr(属性名)
var name=$("#aa").removeAttr("name");//删除id="aa"元素的name属性
4. 元素操作
4.1 操作元素样式
$("#id").addAttr(“class”,“green”)
attr("class") 获取样式名
atter("class","样式名") 设置样式
addClass("样式名") 增加样式
css({'样式名1':'样式值1','样式名2':'样式值2'}) 添加具体行内样式
removeClass(class) 删除样式
4.2 操作元素内容
html() (非表单元素),包含html标签
html("html内容") (非表单元素)
text() (非表单元素)不包含html标签
text("text内容") (非表单元素)
val() (表单元素)
val("元素value值") (表单元素)
创建添加元素:
var p="<p>p</p>";$(p)
prepend(content) 前追加子元素
指定内容.prepend(内容)
$(内容).prependTo(指定元素)
append(content) 后追加子元素
指定内容.append(内容)
$(内容).appendTo(指定元素)
before() 同级之前追加
after() 同级之后追加
删除元素:
remove() 删除元素标签和内容
empty() 清空元素内容
遍历元素:
$(selector).each(function(index,element))
/* function为遍历时的回调函数,
index为遍历元素序列号,从0开始,
element为当前元素,此时为dom元素*/
5. Jquery事件
ready加载事件:
预加载事件,页面dom结构加载完成后执行,类似于load事件。
$(document).ready(function(){}) <==>$(function(){})
bind()绑定事件:
$(selector).bind(eventType[,eventData],handler(eventobject))
/*enentType包括focus,load,mousemove等
handler(eventObject)表示该事件触发执行的函数
$("元素").bind("事件类型",function(){})
$("元素").事件名(function(){})
6. Jquery Ajax
Jquery Ajax:异步、无刷新技术
调用ajax:
$.ajax({
type: 请求方式GET/POST
url: 请求地址
async: 是否异步,默认true表示异步
data: 发送到服务器的数据
dataType: 预期服务器返回的数据类型
contenType: 设置请求头
success: 请求成功时调用此函数
error: 请求失败时调用此函数
})
$.get()
$.post()
$.getJSON()
$.ajax({
type:"get",
url:"data.json",
data:{
userName:"zhangsan"
},
success:function(data){
console.log(data);
//var obj=JSON.parse(data);
//console.log(obj);
var ul=$("<ul></ul>")
for(var i=0;i<data.length;i++){
var user=data[i];
var li="<li>"+user.userName+"</li>";
ul.append(li);
}
$("body").append(ul);
}
});
$.get(
"data.json",
{userName:"zhangsan"},
function(data){
console.log(data);
var ul=$("<ul></ul>")
for(var i=0;i<data.length;i++){
var user=data[i];
var li="<li>"+user.userName+"</li>";
ul.append(li);
}
$("body").append(ul);
})
$.post(
"data.json",
{userName:"zhangsan"},
function(data){
console.log(data);
var ul=$("<ul></ul>")
for(var i=0;i<data.length;i++){
var user=data[i];
var li="<li>"+user.userName+"</li>";
ul.append(li);
}
$("body").append(ul);
})
$.getJSON(
"data.json",
{userName:"zhangsan"},
function(data){
console.log(data);
var ul=$("<ul></ul>")
for(var i=0;i<data.length;i++){
var user=data[i];
var li="<li>"+user.userName+"</li>";
ul.append(li);
}
$("body").append(ul);
})