如何引入JQuery

1*下地址http://jquery.com ，选择production版下载（xxx.min.js）。在项目中配置jQuery，将下载的xxx.min.js放置到项目指定文件夹如JS文件夹，然后在需要应用jQuery的页面使用下面的语句

<script type=”text/javascript”   src=”JS/xxx.min.js”></script>

2*使用CDN CDN 服务直接获取 jQuery，如；

<script type=”text/javascript” src="https://code.jquery.com/jquery-3.4.1.min.js"> </script>

简单选择器基础

1*　jQuery 语法——基础语法：$(selector).action();

2*　$(document).ready() 函数——JQuery代码都将写在$(document).ready()函数中。

3*    在 JQuery 中提供了强大的选择器用来帮助获取页面上的对象，并且将对象以 JQuery 包装集的形式返回。

eg:

jquery中引入依赖 jquery引入插件的步骤_html

DOM 操作 - 1基础

 

1*　Dom对象转jQuery对象

 

用$()把DOM对象包起来即可

 

var domObj = document.getElementById('demo');

 

var jQueryObj = $(domObj);

2* jQuery对象转Dom对象

 

  • 方法一：[index]

 

var jQueryObj = $('#demo');

 

var domObj = jQueryObj[0];

 

  • 方法二：get(index)

 

var jQueryObj = $('#demo');

 

var domObj = jQueryObj.get(0);

DOM 操作 - 2

1* 创建新元素可以用$()函数。 示例：将新建的li元素插入到ul中

 

$(document).ready(function(){

 

var li_obj = $("<li>黄色</li>");

 

$('ul').append(li_obj); });

2*插入节点

向匹配的元素内部追加内容（上节示例）

将匹配的元素追加到指定的元素中

向匹配的元素内部前置内容

将匹配的元素前置到指定的元素中

在匹配的元素之后插入内容

将匹配的元素插入到指定的元素的后面

在匹配的元素之前插入内容

将匹配的元素插入到指定的元素的前面

3*删除节点

从DOM中删除所匹配的元素，可传参数，后代节点也被删除

从DOM中删除所匹配的元素，但绑定的事件、附加的数据等会保留下来

清空节点，清空元素的所有后代元素节点

DOM 操作 - 3属性操作

1*获取元素属性

 

示例：获取P元素的class属性值，并追加到div中

 

$(document).ready(function(){

 

var p_class = $("p").attr("class");

 

$('div').append(p_class); });

 

 

 

2*设置元素属性

 

示例：设置div的class值

 

$(document).ready(function(){ $("div").attr("class","demo"); });

3*删除元素属性——用removeAttr()方法来实现删除元素属性。

 

示例：删除div的class

 

$(document).ready(function(){ $("div").removeAttr("class"); });

DOM 操作 - 4样式操作

1*追加样式

用addClass()方法来追加样式。 示例：为div追加一个新样式another

$("div").addClass("another");

2*移除样式

 

用removeClass()方法来移除样式。 示例：移除div的another样式

 

$("div").removeClass("another");

DOM 操作 - 5HTML、文本和值

1*html()——用来获取或设置所匹配元素中的HTML内容。

示例：设置div中的HTML内容

$("div").html("<span>shiyan</span>");

2*text()——用来获取或设置所匹配元素中的文本内容。

 

示例：设置div中的文本内容

 

$("div").text("shiyan");

3*val()——用来设置和获取元素的值。

 

示例：设置输入框的值

 

$("input").val("shiyan");

DOM 操作 - 6CSS操作

1*css()——用于获取或设置元素的样式属性。

示例：为div设置边框和高度属性

$('div').css({"border":"1px solid red","height":"100px"});

2*height()、width()——分别用于获取元素的高度和宽度。

 

 事件

1*简写绑定事件

 

事件类型：blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、keydown、keypress等

 

示例：为li元素简写绑定click事件

<!DOCTYPE HTML>
 
<html>
 
<head>
 
<script type="text/javascript" src="xx.min.js"></script>
 
<script type="text/javascript">
 
$(document).ready(function(){
 
    $("ul li").click(function(){
 
        $(this).clone().appendTo('ul');
 
    });
 
});
 
</script>
 
</head>
 
<body>
 
    <ul>
 
        <li>blue</li>
 
        <li>white</li>
 
        <li>red</li>
 
    </ul>
 
</body>
 
</html>

 

2* 合成事件hover()

用于模拟光标悬停事件。

示例：当鼠标移动到li上时字体大小变成24px，移开变为14px

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="xxjquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("ul li").hover(function(){
        $(this).css({"font-size":"24px"});
    },function(){
        $(this).css({"font-size":"14px"});
    });
});
</script>
</head> 
<body>
    <ul>
        <li>blue</li>
        <li>white</li>
        <li>red</li>
    </ul>
</body>
</html>

 

 3* 动画

①　show()和hide()

分别控制元素显示和隐藏。

示例：鼠标放上类名为title的div上将隐藏此div的下一个div，移出则显示

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="xxjquery.min.js"></script>
<style>
.title {
    position:relative;
    border:1px solid red;
    height:100px;
    width:200px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
    $(".title").hover(function(){
        $(this).next().hide();
    },function(){
        $(this).next().show();
    });
});
</script>
</head>

<body>
    <div class="title">shiyan</div>
    <div>welcome to shiyan!</div>
</body>
</html>

②　animate()

用来实现自定义动画。

示例：3000毫秒内left变成500

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="xxjquery.min.js"></script>
<style>
.title {
    position:relative;
    border:1px solid red;
    height:100px;
    width:200px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
    $(".title").animate({left:"500px"},3000);
});
</script>
</head>
<body>
    <div class="title">shiyan</div>
</body>
</html>