jQuery基础笔记01

最新推荐文章于 2021-03-29 16:40:42 发布

起个名都费劲

最新推荐文章于 2021-03-29 16:40:42 发布

阅读量270

点赞数

分类专栏： JavaWeb基础文章标签： jQuery 基础新手初学

本文链接：https://blog.csdn.net/qq_36366758/article/details/84571603

版权

JavaWeb基础专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、jQuery是什么

John Resig在2006年1月发布的一款跨主流浏览器的JavaScript库，简化JavaScript对HTML操作

二、为什么要使用jQuery

（1）写少代码,做多事情【write less do more】
（2）免费，开源且轻量级的js库，容量很小
    注意：项目中，提倡引用min版的js库
（3）兼容市面上主流浏览器，例如 IE，Firefox，Chrome
    注意：jQuery不是将所有JS全部封装，只是有选择的封装
（4）能够处理HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步AJAX功能
（5）文档手册很全，很详细
（6）成熟的插件可供选择
（7）提倡对主要的html标签提供一个id属性，但不是必须的
（8）出错后，有一定的提示信息
（9）不用再在html里面通过<script>标签插入一大堆js来调用命令了

三、jQuery开发步骤

（1）引用第三方js库文件，<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
（2）查阅并使用api手册，$("#divID").html()/val()/text()/css("color","red")/....
	//var divElement = document.getElementById("divID");
var $div = $("#divID");
//var html = divElement.innerHTML;
var html = $div.html();
alert(html);

四、js对象和jQuery对象相互转换

（1）什么是js对象及代码规则
    就是使用js-API，即Node接口中的API或是传统JS语法定义的对象，叫做js对象
    js代码规则----divElement
    var divElement = document.getElementById("divID");
    var nameArray = new Array(3);

（2）什么是jQuery对象及代码规则
    就是使用jQuery-API，返回的对象就叫做jQuery对象
    jQuery代码规则----$div
    var $div = $("#divID")

（3）js对象转成jQuery对象【重点】
    语法：$(js对象)---->jQuery对象
    例如：$(divElement)---->$div
    例如：$(this)---->$this
    注意：jQuery对象将js对象做了封装，js对象二边无引号
var inputElement = document.getElementById("inputID");//js对象 
var $input = $(inputElement);//jquery对象
var txt = $input.val();
alert(txt);

（4）jQuery对象转成js对象
    语法1：jQuery对象[下标，从0开始]
    语法2：jQuery对象.get(下标，从0开始)
    例如：$div[0]---->divElement
    注意：不同的对象只能调用对应的api方法，即jQuery对象不能调用js对象的api，反之亦然
    $div.innerHTML（错）
    divElement.html(错) 
var $div = $("#divID");//jquery对象
var divElement = $div[0];//js对象(方式一)
//var divElement = $div.get(0);//js对象(方式二)
var txt = divElement.innerHTML;		  
alert(txt);

五、js对象和jQuery对象的区别

（1）js对象的三种基本定位方式
   （A）通过ID属性：document.getElementById()
   （B）通过NAME属性：document.getElementsByName()
   （C）通过标签名：document.getElementsByTagName()
（2）jQuery对象的三种基本定位方式
   （A）通过ID属性：$("#id属性值")
   （B）通过标签名：$("标签名")
   （C）通过CLASS属性：$(".样式名")
（3）js对象出错的显示
    没有合理的提示信息
    例如：alert(document.getElementById("usernameIDD").value)
（4）jQuery对象出错的显示
    有合理的提示信息，例如：undefined
    例如：alert($("#usernameIDD").val())

六、jQuery九类选择器（上）

  目的：通过选择器，能定位web页面（HTML/JSP/XML）中的任何标签
（1）	基本选择器1
	//1)查找ID为"div1ID"的元素个数
	    alert( $("#div1ID").size() );
    
	//2)查找DIV元素的个数
	    alert( $("div").size() );
    
  	//3)查找所有样式是"myClass"的元素的个数
 	    alert( $(".myClass").size() );

  	//4)查找所有DIV,SPAN,P元素的个数
 	    alert( $("div,span,p").size() );
    
	//5)查找所有ID为div1ID,CLASS为myClass,P元素的个数
	    alert( $('#div1ID,.myClass,p').size() );

（2）	层次选择器2
	//1)找到表单form里所有的input元素的个数
	    alert( $("form input").size() );
	
  	//2)找到表单form里所有的子级input元素个数
  		alert( $("form > input").size() );
  	
  	//3)找到表单form同级第一个input元素的value属性值
  	    alert( $("form + input").val() );
  	
  	//4)找到所有与表单form同级的input元素个数
  		alert( $("form ~ input").size() );

（3）	增强基本选择器3
	//1)查找UL中第一个元素的内容
		alert( $("ul li:first").text() );

  	//2)查找UL中最后个元素的内容
		alert( $("ul li:last").text() );

  	//4)查找表格的索引号为1、3、5...奇数行个数，索引号从0开始
		alert( $("table tr:odd").size() );

  	//5)查找表格的索引号为2、4、6...偶数行个数，索引号从0开始
		alert( $("table tr:even").size() );

  	//6)查找表格中第二行的内容，从索引号0开始，这是一种祖先 后代 的变化形式
  	    alert( $("table tr td:eq(1)").text() );

  	//7)查找表格中第二第三行的个数，即索引值是1和2，也就是比0大
		alert( $("table tr:gt(0)").size() );

  	//8)查找表格中第一第二行的个数，即索引值是0和1，也就是比2小
		alert( $("table tr:lt(2)").size() );

  	//9)给页面内所有标题<h1><h2><h3>加上红色背景色，且文字加蓝色
		$(":header").css("background-color","red").css("color","blue");
		
  	//3)查找所有未选中的input为checkbox的元素个数
		alert( $(":checkbox:NOT(:checked)").size() );

