关于jquery的基础知识

最新推荐文章于 2022-08-25 23:22:41 发布

fendou300

最新推荐文章于 2022-08-25 23:22:41 发布

阅读量406

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/fendou300/article/details/52790401

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

========================================jquery基础=================================================================
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
+++++++++++++++++++++++++++++++++++++++++++环境搭建++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
jQuery 只是一个库，不需要特别的安装，只需要我们在页面 <head> 标签内中通过 script 标签脚本引入 jQuery 库即可。
实例:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<title>环境搭建</title>
</head>
<body>
<script type="text/javascript"> alert($) </script>
</body>
</html>
+++++++++++++++++++++++++++++++++++++++简单的实例+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>第一个简单的jQuery程序</title>
<style type="text/css">
div{
padding:8px 0px;
font-size:12px;
text-align:center;
border:solid 1px #888;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div").html("您好！通过慕课网学习jQuery才是最佳的途径。");
});
</script>
</head>
<body>
<div></div>
</body>
</html>
+++++++++++++++++++++++++++++++++++++++++++++jQuery对象与DOM对象++++++++++++++++++++++++++++++++++++++++++++++++++
<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>


<script type="text/javascript">
window.onmousemove = function(){
// 通过原生JS语法获取id为imooc1的元素p
var p = document.getElementById('imooc1');
// 将元素p在html中内容改变
p.innerHTML = 'P1：您好！通过慕课网学习jQuery才是最佳的途径';
// 将元素p的内容颜色改为红色
p.style.color = 'red';
}
</script>


<script type="text/javascript">
$(document).ready(function() {
/**
* 通过jQuery语法获取id为imooc2的元素获得一个jQuery对象
* 调用该对象的html()方法进行更改内容
* 调用该对象的css()方法进行更改颜色样式
*/
var $p = $('#imooc2');
$p.html('P2：您好！通过慕课网学习jQuery才是最佳的途径').css('color','red');
});
</script>

</head>
<body>
<p id="imooc1"></p>
<p id="imooc2"></p>
</body>
</html>
++++++++++++++++++++++++++++++++++++++++++++++++jQuery对象转化成DOM对象+++++++++++++++++++++++++++++++++++++++++++
，jQuery是一个类数组对象，DOM对象就是一个单独的DOM元素。
<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
</head>

<body>
<div>元素一</div>
<div>元素二</div>
<div>元素三</div>

<script type="text/javascript">
var $div = $('div'); //jQuery对象
//? div = ?


var div1 = $div.get(0);
//var div1 = $div.[0];

var div2 = $div.get(1);
var div3 = $div.get(2);
div1.style.color = 'red'; //操作dom对象的属性
div2.style.color = 'blue'; //操作dom对象的属性
div3.style.color = 'yellow'; //操作dom对象的属性
</script>

</body>

</html>
++++++++++++++++++++++++++++++++++++++DOM对象转化成jQuery对象+++++++++++++++++++++++++++++++++++++++++++++++++++++
通过$(dom)方法将普通的dom对象加工成jQuery对象之后，我们就可以调用jQuery的方法了
如果传递给$(DOM)函数的参数是一个DOM对象，jQuery方法会把这个DOM对象给包装成一个新的jQuery对象
<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
</head>

<body>
<div>元素一</div>
<div>元素二</div>
<div>元素三</div>

<script type="text/javascript">

var div = document.getElementsByTagName('div'); //dom对象

//将dom节点div转化为$div的jquery对象
// $div = ?
var $div = $(div);
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置颜色 var $div = $(div);
var $last =$div.last();
$last.css('color','red');

</script>

</body>

</html>
++++++++++++++++++++++++++++++++++++id选择器++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
$( "#id" )
注意:
id是唯一的，每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id，将只匹配该id选择集合的第一个DOM元素。但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的
<script type="text/javascript">
//通过jQuery直接传入id
//id的唯一，只选择到了第一个匹配的id为imooc的div节点
$(document).ready(function(){
$('#imooc').css("border", "3px solid red");
})
.css("border", "3px solid red");
</script>
+++++++++++++++++++++++++++++++++++++类选择器+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
$( ".class" )
类选择器，相对id选择器来说，效率相对会低一点，但是优势就是可以多选
内置循环处理
$('.imooc').css("border", "3px solid red");
+++++++++++++++++++++++++++++++++++元素选择器+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
<script type="text/javascript">
//通过jQuery直接传入标签名p
//标签是可以多个的，所以得到的同样也是一个合集
$('p').css("border", "3px solid red");
</script>
+++++++++++++++++++++++++++++++++++++++++++++++++全选择器（*选择器）++++++++++++++++++++++++++++++++++++++++++++++
在CSS中，经常会在第一行写下这样一段样式

