2018-07-10 第六十五天 jQuery

最新推荐文章于 2022-04-16 21:07:11 发布

Winnieeeee

最新推荐文章于 2022-04-16 21:07:11 发布

阅读量312

点赞数

本文链接：https://blog.csdn.net/Winnieeeee/article/details/80992704

版权

jQuery一、jQuery概述1.jQuery的简介[1]为什么学习jQuery(JavaScript的缺点)： A、JS书写的代码比较的臃肿 B、JS中获得元素对象的方式比较单一 C、JS实现动画效果非常复杂 D、JS的代码对浏览器是有区分的 [2]什么是JQuery JavaScriptQuery：JS的库。目前最流行的JavaScript函数库，对Ja...

摘要由CSDN通过智能技术生成

jQuery

一、jQuery概述

1.jQuery的简介

[1]为什么学习jQuery(JavaScript的缺点)：

A、JS书写的代码比较的臃肿

B、JS中获得元素对象的方式比较单一

C、JS实现动画效果非常复杂

D、JS的代码对浏览器是有区分的

[2]什么是JQuery

JavaScriptQuery：JS的库。

目前最流行的JavaScript函数库，对JavaScript进行了封装。

并不是一门新语言。将常用的、复杂的操作进行函数化封装，直接调用，大大降低了使用JavaScript的难度，改变了使用JavaScript的习惯。

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

由美国人John Resig在2006年推出，目前最新版本是v3.31。

宗旨：Write less，do more（写更少代码，做更多事情）

官方网址http://jquery.com/

目前jQuery有三个大版本：

1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)

2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)

3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本：3.3.1（2017年3月20日）

2. $ 的含义

作用1：$(function)---$就是jQuery的省略写法

a.相当于 window.οnlοad=function(){}；

b.功能比window.onload更强大；

1) window.onload一个页面只能写一个,但是可以写多个$() 而不冲突；

2) window.onload要等整个页面加载完后再执行（包括图片、超链接、音视频等），但是$的执行时间要早

c.完整形式是$(document).ready(…….)。

作用2：$(selector)选择器

jQuery具有强大的选择器功能

3. 隔行变色案例实现

<!DOCTYPE html>

<html>

<head>

.datalist{

border:1px solid #007108;

font-family:Arial;

border-collapse:collapse;

background-color:#d9ffdc;

font-size:14px;

}

.datalist th{

border:1px solid #007108;

background-color:#00a40c;

color:#FFFFFF;

font-weight:bold;

padding-top:4px; padding-bottom:4px;

padding-left:12px; padding-right:12px;

text-align:center;

}

.datalist td{

border:1px solid #007108;

text-align:left;

padding-top:4px;

padding-bottom:4px;

padding-left:10px;

padding-right:10px;

}

</style>

/*JS实现的方式*/

/* window.οnlοad=function(){

//获得所有的tr标签对象

var trs=document.getElementsByTagName("tr");

for(var i=0;i<trs.length;i++){

if(i%2==0){

trs[i].style.backgroundColor="red";

}

}*/

/*JQ实现操作*/

$(function(){

$("tr:odd").css("background-color","green");

})

$(function(){

alert("123");

})

/*jQuery(function(){

alert("456");

})

$(document).ready(function(){

alert("789");

})*/

</script>

</head>

<body>

<tr>

<th scope="col">Class</th>

<th scope="col">Birthday</th>

<th scope="col">Constellation</th>

<th scope="col">Mobile</th>

</tr>

<td>isaac</td>

<td>Cancer</td>

</tr>

<td>fresheggs</td>

<td>Scorpio</td>

</tr>

<td>girlwing</td>

<td>Virgo</td>

</tr>

<td>tastestory</td>

<td>Sagittarius</td>

</tr>

<td>lovehate</td>

<td>Virgo</td>

</tr>

<td>slepox</td>

<td>Scorpio</td>

</tr>

<td>smartlau</td>

<td>Capricorn</td>

</tr>

<td>shenhuanyan</td>

<td>Aquarius</td>

</tr>

<td>tuonene</td>

<td>Sagittarius</td>

</tr>

<td>ArthurRivers</td>

<td>Pisces</td>

</tr>

<td>reconzansp</td>

<td>Libra</td>

</tr>

<td>linear</td>

</tr>

<td>laopiao</td>

<td>Taurus</td>

</tr>

<td>dovecho</td>

<td>Sagittarius</td>

</tr>

<td>shanghen</td>

<td>Gemini</td>

</tr>

<td>venessawj</td>

<td>Aries</td>

</tr>

<td>lightyear</td>

<td>Aries</td>

</tr>

</table>

</body>

</html>

二、jQuery中的选择器

1.基本选择器

标签选择器 $(“a”)；

