jquery基础知识

11.8 jquery笔记

1. jquery和$的关系

1. $是jquery的简写，在编写jquery代码时$可以代替jquery

2.入口函数的多种写法

• // 第一种: 简单易用。 ***
  $(function () {   
      ...  // 此处是页面 DOM 加载完成的入口
  }) ; 
  
  

• // 第二种: 繁琐，但是也可以实现  （ready：准备，dom准备好了）
  $(document).ready(function(){
     ...  //  此处是页面DOM加载完成的入口
  });
  

3.jquery的内容和属性设置的多种语法

3.1 属性设置

3.1.1属性节点操作—attr方法

• 设置属性：attr(属性名，属性值)
• 获取属性：attr(属性名)
• removeAttr()：删除指定的属性

代码演示

$("#change").click(function() {
				//设置图片的src属性
				$('#star').attr("src", "../img/tly.jpg");
				console.log("图片的src:" + $("#star").attr("src"));
				//删除指定属性remark
				$('#star').removeAttr("remark");
				console.log("图片的remark:" + $("#star").attr("remark"));
				 $("#star").attr({
				 	   "title":"大美女",
				 	   "remark":"佟丽娅"
				 })
			});

3.1.2 属性节点操作—prop方法

注意prop主要设置和获取表单元素的checked,disabled,selected属性

• 设置属性 – prop(属性名，值)
• 获取属性-- prop(属性名)

代码演示‘

 $("#sel1").click(function(){
    	 	   //设置"女"被选中
    	 	   $("input[name=sex]:eq(1)").prop("checked",true);
    	 });

3.1.3 属性节点操作—操作class属性

• addClass():给元素添加1个或多个类(class),相当于在元素上写class=“xxx”,参数是类名，如果添加多个类，多个类名之间用空格隔开,当多个类里面有相同样式名，后者的样式值会覆盖前者

  代码演示

$('#sel1').click(function(){
				//给元素添加类boxstyle
				//$("#box").addClass("boxstyle");
				$("#box").addClass("boxstyle boxstyle2");
			});

• removeClass()：从元素上移除一个或多个类，参数是类名(多个类名之间用空格隔开), 如果没有参数表示移除所有的类

  代码演示

  ('#sel2').click(function(){
  				//移除元素上的boxstyle类
  				$("#box").removeClass("boxstyle");
  			});
  

• hasClass():可以用来判断元素中是否含有某个class，有返回true,否则返回false

  if(元素.hasClass(类名)){
  			  	    元素.removeClass(类名)
  			  }else{
  			  	 元素.addClass(类名) 
  			  }
  

• toggleClass():切换被选元素的类，如果元素中有指定的类，就移除，没有就添加该类, 参数也是类名

  $("#sel3").click(function(){
  				 $("#box").toggleClass("boxstyle");
  			})
  

3.2内容设置

3.3.1 input标签内容设置和获取

• .val()是获取里面的值

• .val(内容)是给里面添加值

  代码演示

  <input type="" name="" id="txt" value="" />
  			.$("#id").val()//获取id为txt的值
  

  代码演示

  <input type="" name="" id="txt" value="" />
  			.$("#id").val(11111)//给id为txt的传值
  

3.3.2 div p ul li 等标签的获取

第一种方式 .html()

• .html()是获取里面的值

• .html(我是值)是给里面添加值

  代码演示

  <div id="box">
  				
  			</div>
  			.$("#box").html()//获取id为box标签里面的值
  

  代码演示

  <div id="box">
  				
  			</div>
  			.$("#box").html(111111)//设置id为box标签里面的值
  

第二种方式 .text()

• .text()是获取里面的值

• .text(值)是给里面添加值

  代码演示

  <div id="box">
  				
  			</div>
  			.$("#box").text()//获取id为box标签里面的值
  

  代码演示

  <div id="box">
  				
  			</div>
  			.$("#box").text(111111)//设置id为box标签里面的值
  

两种方式的区别

.html()：
方法内部使用的是DOM的innerHTML属性来处理的，所以在设置与获取上需要注意的一个最重要的问题，这个操作是针对整个HTML内容（不仅仅是文本内容，元素标签也包含在里面）

.text()：
结果返回一个字符串，包含所有匹配元素的合并文本

4. jquery的多种选择器

• id选择器 ： #id 用法: $("#myDiv");
• class选择器： class 用法: $(".myClass")
• 并集选择器： selector1, selector2, selectorN 用法: $(“div,span,p.myClass”)
• 标签选择器： div ul li 用法: $(“div”)
• $(“ul li:first”).css(“color”,“red”);//选择ul下第一个li标签
  $(“ul li:last”).css(“color”,“blue”);//选择ul下的最后一个li标签
  $(“ul li:eq(2)”).css(“color”,“blue”);//选择ul下的索引为2的li标签
  $(“ul li:odd”).css(“color”,“blue”);//选择ul下偶数的li标签
  $(“ul li:even”).css(“color”,“blue”);//选择ul下奇数的li标签

5. jquery的css设置语法、

代码案例

$('#test').css('background-color','red');
//这是设置一个css样式

代码案例

$('#test').css({'background-color':'red','font-size':'20px'});
//设置多个属性

6. DOM节点的关系和增加、删除节点以及jquery动画

6.1 DOM节点关系

parent()	父节点
children()	子节点
siblings()	所有的兄弟节点
next()	后面的一个兄弟节点
prev()	前面的一个兄弟节点
nextAll()	后面的所有兄弟节点
prevAll()	前面的所有兄弟节点

6.2 DOM增删语法

append	尾部追加的元素
prepend	头部追加的元素
after	外部末尾添加的元素
before	外部头部添加的元素

6.3 jquery动画

hide()隐藏  show()隐藏
//语法
$(selector).animate(styles,speed,easing,callback)
hide(1000)隐藏    
show(1000)显示    毫秒级
slideUp()滑上去    
slideDown()滑下去
slideTohhle()显示/隐藏切换
fadeIn()淡入
fadeOut()淡出
fadeToggle()淡出/淡入切换
animate()自定义动画

6.4 定时器

var timer=setInterval(function(){},1000)
函数中是重复执行的代码块，1000代表时间是1000毫秒，也就是1秒

clearInterval(timer);清除上面定时器的返回值，就是清除定时器的意思