初识jQuery

最新推荐文章于 2021-12-05 22:20:42 发布

jcas

最新推荐文章于 2021-12-05 22:20:42 发布

阅读量120

点赞数

本文链接：https://blog.csdn.net/jcvvs/article/details/107220262

版权

jQuery简介

jQuery由美国人John Resig于2006年创建
jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装
它的设计思想是write less,do more

jQuery的应用

jQuery与其他JavaScript库

jQuery
Bootstrap
Zepto
Ext
YUI

jQuery能做什么

问和操作DOM元素
控制页面样式
对页面事件进行处理
扩展新的jQuery插件
与Ajax技术完美结合

jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率

jQuery的优势

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

获取jQuery

进入jQuery官网：http://jquery.com
在这里插入图片描述

jQuery库文件

jQuery库分开发版和发布版

在这里插入图片描述

在页面中引入jQuery

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

jQuery基本语法

使用jQuery弹出提示框

<script>
     $(document).ready(function() {
        alert("我欲奔赴沙场征战jQuery，势必攻克之！");
    });
</script>

$(document).ready()

$(document).ready()与window.onload类似，但也有区别

jQuery语法结构

$(selector).action() ;

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

jQuery操作页面元素

使用addClass( )方法为元素添加样式
使用css( )方法设置元素样式
使用show( )、hide( ) 方法设置元素的显示和隐藏

addClass( )方法

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

示例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>左导航菜单</title>
    <style type="text/css">
        li{list-style: none; line-height: 22px; cursor: pointer;}
        .current{background: #6cf; font-weight: bold; color: #fff;}
    </style>
</head>
<body>
<ul>
    <li id="current">jQuery简介</li>
    <li>jQuery语法</li>
    <li>jQuery选择器</li>
    <li>jQuery事件与动画</li>
    <li>jQuery方法</li>
</ul>
<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("li").click(function(){
            $("#current").addClass("current");
        });
    });
</script>
</body>
</html>

css( )方法

css("属性","属性值") ; css({"属性1":"属性值1","属性2":"属性值2"...}) ;

示例：
$(this).css({"background":"#c81623"});

设置元素的显示和隐藏

语法
$(selector).show( );
$(selector).hide( );

示例：
$(".nav-top").show( );
$("p").hide( );

jQuery代码风格

1.“ $” 等同于 “ j Q u e r y ” ‘$ (document).ready()=jQuery(document).ready()$(function(){…})=jQuery (function(){…}) `

2.链式操作

对一个对象进行多重操作，并将操作结果返回给该对象

示例：
$("h2").css("background-color","#ccffff").next().css("display","block");

3.隐式迭代

$(document).ready(function() {
        $("li").css({"font-weight":"bold","color":"red"});
    });

DOM对象和jQuery对象

(1).DOM对象：直接使用JavaScript获取的节点对象

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

(2). jQuery对象：使用jQuery包装DOM对象后产生的对象，它能够使用jQuery中的方法

$("#title").html( );
等同于
document.getElementById("title").innerHTML;

注意： DOM对象和jQuery对象分别拥有一套独立的方法，不能混用

DOM对象转jQuery对象

(1)使用$()函数进行转化：$(DOM对象)

var txtName =document.getElementById("txtName"); 
var $txtName =$(txtName);

jQuery对象转DOM对象

(1) jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象

var $txtName =$ ("#txtName"); 
var txtName =$txtName[0];

(2)通过get(index)方法得到相应的DOM对象

var $txtName =$("#txtName"); 
var txtName =$txtName.get(0);

jcas

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识jQuery

jQuery简介jQuery由美国人John Resig于2006年创建jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装它的设计思想是write less,do morejQuery的应用jQuery与其他JavaScript库jQueryBootstrapZeptoExtYUIjQuery能做什么问和操作DOM元素控制页面样式对页面事件进行处理扩展新的jQuery插件与Ajax技术完美结合jQuery能做的Ja
复制链接

扫一扫