* {padding: 0; margin: 0;}

$( "*" )
++++++++++++++++++++++++++++++++++++++层级选择器++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++==+
在代码编辑器中第37行填写相应代码

$('div > p')
在代码编辑器中第43行填写相应代码

$('div p')
在代码编辑器中第62行填写相应代码

$(".prev + div")
在代码编辑器中第68行填写相应代码

$(".prev ~ div")
$( "parent > child" )
子选择器：选择所有指定“parent”元素中指定的"child"的直接子元素。

$("ancestor descendant")
后代选择器：选择给定的祖先元素的所有后代元素, 一个元素的后代可能是该元素的一个孩子，孙子，曾孙等

$("prev + next")
相邻兄弟选择器：选择所有紧接在“prev”元素后的“next”元素

$("prev ~ siblings")
一般兄弟选择器：匹配“prev”元素之后的所有兄弟元素。具有相同的父元素，并匹配过滤“siblings”选择器
<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="imooc.css" type="text/css">
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
<h2>子选择器与后代选择器</h2>
<div class="left">
<div class="aaron">
<p>div下的第一个p元素</p>
</div>
<div class="aaron">
<p>div下的第一个p元素</p>
</div>
</div>
<div class="right">
<div class="imooc">
<article>
<p>div下的article下的p元素</p>
</article>
</div>
<div class="imooc">
<article>
<p>div下的article下的p元素</p>
</article>
</div>
</div>

<script type="text/javascript">
//子选择器
//$('div > p') 选择所有div元素里面的第一个子元素P
$('div > p').css("border", "1px groove red");
</script>

<script type="text/javascript">
//后代选择器
//$('div p') 选择所有div元素里面的p元素
$('div p').css("border", "1px groove red");
</script>

<h2>相邻兄弟选择器与一般兄弟选择器</h2>
<div class="bottom">
<div>兄弟节点div, +~选择器不能向前选择</div>
<span class="prev">选择器span元素</span>
<div>span后第一个兄弟节点div</div>
<div>兄弟节点div
<div class="small">子元素div</div>
</div>
<span>兄弟节点span,不可选</span>
<div>兄弟节点div</div>
</div>

<script type="text/javascript">
//相邻兄弟选择器
//选取prev后面的第一个的div兄弟节点
$('.prev +div').css("border", "3px groove blue");
</script>

<script type="text/javascript">
//一般相邻选择器
//选取prev后面的所有的div兄弟节点
$('.prev ~div').css("border", "3px groove blue");
</script>

</body>

</html>
++++++++++++++++++++++++++++++++++++++++++++基本筛选选择器++++++++++++++++++++++++++++++++++++++++++++++++++++++++
找到第一个div
$(".div:first")

//找到最后一个div
$(".div:last")

//:even 选择所引值为偶数的元素，从 0 开始计数
$(".div:even")
//:odd 选择所引值为奇数的元素，从 0 开始计数

$(".div:odd")
<div class="aaron">
<p>:eq(2)</p>
</div>

$(".aaron:eq(2)")
//:gt 选择匹配集合中所有索引值大于给定index参数的元素

$(".aaron:gt(3)")

//:lt 选择匹配集合中所有索引值小于给定index参数的元素
//与:gt相反
$(".aaron:lt(2)")
//:not 选择所有元素去除不匹配给定的选择器的元素
//选取所有input中,没有checked属性的p元素，赋予颜色

$("input:not(:checked) + p")
+++++++++++++++++++++++++++++++++++++++++++++++内容筛选选择器+++++++++++++++++++++++++++++++++++++++++++++++++++++
注意事项：

:contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素
如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。
:parent与:empty是相反的，两者所涉及的子元素，包括文本节点
//查找所有class='div'中DOM元素中包含"contains"的元素节点

$(".div:contains(':contains')")
//查找所有class='div'中DOM元素中包含"span"的元素节点

$(".div:has(span)")
//选择所有a元素，找到对应的父元素

$("a:parent")
//找到a元素下面的所有空节点(没有子元素)

$("a:empty")
++++++++++++++++++++++++++++++++++++++++++可见性筛选选择器+++++++++++++++++++++++++++++++++++++++++++++++++++
:hidden选择器，不仅仅包含样式是display="none"的元素，还包括隐藏表单、visibility等等
$('#div3:hidden')$('#div3:visible')
+++++++++++++++++++++++++++++++++++++++++++属性筛选选择器+++++++++++++++++++++++++++++++++++++++++++++
//查找所有div中，属性name=p1的div元素

$('div[name=p1]')
//查找所有div中，有属性p2的div元素

$('div[p2]')
//查找所有div中，有属性name中的值只包含一个连字符“-”的div元素

$('div[name|="-"]')
//查找所有div中，有属性name中的值包含一个连字符“空”的div元素
$('div[name~="a"]')
//查找所有div中，属性name的值是用imooc开头的

$('div[name^=imooc]')
//查找所有div中，属性name的值是用imooc结尾的

$('div[name$=imooc]')
//查找所有div中，有属性name中的值包含一个test字符串的div元素

$('div[name*="test"]')
//查找所有div中，有属性testattr中的值没有包含"true"的div

$('div[testattr!="true"]')

在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的

[attr="value"]能帮我们定位不同类型的元素，特别是表单form元素的操作，比如说input[type="text"],input [type="checkbox"]等
[attr*="value"]能在网站中帮助我们匹配不同类型的文件
+++++++++++++++++++++++++++++++++++++++子元素筛选选择器+++++++++++++++++++++++++++++++++++++++++++++++++++
//查找所有class="first-div"下的a元素，只取第一个
//针对所有父级下的第一个
$('.first-div a:first-child')
//查找所有class="first-div"下的a元素，只取最后一个
//针对所有父级下的最后一个
//如果只有一个元素的话，last也是第一个元素
$('.first-div a:last-child')
//查找所有class="first-div"下的a元素，如果只有一个子元素的情况
$('.first-div a:only-child')
//查找所有class="last-div"下的a元素,选择第二个

$('.last-div a:nth-child(2)')
//查找所有class="last-div"下的a元素,选择第倒数第二个

$('.last-div a:nth-last-child(2)')
+++++++++++++++++++++++++++++++++++++++++表单元素选择器++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//查找所有 input, textarea, select 和 button 元素
//:input 选择器基本上选择所有表单控件

$(':input')
//匹配所有input元素中类型为text的input元素

$('input:text')
//匹配所有input元素中类型为password的input元素

$('input:password')
//匹配所有input元素中的单选按钮,并选中

$('input:radio')
//匹配所有input元素中的复选按钮,并选中

$('input:checkbox')
//匹配所有input元素中的提交的按钮,修改背景颜色

$('input:submit')
//匹配所有input元素中的图像类型的元素,修改背景颜色

$('input:image')
//匹配所有input元素中类型为按钮的元素

$('input:button')
//匹配所有input元素中类型为file的元素

$('input:file')
+++++++++++++++++++++++++++++++++++++++表单对象属性筛选选择器+++++++++++++++++++++++++++++++++++++++++++++++++++++
//查找所有input所有可用的（未被禁用的元素）input元素

$('input:enabled')
//查找所有input所有不可用的（被禁用的元素）input元素

$('input:disabled')
//查找所有input所有勾选的元素(单选框,复选框)
//删除这个勾选的元素

$('input:checked')
例子:
<script type="text/javascript">
//查找所有input所有勾选的元素(单选框,复选框)
//删除这个勾选的元素
$('input:checked').removeAttr('checked')
</script>
//查找所有option元素中,有selected属性被选中的选项
//删除这个选中的元素