（4）	内容选择器4
	//1)查找所有包含文本"John"的div元素的个数
	    alert( $("div:contains('John')").size() );
	    
  	//2)查找所有p元素为空的元素个数
  	    alert( $("p:empty").size() );
  	
  	//3)给所有包含p元素的div元素添加一个myClass样式
  		$("div:has(p)").addClass("myClass");
  	
  	//4)查找所有含有子元素或者文本的p元素个数,即p为父元素
  	    alert( $("p:parent").size() );

七、jQuery中常用方法（上）

  目的：通过方法，能操作web页面（HTML/JSP）中的任何标签
 （1）val()：获取标签的value属性值，前提是该标签有value属性
 （2）html()：获取标签之间的内容，不能用运于xml文件
 （3）text()：获取标签之间的内容，可以用运于html/jsp和xml文件，(提倡)
 （4）css()：加key-value形成的css样式
 （5）addClass()：加已经定义好的一个css样式
 （6）size()：获取jQuery对象/数组中元素的个数，提倡
 （7）length：获取jQuery对象/数组中元素的个数
  注意：在写jQuery代码时，不光可以使用jQuery的API，还能使用传统JS的API

八.jQuery九类选择器

目的：通过九类选择器，能定位web页面（HTML/JSP/XML）中的任何标签
（1）基本选择器
（2）层次选择器
（3）增强基本选择器
（4）内容选择器
（5）可见性选择器
（6）属性选择器
（7）子元素选择器
（8）表单选择器
（9）表单对象属性选择器
    注意：项目中，通常是多种选择器一起使用

九、jQuery常用Method-API

 目的：对web页面（HTML/JSP/XML）中的任何标签，属性，内容进行增删改查
（1）DOM简述与分类
   （A）DOM是一种W3C官方标准规则，可访问任何标签语言的页面(HTML/JSP/XML)
   （B）DOM是跨平台(window/linux/unix)，跨语言(javascript/java)，
       跨浏览器(ie/firefox/Chrome)的标准规则	
   （C）我们只需要按照DOM标准规则，针对主流浏览器(ie/firefox/Chrome)编程
   （D）JS/jQuery按照DOM的标准规则，既可以操作HTML/JSP，也能操作CSS
   （E）DOM标准规则不是JS的专属，其它语言，也能适用，例如:VBScript，Java语言等

（2）DOM标准规则下的jQuery常用API，注意：以下方法均由jQuery对象调用
    each()：是jQuery中专用于迭代数组的方法，参数为一个处理函数，this表示当前需要迭代的js对象
append()：追加到父元素之后
    prepend()：追加到父元素之前
after()：追加到兄弟元素之后
    before()：追加到兄弟元素之前 
attr(name)：获取属性值
    attr(name,value)：给符合条件的标签添加key-value属性对 
$("<div id='xxID'>HTML代码</div>")：创建元素，属性，文本    
    remove()：删除自已及其后代节点  
val()：获取value属性的值
val("")：设置value属性值为""空串，相当于清空
text()：获取HTML或XML标签之间的值
text("")：设置HTML或XML标签之间的值为""空串 
clone()：只复制样式，不复制行为
   clone(true)：既复制样式，又复制行为
replaceWith()：替代原来的节点
   removeAttr()：删除已存在的属性
addClass()：增加已存在的样式
   removeClass()：删除已存在的样式
   hasClass()：判断标签是否有指定的样式，true表示有样式，false表示无样式
   toggleClass()：如果标签有样式就删除，否则增加样式
   offset()：获取对象的left和top坐标
   offset({top:100,left:200})：将对象直接定位到指定的left和top坐标
width()：获取对象的宽
    width(300)：设置对象的宽
    height()：获取对象的高
    height(500)：设置对象的高
children()：只查询子节点，不含后代节点
    next()：下一下兄弟节点
    prev()：上一下兄弟节点
    siblings()：上下兄弟节点
show()：显示对象
    hide()：隐藏对象
fadeIn()：淡入显示对象
    fadeOut()：淡出隐藏对象
slideUp()：向上滑动
    slideDown()：向下滑动
    slideToggle()：上下切换滑动，速度快点
	面试题--find("9类选择器")：查询指定的节点和多重each()迭代
    
	//使用jquery弹出奇数的tr标签下的td里的值
	var $tr = $("table tr:lt(4):even");
	$tr.each(function(){
	//tr中查找td标签,$(this)表示tr
	var $td = $(this).find("td");
	$td.each(function(){
 	//$(this)表示td
 	var txt = $(this).text();
	alert(txt);
	});
	});

十、jQuery常用Event-API

   目的：对web页面（HTML/JSP）进行事件触发，完成特殊效果的处理
    window.onload：在浏览器加载web页面时触发，可以写多次onload事件，但后者覆盖前者
    ready：在浏览器加载web页面时触发，可以写多次ready事件，不会后者覆盖前者，依次从上向	下执行，我们常用$(函数)简化
    ready和onload同时存在时，二者都会触发执行，ready快于onload
    change：当内容改变时触发
    focus：焦点获取
    select：选中所有的文本值
    keyup/keydown/keypress：演示在IE和Firefox中获取event对象的不同
    mousemove：在指定区域中不断移动触发
    mouseover：鼠标移入时触发
    mouseout：鼠标移出时触发
    submit：在提交表单时触发，true表示提交到后台，false表示不提交到后台
    click：单击触发
    dblclick：双击触发
    blur：焦点失去