1.简介
jQuery 是一个 JavaScript 库,它极大地简化了 JavaScript 编程。他们两个可以混合使用,但是要使用jquery必须导入jquery包。
2.引入
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
3.语句
- 获取选择器
//js写法
document.getElementById("xx") // id
document.getElementsByClassName("xx")[0] //classname
document.getElementsByTagName("xx") //tagname
document.getElementsByName("xx") // name
--------------------------------------------------------------------------------
//jquery写法
$("#xx"); //id
$(".xx"); //classname
$("xx"); //tagname
$("[name='xx']"); //name
$('div:empty') // 选择空的div元素
$("div.test"); // div 中class为test的元素
$('.test > div') // 直系后代选择器
$(".test div") // 所有后代选择器
- 操作内容
$a.innerText; // 元素内部文本
$a.innerHTML; // 元素内部内容,可以解析html标签
$a.value; // 表单元素的取值,赋值是:a.value = "aaaa"
--------------------------------------------------------------------------------
$a.text(); // 元素内部文本 赋值是 $a.text("aaaa")
$a.html(); // 元素内部内容,赋值是:$aj.html("<a>123</a>")
$a.val(); // 表单元素的取值,赋值是:$a.val("aaaa")
- 操作样式
a.style.backgroundColor = red; // 设置样式
a.style.color; // 获取样式,只能获取内联样式,也就是写在标签里面的样式
--------------------------------------------------------------------------------
aj.css("color", "yellow"); // 设置样式
aj.css("color"); // 可以获取到内嵌式的样式属性
$('.bb').css({ // 可以同时设置多个样式
backgroundColor: 'red',
width: '200px',
height: '200px'
})
- 显示与隐藏
$a.style.display = 'block';
$a.style.display = 'none';
--------------------------------------------------------------------------------
$(a).show();
$(a).hide();
- jQuery 中的事件
$(".test").click( function(){
alert($(this).text());
});
// 绑定事件,可以同时绑定多个
$(".test").bind("click", function() {
alert($(this).text());
});
// 解除绑定事件
$("#btn").click(function() {
$(".test").unbind("click");
});
// 事件可以在 其他事件内绑定
$("#add").click(function() {
$(".test").bind("click",function() {
alert($(this).text());
})
});
- 追加元素
var new = document.createElement('p')
new.innerHTML = 'p标签内部元素'
a.appendChild(new)
第一种方法
a.append('<p>p标签内部元素</p>')
第二种方法
$('<p>ppaaap</p>').appendTo($('#box'))
// 在元素头部插入内容
a.prepend('<span>内容</span>');
$("<b>Hello World!</b>").prependTo(".p");
- 删除节点
var a = document.getElementsByclassName('class')[0]
a.removeChild(childNode)
--------------------------------------------------------------------------------
// 可以直接移除自身指向的元素
$(".a").remove();
- 清空节点
$a.innerHTML = ''
a.empty() // 清空a元素内部所有节点
- 包裹节点
js 没有此方法
--------------------------------------------------------------------------------
$("p").wrap("<div></div>"); // 将p标签外层都包裹上div元素
$("p").wrapAll("<div class="nnn"></div>") // 将所有匹配的元素用一个元素包裹起来,位置会发生变换
$('ul li').wrapInner("<a href='#1'></a>"); // 将匹配元素的子内容用其他结构化的标记包裹起来
- 获取属性
setAttribute
getAttribute
--------------------------------------------------------------------------------
id='we'
$('p').attr('id'); //获取 p元素的 id 属性;
$('p').attr('id','newId'); //设置p元素的id属性
$('p').attr({'id': 'hhha', 'class':'cls'}) // 同时给p元素设置多个不同属性
- 获取焦点、失去焦点
document.getElementById('id').focus()
document.getElementById('id').blur()
--------------------------------------------------------------------------------
$('#input').focus();
$('#input').blur()
- 其他
a.hasClass('cn1') //检测a元素的class类中是否包含cn1
indexOf includes
//复制
let newP = myP.cloneNode(true) //此时的true表示复制了内容,不写就是只复制标签
$('p').clone(true) //此时的true表示是否连着它的事件也复制