$('option:selected')
+++++++++++++++++++++++++++++++++++++++++++++++练习题+++++++++++++++++++++++++++++++++++++++++++++++++
:has() 选择元素其中至少包含指定选择器匹配的一个种元素，匹配的是元素\
:input 选择所有 input, textarea, select 和 button 元素.
:contains() 选择所有包含指定文本的元素
:contains()选择器中括号内的文字，可为纯文本，或用引号包围
:text() 选择所有类型为text的input元素
even: 选择所引值为偶数的元素，从 0 开始计数
odd: 选择所引值为奇数的元素，从 0 开始计数
eq: 在匹配的集合中选择索引值为index的元素
因为jQuery合集是从0开始索引的，所以eq(1)就是第二个元素
lt() 选择匹配集合中所有索引值小于给定index参数的元素
这里应该lt(2)
匹配所有勾选的元素选择所有可用的元素获取 select 元素中所有被选中的元素选择所有禁用的元素
看正确答案

A:checked
B:enabled
D:selected
E:disabled
+++++++++++++++++++++++++++++++++++++++特殊选择器this+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。
$(this),代表的上下文对象是一个jquery的上下文对象，可以调用jQuery的方法和属性值。
+++++++++++++++++++++++++++++++++++++++++++++.attr()与.removeAttr()+++++++++++++++++++++++++++++++++++++++++++++++
attr()有4个表达式

attr(传入属性名)：获取属性的值
attr(属性名, 属性值)：设置属性的值
attr(属性名,函数值)：设置属性的函数值
attr(attributes)：给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }
removeAttr()删除方法

.removeAttr( attributeName ) : 为匹配的元素集合中的每个元素中移除一个属性（attribute）
优点：

attr、removeAttr都是jQuery为了属性操作封装的，直接在一个 jQuery 对象上调用该方法，很容易对属性进行操作，也不需要去特意的理解浏览器的属性名不同的问题
获取Attribute就需要用attr，获取Property就需要用prop
+++++++++++++++++++++++++++++++++++++++++++++++html()及.text()++++++++++++++++++++++++++++++++++++++++++++++++++++
.html()方法

获取集合中第一个匹配元素的HTML内容或设置每一个匹配元素的html内容，具体有3种用法：

.html() 不传入值，就是获取集合中第一个匹配元素的HTML内容
.html( htmlString ) 设置每一个匹配元素的html内容
.html( function(index, oldhtml) ) 用来返回设置HTML内容的一个函数
.text()方法

得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容。，具体有3种用法：

.text() 得到匹配元素集合中每个元素的合并文本，包括他们的后代
.text( textString ) 用于设置匹配元素内容的文本
.text( function(index, text) ) 用来返回设置文本内容的一个函数
注意事项：

.htm()方法内部使用的是DOM的innerHTML属性来处理的，所以在设置与获取上需要注意的一个最重要的问题，这个操作是针对整个HTML内容（不仅仅只是文本内容）
注意事项：

.text()结果返回一个字符串，包含所有匹配元素的合并文本
.html与.text的异同:

.html与.text的方法操作是一样，只是在具体针对处理对象不同
.html处理的是元素内容，.text处理的是文本内容
.html只能使用在HTML文档中，.text 在XML 和 HTML 文档中都能使用
如果处理的对象只有一个子文本节点，那么html处理的结果与text是一样的
火狐不支持innerText属性，用了类似的textContent属性，.text()方法综合了2个属性的支持，所以可以兼容所有浏览器

<script type="text/javascript">
//显示出html方法获取到的内容
//.html()是整个html文档结构
$('p:first').text( $(".first-div").html() )
</script>
<script type="text/javascript">
//显示出text方法获取到的内容
//.text()是文本内容的合集
$('p:last').text( $(".first-div").text() )
</script>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++.val()+++++++++++++++++++++++++++++++++++++++++++++++++++++
.val()方法

.val()无参数，获取匹配的元素集合中第一个元素的当前值
.val( value )，设置匹配的元素集合中每个元素的值
.val( function ) ，一个用来返回设置值的函数
注意事项：

通过.val()处理select元素，当没有选择项被选中，它返回null
.val()方法多用来设置表单的字段的值
如果select元素有multiple（多选）属性，并且至少一个选择项被选中， .val()方法返回一个数组，这个数组包含每个选中选择项的值
.html(),.text()和.val()的差异总结：

