-
jQuery属性操作
prop()---设置或获取元素固有的属性 attr()---操作元素自定义属性 data()---可以在指定元素上存取数据 (让内容存在 元素的内存中不显示)
-
jQuery操作文本
html()/html('内容') text() val()
-
jQuery元素操作(创建、添加、删除、遍历) ****
jQuery操作文本
<div>
<p>
<span>
span
</span>
</p>
</div>
<input type="text" value="双12" name="" id="">
<script src="./jquery.min.js"></script>
<script>
$(function() {
// 相当于innerHTML
// console.log($('div').html());
// $('div').html('welcome');
// 相当于innerText
//console.log($('div').text());
$('div').text('<p>welcome</p>');
// val() 相当于value
console.log($('input').val());
console.log($('input').val('请输入内容'));
});
</script>
遍历
ele 原生dom元素
$('div').each(function(index,ele) {})
$.each(object,function() {})
遍历操作dom元素
<div>aaaa</div>
<div>bbbb</div>
<div>cccc</div>
<div>dddd</div>
<script src="./jquery.min.js"></script>
<script>
$(function() {
/*
$('div').css('background','red');
*/
var num = 1;
// $("div").each(function(index,ele) {
// // ele 原生dom元素
// console.log(index);
// console.log(ele);
// $(ele).html(num++);
// });
$.each($('div'),function(i,ele) {
console.log(i,ele);
});
$.each([10,20,30],function(i,ele) {
console.log(i,ele);
});
$.each({name: 'n1', age: 22},function(i,ele) {
console.log(i,ele);
});
});
</script>
创建元素
$("<li></li>")
jQuery事件处理
ele.事件(function() {})
<div class="box">
<ul>
<li>item1</li>
</ul>
</div>
<script src="./jquery.min.js"></script>
<script>
$(function() {
// $('.box').click(function() {
// alert('ok');
// });
// $('.box').mouseenter(function() {
// $(this).css('background','red');
// });
/* on() 方法
1 可以绑定多个事件,多个事件多个处理程序
2 实现事件委托
$('.box').on({
click: function() {
alert('ok');
},
mouseenter: function() {
//$(this).css('background','red');
alert('ok');
}
});*/
// $('.box').on('click',function() {
// alert('ok');
// });
/* 直接给子元素注册事件
$('ul li').on('click', function() {
console.log($(this).text());
});
*/
$('ul').on('click', 'li' ,function() {
console.log($(this).text());
});
//$('ul').off(); // 解除ul身上所有的事件
// $('ul').off('click');
$('ul').off('click','li');
$('ul').append($('<li>item2</li>'));
$('ul li').one('mouseenter', function() {
alert(123);
});
});
</script>
- H5 自定义属性一般data-开头
<a href="http://www.baidu.com">百度一下</a>
<input type="checkbox" name="" id="" checked>
<p index='1' data-uname='zs'>p元素</p>
<script src="./jquery.min.js"></script>
<script>
// ele.prop('属性名') 获取
var url = $('a').prop('href');
//属性名的设置
console.log(url);
$('a').prop('target','_blank');
//改变状态会触发,原生js是onChange
$('input').change(function() {
console.log($(this).prop('checked'));
});
console.log($('p').prop('index')); // undefined 只能获取元素固定的属性
console.log($('p').attr('index'));// 1 可以操作元素自定义属性
$('p').attr('class','demo'); //设置属性值
$('p').data('age',22);//存在元素的内存里,显示效果看不到
console.log($('p').data('age'));//获取存入的值
console.log($('p').data('uname')); // 可以读取H5自定义属性data-uname
</script>
创建、添加、删除、遍历
<div class="box">
<ul>
<li>item1</li>
</ul>
</div>
<script src="./jquery.min.js"></script>
<script>
$(function() {
// 创建元素
var oLi = $('<li>item2 动态创建的</li>');
// 添加元素
//$('ul').append(oLi);
//oLi.appendTo($('ul'));
$('ul').prepend(oLi);
var oDiv = $('<div>动态创建的odiv</div>');
$('.box').before(oDiv);
// 删除元素 remove()
//$('ul').remove();
//$('ul').empty();
$('ul').html("");
});
</script>