jquery的相关属性值和选择器

71 阅读1分钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="addr/js/jquery.min.js"></script>
</head>
<body>
<button class="add">add</button>
<input type="checkbox" name="isremenber">

<div id="demo"></div>
<script>
// let _={
// age:20,
// noConflict(){
// _=undefined
// return this
// }
// }
// let a=_.noConflict()
// console.log(a.age);
// console.log();
//让出$变量名,返回自身对象,相当于重命名
// let j=$.noConflict()
// j('#demo').css('color','red')
// console.log($);
// function $(){
// console.log(1);
// }
// $()
// $.ajax=function(){
// console.log(2);
// }
// $.ajax()
$(function(){
//给jquery扩展实例方法
$.fn.extend({
red(){
this.css('color','red')

}
})
//给jquery扩展静态方法
$.extend({
yellow(){
console.log('yellow');
}
})
$('#demo').red()
$.yellow()
$('[name="isremenber"]').attr('data-a',10)//attributes 设置行定义属性
// $('[name="isremember"]').prop('check',true)//properties 设置原生属性
$('loginbtn').click(function(){
console.log($(this).css('color'));
console.log($('#demo').attr('data-age'));
console.log($('#demo').data('age'));
console.log($("#demo").data());
console.log($('[action-type="del"]').html());//标签 text()文本
console.log($('[name="isremember"]').attr('data-a'));
console.log($('[name="isremember"]').prop('checked'));//获取原生属性
console.log($('#demo').toggleClass());
console.log($('#demo').hasClass());
console.log($('#demo').removeClass());
})
$('#demo').html(`<h1>aaa</h1>`)
$('#demo').text(`<h1>aaa</h1>`)
$('#demo').insertBefore(`<h1>aaa</h1>`)
$('#demo').insertAfter(`<h1>aaa</h1>`)
$('#demo').append(`<h1>aaa</h1>`)
$('#demo').appendTo(`<h1>aaa</h1>`)
$('#demo').prepend(`<h1>aaa</h1>`)
$('#demo').prependTo(`<h1>aaa</h1>`)
})
</script>
</body>
</html>