ID选择器 $(“#id”)、$(“p#id”)；

类选择器 $(“.class”)、$(“h2.class”)；

通配选择器 $("*")；

并集选择器$("elem1,elem2,elem3") 。

<!DOCTYPE html>

<html>

<head>

$(function() {

/**********基本选择器***********/

//js的方式获得zh--Element

var zh = document.getElementById("zh");

// JS对象---JQ对象

var zz = $(zh);

// Object--[Element1,Element2,Element3...]

//id选择器

var zh1 = $("#zh");

//元素选择器--jq没有指定具体的下标默认的是第一个

var inp = $("input");

// JQ对象----JS对象

alert(inp[1].value);

alert(inp.eq(1).val());

//类选择器

var inp2 = $(".re");

//所有选择器

$("*").css("background-color", "green");

});

</script>

</head>

<body>

<p>

账号：<input type="text" name="zh" id="zh" class="re" value="123" />

</p>

<p>

密码：<input type="password" name="pwd" id="pwd" class="re" value="987" />

</p>

</body>

</html>

2.层级选择器

后代选择器$(ul li)；

父子选择器 $(ul>li)；

后面第一个兄弟元素（紧跟） prev + next；

后面所有的兄弟元素 prev ~ next。

<!DOCTYPE html>

<html>

<head>

$(function() {

/*********层级选择器***********/

//包含 div下所有包含的span

var span = $("div span");

//必须是直系子节点

var span2 = $("div > span");

//获得下一个节点对象 -- id为span1后面紧跟着的span的对象

var span = $("#span1 + span");

// 获得元素后面的span(同一级别的span)

var span4 = $("#span1~span");

alert(span4.length);

})

</script>

</head>

<body>

<p>

</p>

</div>

</body>

</html>

3.位置选择器

：first；

:last；

:odd；

:even；

:eq(index)；

:lt(index)；

:gt(index)。

案例见4。

4.子元素选择器

:nth-child(index) 这个是从1开始的；

:only-child；

:first-child；

:last-child。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p class="header_p">form表单</p>

</div>

</header>

<ul>

</ul>

<ul>

</ul>

</div>

$(function() {

/***********基础选择器****************/

//获得第一个元素

$("ul li").first().css("background-color", "red");

$("ul li:first").css("background-color", "red");

//获得最后一个元素对象

$("ul li").last().css("background-color", "green");

$("ul li:last").css("background-color", "green");

//奇数索引从0开始

$("ul li:odd").css("background-color", "green");

//偶数索引从0开始

$("ul li:even").css("background-color", "green");

//获得具体下标位置

$("ul li:eq(3)").css("background-color", "green");

//获得索引小于指定的下标

$("ul li:lt(3)").css("background-color", "green");

//获得索引大于指定的下标

$("ul li:gt(3)").css("background-color", "green");

/**********子元素选择器*************/

// 位置从1开始 ---每一个ul都会看成一个对象

$("ul li:nth-child(1)").css("background-color", "green");

// 如果某个元素是父元素中唯一的子元素，那将会被匹配

$("ul li:only-child").css("background-color", "green");

//匹配第一个子元素

$("ul li:first-child").css("background-color", "green");

//匹配最后一个子元素

$("ul li:last-child").css("background-color", "green");

})

</script>

</body>

</html>

5.属性选择器

[attribute] ；

[attribute1]、[attribute2] ；

[attribute=value]；

[attribute!=value]；

[attribute^=value]；

[attribute$=value；

[attribute*=value]。

案例见6。

6.表单选择器

:text、:password、:radio、:checkbox、:hidden、:file、:submit；

:input---匹配所有 input, textarea, select 和 button 元素；

:selected 、 :checked 、 :enabled 、 :disabled；

:hidden 、 :visible 、 :not 。

注意$(“input”)和$(“:input”)的区别

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>

<input type="radio" name="sex" value="男" />男

<input type="radio" name="sex" checked="checked" value="女" />女

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>

<input type="checkbox" name="hobby" value="music" checked/>音乐

<input type="checkbox" name="hobby" value="sports" />体育

<input type="checkbox" name="hobby" value="art" />美术

</td>

</tr>

<tr>

<td>

</select>

</td>

</tr>

<tr>

<td>

<textarea name="resume" rows="5" cols="40">请输入简历</textarea>

</td>

</tr>

<tr>

</tr>

<tr>

</td>

</tr>

</table>

</form>

$(function() {

/****属性选择器*********/

$("input[type=text]").css("background-color", "red");

//name包含s元素对象

$("input[name^=s]").css("background-color", "red");

//只要包含s的元素对象即可

$("input[name*=s]").css("background-color", "red");

//以指定元素结尾的对象

$("input[name$=d]").css("background-color", "red");

//匹配所有不含有指定的属性，或者属性不等于特定值的元素

$("input[name!='pwd']").css("background-color", "red");

/************表单选择器***********/

//获得所有的form表单项

$(":input").length;

//获得标签名称是input 的对象

$("input").length;

// input中type=text所对应的对象

$(":text").css("background-color", "red");

$(":password").css("background-color", "red");

/*********表单属性选择器**************/

//选择input中含有disabled属性表单项

$("input:disabled").css("background-color", "red");

//选择性别只是性别被选择的对象

$("input[name=sex]:checked").eq(0).val();

/*******内容选择器********/

$("td:empty").css("background-color", "green");

})

</script>

</body>

</html>

三、jQuery中操作元素

1.操作元素的属性

<!DOCTYPE html>

<html>

<head>

$(function(){

/***********JQ中元素属性操作*****************/

//JQ中事件的绑定

$("#bu1").click(function(){

//获得姓名的input框

var inp=$("#username");

//获得元素的属性

console.log(inp.attr("type")+"----"+inp.attr("id")+"---"+inp.attr("value"));

//操作元素的属性

inp.attr("type","button");

inp.attr("value","提交");

// inp.attr("value")是对象默认的初始值 inp.val()实时输入的值

alert(inp.val());

//返回值是checked

$("#man").attr("checked",false);

//返回值是true/false

alert($("#man").prop("checked"));

//综合的书写方式{key1:value,key2:value}--json

inp.attr({"type":"button","value":"提交"});

})

</script>

</head>

<body>

<h3>JQ中元素属性操作</h3>

<p>

姓名:<input type="text" name="" id="username" value="123" />

</p>

<p>

性别：

男： <input type="radio" name="" id="man" value="1" checked="checked" />

女： <input type="radio" name="" id="" value="0" />

</p>

</body>

</html>

2.操作元素的样式

<!DOCTYPE html>

<html>

<head>

$(function(){

/***********JQ中元素CSS样式操作*****************/

$("#bu2").click(function(){

//获得div对象

var div1=$("#div1");

//获得对应的css样式

console.log(div1.css("width")+"---"+div1.css("height")+"---"+div1.css("border"))

//[1]直接添加css样式

div1.css("width","300px");

div1.css("height","300px");

div1.css("background-color","pink");

//结合的方式

div1.css({"width":"300px","height":"300px"});

//[2]通过添加类的方式添加css样式

div1.attr("class","div_1");

//直接添加类--如果添加的样式比较多，那么推荐使用第二种形式

div1.addClass("div_1");

//移除类

div1.removeClass("div_1");

})

</script>

<style>

#div1{

width: 200px;

height: 200px;

border: 3px solid gray;

}

.div_1{

background-color: darkgoldenrod;

}

</style>

</head>

<body>

<h3>JQ中元素样式的操作</h3>

</body>

</html>

3.操作元素的内容

<!DOCTYPE html>

<html>

<head>

$(function(){

/**********JQ中元素内容操作***********/

$("#bu3").click(function(){

//获得div对象

var div2=$("#div2");

//等价于 js中innerHTML

console.log(div2.html());

//等价于 JS中 innerTest

console.log(div2.text());

//操作节点的内容

div2.html(div2.html()+"<b>是一家很优秀的企业</b>");

div2.text("<b>是一家很优秀的企业</b>");

})

</script>

</head>

<body>

<h3>JQ中元素内容的操作</h3>

</div>

</body>

</html>

4.操作元素的节点

<!DOCTYPE html>

<html>

<head>

$(function(){

//获得div对象

var div =$("#div1");

// 增加节点 --内部后

div.html(div.html()+"<p>List Item6 </p>");

*div.append("<p>List Item6 </p>");

// 增加节点--内部前

*div.prepend("<p>List Item 0 </p>");

//把一个元素追加到另一个元素中 --现有元素之后

$("#div2").appendTo(div);

//把一个元素追加到另一个元素中 --现有元素之前

$("#div2").prependTo(div);

//增加节点--外部前

div.before("<p>List Item0</p>");

//增加节点--外部后

div.after("<p>List Item6</p>");

//内容清空

div.empty();

//元素的移除

div.remove();

})

</script>

<style>

#div1{

height: 300px;

border: 3px solid goldenrod;

}

#div2{

height: 50px;

border: 3px solid red;

}

</style>

</head>

<body>

</div>

</div>

</body>

</html>

Winnieeeee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2018-07-10 第六十五天 jQuery

jQuery一、jQuery概述1.jQuery的简介[1]为什么学习jQuery(JavaScript的缺点)： A、JS书写的代码比较的臃肿 B、JS中获得元素对象的方式比较单一 C、JS实现动画效果非常复杂 D、JS的代码对浏览器是有区分的 [2]什么是JQuery JavaScriptQuery：JS的库。目前最流行的JavaScript函数库，对Ja...
复制链接

扫一扫