jQuery加载，jQuery选择器，选择集转移 jQuery样式操作，click事件，jQuery索引值，jQuery做选项卡，jQuery属性操作

jQuery加载

// alert($);$是jQuery标志 function(a,b){

// return new n.fn.init(a,b)

// } jQuery的构造函数

//原生js写法页面所有节点加载完渲染完

// window.onload = function () {

// var div = document.getElementById('div');

// alert(div.innerHTML);// 获取标签里的东西这是一个div元素

// };

//jQuery的完整写法页面所有节点加载完

// $(document).ready(function () {

// var $div = $('#div');

// alert('jquery:' +$div.html);

// })//实际开发中用ready 不用onload

//简写方法

$(function () {

var $div = $('#div');

alert($div.html() + '简写');//

})//一般用简写

</script>

jQuery选择器

#div1{

color: red;

}

.box{

color: green;

}

.list li{

margin-bottom: 10px;

}

</style>

$(function () {

$('#div1').css({color:'pink'});

$('.box').css({fontSize:'30px'});

$('.list li').css({

backgroundColor:'green',

// color: '#fff',

// fontSize: '20',

// marginBottom:'10px',

});

})

</script>

<body>

<div id="div1">这是一个div元素</div>

<div class="box">这是第二个div元素</div>

</ul>

</body>

选择集转移

// $('div').prev('p'); //选择div元素前面的第一个p元素

// $('div').prevAll('p'); //选择div元素前面所有的p元素

// $('div').next('p'); //选择div元素后面的第一个p元素

// $('div').nextAll('p'); //选择div元素后面所有的p元素

// $('div').closest('form'); //选择离div最近的那个form父元素

// $('div').parent(); //选择div的父元素

// $('div').children(); //选择div的所有子元素

// $('div').siblings(); //选择div的同级元素

// $('div').find('.myClass'); //选择div内的class等于myClass的元素

jQuery样式操作

$(function(){

console.log($('.div1').css('fontSize'));//16px

$('.div1').css({backgroundColor:'red'});

$('.div1').addClass('big');//添加行间样式

$('.div1').removeClass('div1');//移除行间样式

})

</script>

click事件

$(function(){

$('#btn').click(function () {

$('.box').toggleClass('sty');//切换行间样式有就删没有就加

})

</script>

jQuery索引值

$(function(){

$('.list li').click(function () {

// alert(this.innderHTML);//原生的不能获取索引值

alert($(this).index());

// 都是指当前所点的li $this是封装好的

})

</script>

jQuery做选项卡

$(function(){

$('#btns input').click(function () {

// alert(this);

$(this).addClass('cur').siblings().

removeClass('cur');

alert($(this).index());

$('#contents div').eq($(this).index()).//eq = 内容区对应的

addClass('active').siblings().removeClass('active');

//添加激活的样式点击哪个按钮对应索引的内容会出现

})

</script>

jQuery属性操作

$(function(){

//innerHTML --> html()

console.log($('.box').html());//这是一个div元素

$('.box').html('<a href="http://www.baidu.com">百度网</a>');//不传值就是读传值就是写

$('.box').attr({title:'这是一个div!'});

//console.log($('.box').attr('class'));//box

var $src = $('#img1').attr('src');

//alert($src);//imhh/2.jpg

$('#img').attr({src:'img/1.jpg',alt:'啦啦啦'});//important 机试会考

alert($('#check').prop('checked'));//Flase

$('#check').prop({checked:true});//prop看这是的值是true还是false

// alert($('.box2').html());//<span>这是div元素里的值</span> 有标签

alert($('.box2').text());//这是div元素里的span 纯文本

})

</script>

最后编辑于：2020.01.03 08:29:11