jQuery

jQuery入口函数

  $(function(){
	  
  })

解决冲突

  jQuery.noConfict();
  (function($){
	  $(function(){
		  $('#box').css('color','red');
	  })
  })(jQuery);

基础选择器, 选中当前元素 返回一个 jQuery对象。

   //id 选择器       $('#p1');
   //class选择器     $('.box');
   //后代            $('.box #p1')    $('.box li')
   //子代            $('.box>ul>li')
   //+  prev+next    $('.item1 +li');
   //组合            $('p,ul,li');

过滤选择器，属性选择器

  // 过滤选择器
  //                $('ul li:first');
  //                $('ul li:last');
  //                $('ul li:not(.item2)');
  //                $('ul li:even');
  //                $('ul li:odd');
  //                $('ul li:eq(0)').text();
  //                $('ul li:gt(0)').text();
  //                $('ul li:lt(2)').text();
  // 内容过滤选择器
  // $('ul li:contains(张三)');
  // $('ul li:empty');
  // $('ul li:hs(h4)').addClass('a'));
  // $('.box p:hidden');
  // $('.box p:visible');
  // $('input[type=text]'); $('input[type=password]');
  // $('input:text');
  // $('input[type=button]').click(function(){
       alert(111);
  //});

HTML DOM 插入节点

  $(function(){
	  var h3Tag = document.createElement('h3');
	  h3Tag.innerText='alex';
	   var htmlStr='<h3>hello world<h3>'
	   $('.box').append(htmlStr);
	   $('.box').append(h3Tag);
	   // 如果是网页中的元素，那么是一种移动现象。
	   $('.box').append($('h3'));
	   $('h3').css('color','red');
	   $('<h4>老村长</h4>').appendTo('.box');
	   $('h4').css('color','green');
	   $('<h4>老村长</h4>').appendTo('.box').css('color','green').click(function(){
		    alert(this);   $(this).text();
	   })
	   $('.box').prepend('<a href='#'>百度一下</a>');
	   $('<a href='#'>百度一下2</a>').prependTo('.box');
	   $('h3').after('<h1>wusir</h1>');
	   $('<h1>wusir</h1>').insertAfter('h1');
  })

HTML DOM 删除节点

 $('.wrap button').click(function(){
	 //即删除节点，又删除节点上的事件。
	 var btnJq=$(this).remove();  
	 $('.box').prepend(btnJq);
	 $('.wrap').append($(this).remove());
	 //删除节点，不删除节点上的事件。
	 $(this).detach();
	 //清空
	 $('.box').empty();
	 $('.box').text();
	 $('.box').html(); $('.box').html('');
 })

DOM 操作克隆节点

  $('.clone ul li').click(function(){
	  $(this).clone().appendTo('.clone ul');
  })

DOM 替换和包裹节点

   $('.replace p').replaceWith('<i>hello</i>');
   $('<i>hello</i>').replaceAll('p');
   $('.replace p').wrap('<div class="box"></div>');
   $('.replace p').unwrap();
   $('.replace p').wrapInner('<strong></strong>');
   

属性操作

 $(function(){
	 // 设置单个属性值
	 $('div').attr('id','box');
	 $('div').attr({id:'box',title:'盒子'});
	 $('div').attr('class');
	 setTimeout(function(){
		 $('img').attr({
			 src:"01.png";
			 alt:'美女';
		 })
	 },2000)
 })

类操作

 $(function(){
	 var isRed = true;
	 $('.box').click(function(){
		 $(this).toggleClass('active');
		 <!-- if(isRed){
			 $(this).addClass('active');
			 isRed = false;
		 }else{
			 $(this).removeClass('active');
			 isRed = true;
		 } -->
		 if(!$(this).hasClass('active')){
			 $(this).addClass('active');
		 }else{
			  $(this).removeClass('active');
		 }
		 $(this).addClass('active a b');
	 })
 })

值操作

 $(function(){
	 $('#content ul li:first').html();
	 $('#content ul li').html(`<h3>美女和野兽</h3>`);
	 $('#content ul li').append(`<h3>美女和野兽</h3>`);
	 $('#content ul li').html(`<img src="./timg.jpg"> <p>小马哥</p><h3>美女和野兽</h3>`);
	 $('#content ul li').text(); //仅仅获取文本值
	 $('input[type=text]').val();
	 $('input[type=text]').val('帅哥');
	 $('#single').val('香蕉');
	 $('#multiple').val(['香蕉','橘子']);
	 $('#multiple').val(['B','0']);
	 $('input').val(['B','女']);
 })

筛选的方法

 $(function(){
	 $('.box').children();
	 $('.box').next();   $('.box').prev();
	 $('ul li').parent(); $('ul li').parents();
	 $('ul li').eq(2).css('color','red'); 
 })

siblings方法 除选中元素的兄弟元素

  $('button').click(function(){
	  $(this).css('backgroundColor','red').siblings('button').css('backgroundColor','#fff');
      $(this).css('backgroundColor','red').parent().siblings('li').children().css('backgroundColor','#fff');
  })

CSS 的 DOM

$(function(){
	$('.box').css('color');
	//设置值
	$('.box').css('color','red');
	$('.box').css('font-size',20);
	$('.box').css({
		color:'red',
		fontSize:20
	})
	//获取当前窗口相对偏移，里面保存着 top,left
	var offset=$('p').offset();
	$('window').scroll(function(){
		var scrollTop = $(this).scrollTop();
		if(scrollTop > offset.top){
			console.log('导航条该出现了');
			$('.fixHeader').fadeIn();
		}else{
			$('.fixHeader').fadeOut();
		}
	})
})

盒子 宽高

  $('.box').css('width');
  $('.box').width();
  $('.box').innerWidth(); $('.box').outerWidth();

jQuery事件

  $(function(params){
	  $('#box').click(function(){
		  $(this).click(function(){
			  $(this).text();
			  $(this).hide(1000,function(){
				  
			  });
		  })
	  })
  })