欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

初识jQuery

程序员文章站 2024-01-26 10:11:07
...

jQuery的优势

体积小,压缩后只有100KB左右
强大的选择器
出色的DOM封装
可靠的事件处理机制
出色的浏览器兼容性
使用隐式迭代简化编程
丰富的插件支持

jQuery能做什么

访问和操作DOM元素
控制页面样式
对页面事件进行处理
扩展新的jQuery插件
与Ajax技术完美结合
特别注意
jQuery能做的JavaScript也都能做,但使用jQuery能大幅提高开发效率

jQuery的版本

初识jQuery
怎样在js中引用jQuery

<script src="js/jquery-1.12.4.js" type="text/javascript"></script>

**jQuery语法结构
**
工厂函数$():将DOM对象转化为jQuery对象
选择器 selector:获取需要操作的DOM 元素
方法action():jQuery中提供的方法,其中包括绑定事件处理的方法
addClass( )

jQuery 对象.addClass([样式名]);

css( )

css("属性","属性值") ;
css({"属性1":"属性值1","属性2":"属性值2"...}) ; //我们通常使用第二个

显示和隐藏

$(selector).show( );  //显示
$(selector).hide( );  //影藏

**注意:$”等同于“ jQuery **

DOM模型

初识jQuery
DOM对象:直接使用JavaScript获取的节点对象

var objDOM=document.getElementById("title"); 

var objHTML=objDOM.innerHTML;  

当当订单页
初识jQuery
关键代码

<script src="../js/jquery-3.5.1.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#menu").mousemove(function(){
			$("#menu").css("border","1px solid blue");
			$("#menu-ul").show();
		}).mouseout(function(){
			$("#menu").css("border","none");
			$("#menu-ul").hide();
		})
	})
</script>
相关标签: jquery