.html(),.text(),.val()三种方法都是用来读取选定元素的内容；只不过.html()是用来读取元素的html内容（包括html标签），.text()用来读取元素的纯文本内容，包括其后代元素，.val()是用来读取表单元素的"value"值。其中.html() 和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上；另外.html()方法使用在多个元素上时，只读取第一个元素；.val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但是.text() 和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。
.html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容，如果三个方法同时运用在多个元素上时，那么将会替换所有选中元素的内容。
.html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。
++++++++++++++++++++++++++++++++++++++++++++++增加样式.addClass()+++++++++++++++++++++++++++++++++++++++++++++++++
.addClass( className )方法

.addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名
.addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的要增加的样式名
注意事项：

.addClass()方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上
简单的描述下：在p元素增加一个newClass的样式

<p class="orgClass">
$("p").addClass("newClass")
.right div {
width: 100px;
height: 90px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
}
+++++++++++++++++++++++++++++++++++++++++++++切换样式.toggleClass()+++++++++++++++++++++++++++++++++++++++++++++++
.toggleClass( className )：在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名
.toggleClass( className, switch )：一个布尔值，用于判断样式是否应该被添加或移除
.toggleClass( [switch ] )：一个用来判断样式类添加还是移除的布尔值
.toggleClass( function(index, class, switch) [, switch ] )：用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数
</div>
<script type="text/javascript">
//给所有的tr元素加一个class="c"的样式
$("#table tr").toggleClass("c");
</script>
<script type="text/javascript">
//给所有的偶数tr元素切换class="c"的样式
//所有基数的样式保留，偶数的被删除
$("#table tr:odd").toggleClass("c");
</script>
<script type="text/javascript">
//第二个参数判断样式类是否应该被添加或删除
//true，那么这个样式类将被添加;
//false，那么这个样式类将被移除
//所有的奇数tr元素，应该都保留class="c"样式
$("#table tr:even").toggleClass("c", true); //这个操作没有变化，因为样式已经是存在的
++++++++++++++++++++++++++++++++++++++++++++++++样式操作.css()+++++++++++++++++++++++++++++++++++++++=++++++++++++
<script type="text/javascript">
//background-color:blue; => rgb(0, 0, 255)
//颜色都会转化成统一的rgb标示
$('p:eq(0)').text( $('.first').css("background-color") )

</script>

<script type="text/javascript">
//字体大小都会转化成统px大小 em=>px
$('p:eq(1)').text( $('.first').css("font-size"))
</script>

<script type="text/javascript">
//获取尺寸，传入CSS属性组成的一个数组
//{width: "60px", height: "60px"}
var value = $('.first').css(['width','height']);
//因为获取的是一个对象，取到对应的值
$('p:eq(2)').text( 'widht:' + value.width + ' height:' +value.height )
</script>

</br></br></br>
<h3>设置css属性</h3>
<div class="fourth">设置颜色设置文字尺寸</div>
<div class="fifth">设置颜色设置文字尺寸</div>
<div class="sixth">通过回调设置新的值</div>
<div class="seventh">同时设置多少个样式</div>

<script type="text/javascript">
//多种写法设置颜色
$('.fourth').css("background-color","red")
$('.fifth').css("backgroundColor","yellow")
</script>

<script type="text/javascript">
//多种写法设置字体大小
$('.fourth').css("font-size","15px")
$('.fifth').css("fontSize","0.9em")
</script>

<script type="text/javascript">
//获取到指定元素的宽度，在回调返回宽度值
//通过处理这个value，重新设置新的宽度
$('.sixth').css("width",function(index,value){
//value带单位，先分解
value = value.split('px');
//返回一个新的值，在原有的值上，增加50px
return (Number(value[0]) + 50) + value[1];
})
</script>

<script type="text/javascript">
//合并设置,通过对象传设置多个样式
$('.seventh').css({
'font-size' :"15px",
"background-color" :"#40E0D0",
"border" :"1px solid red"
})
</script>

fendou300

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于jquery的基础知识

========================================jquery基础================================================================= +++++++++++++++++++++++++++++++++++++++++++环境搭建++++++++++++++++++++++++++++++++
复制链接

扫一扫

专栏目录