文章目录
一、jQuery的介绍
1.1 jQuery的定义
jQuery是对JavaScript的封装,它是免费、开源的 JavaScript函数库，jQuery极大地简化了JavaScript编程。
1.2 jQuery的作用
- jQuery和JavaScript它们的作用一样,都是负责网页行为操作，增加网页和用户的交互效果的,只不过jQuery简化了 JavaScript编程，jQuery实现交互效果更简单。
- jQuery兼容了现在主流的浏览器,增加了程序员的开发效率
- jQuery简化了 JavaScript编程代码编写更加简单
1.3 jQuery与Javascript的区别
1、JQuary与JS最直观的区别就是外观上JQuary对象比JS对象多了"$()"。
2、JQuary与JS操作非表单元素的区别
非表单元素（如果是文本就用text方法，如果是html代码就用html方法）
例：JQuary中div.text()无参数的情况下是取值;div.text(“aaaa”)有参数的情况下是赋值;
div.html()无参数的情况下是取值;div.html(“aaaa”)有参数的情况下是赋值表单元素;
- JS：div.value取值；div.value = xxx赋值;
- JUQERY：div.val()无参数是取值，有参数是赋值。
3、JQuary与JS操作属性的区别 - JS里面用来操作属性的方法是：
div.setAttribute(“”,“”);——设置属性、修改属性
div.removeAttribute(“”);——移除属性，引号里面写一个属性名
div.getAttribute();——获取属性 - JQuary里面用来操作属性的方法
添加属性：div.attr(“test”,“aa”);——给这个attr方法加入参数，属性名叫做test，属性的值是aa。
移除属性：div.removeAttr(“test”);——移除test这条属性。
获取属性：div.attr(“test”);——在attr方法里面直接写入一个属性的名就可以了。
4、JQuary与JS操作样式的区别 - JS里面操作样式的关键字是style。
例：div.style.backgroundColor= “red”;把这个div的背景色设置成为了红色。 - JQuary里面操作样式的关键字是css。
例：div.css(“background-color”,“yellow”);把这个div的背景色变为黄色，在这里CSS里面所有的样式和css样式表里面的样式是一模一样的没有任何变化。
1.4 jQuery的下载安装
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
二、jQuery的用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery</title>
<!-- 导入jQuery包 -->
<script src='js/jquery-1.12.4.min.js'></script>
<!-- 使用jQuery代码，需要重新开一个script标签，新开的scripts中既可以用原生的js代码,也可以用jQuery代码,jQuery代码用$开头-->
<script>
// 原生js代码,需要页面标签和内容全部加载完毕，onload事件才会触发，比较慢
window.onload = function(){
var oDiv = document.getElementById('div1');
alert(oDiv); // [object HTMLDivElement]
};
// jQuery标准写法，以$开头. $ 本质上就是一个函数，$ 就是函数名
// jQuery的ready事件在页面标签加载完毕就执行，不等待数据，比较快
$(document).ready(function(){
// 获取标签和css一样，id用#开头，使用jQuery时，变量名都用$开头
var $div = $('#div1');
alert($div); // [object Object]
});
// jQuery的ready方法简写：$(函数)
$(function(){
var $div = $('#div1');
alert($div);
});
</script>
</head>
<body>
<div id='div1'>哈哈</div>
<img src="https://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%253A%252F%252Fwww.boldlivingtoday.com%252Fwp-content%252Fuploads%252F2012%252F09%252Fits-autumn-wallpapers_20240_2560x1600.jpg%26refer%3Dhttp%253A%252F%252Fwww.boldlivingtoday.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1628064129%26t%3Debb0d501211c869d2208e613b3c01ab8&thumburl=https%3A%2F%2Fimg1.baidu.com%2Fit%2Fu%3D3715650711%2C3437018915%26fm%3D26%26fmt%3Dauto%26gp%3D0.jpg" alt="">
</body>
</html>
2.1 jQuery的引入
<script src='js/jquery-1.12.4.min.js'></script>
2.2 jQuery的入口函数
我们知道使用js获取标签元素,需要页面加载完成以后再获取,我们通过给 onload事件属性设置了一个函数来获取标签元素,而 jquery提供了 ready函数来解决这个问题,保证获取标签元素没有问题,它的速度比原生的 window.onload更快。
三、jQuery选择器
3.1 jQuery选择器的介绍
jquery选择器就是快速选择标签元素,获取标签的,选择规则和css样式一样
3.2 jQuery选择器的种类
说明:可以使用 length属性来判断标签是否选择成功,如果 length大于0表示选择成功,否则选择失败.
1.标签选择器：
(
′
d
i
v
′
)
2.
类选择器：
('div') 2.类选择器：
(′div′)2.类选择器：(‘.myclass’)
3.id选择器：KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲myid') 4.层级选择器：(‘div .myclass’)
5.属性选择器：jQuery特有，$(‘input[name=first]’)，选择name属性等于first的input标签
//jQuery与css选择器的语法一样
$(function(){
var $p = $('p'); //选择所有的p标签
$p.css({'color': 'red'}) // 通过jQuery给选定的标签设置样式
var $div = $('.div1'); //类选择器
var $div1 = $('#box1'); //id选择器
var $h1 = $('div h1'); //层级选择器
var $input = $('input[type=text]'); //属性选择器，先选标签，再过滤属性值
alert($input.length);
});
四、选择集过滤
4.1 选择集过滤的介绍
选择集过滤就是在选择标签的集合里面过滤自己需要的标签
4.2 选择集过滤的操作
- has(选择器名称)方法,表示选取包含指定选择器的标签
- eq(索引方法,表示选取指定索引的标签
//选择集过滤
$(function(){
var $div = $('div').has('h1'); //选取包含h1标签的div标签
$div.css({'background': 'green'});
var $div = $('div').eq(2); //选中的div标签中取下标为2的标签
$div.css({'background': 'orange'});
alert($div.length);
})
五、选择集转移
5.1 选择集转移介绍
选择集转移就是以选择的标签为参照然后获取转移后的标签
5.2 选择集转移操作
$(’#box‘).prev()表示选择id是box元素，的上一个的同级元素
$(‘#box’).prevAll()表示选择id是box元素，的上面所有的同级元素
$(’#box‘).next()表示选择id是box元素，的下一个的同级元素
$(‘#box’).nextAll()表示选择id是box元素，的下面所有的同级元素
$(’#box‘).parent()表示选择id是box元素，的父元素
$(‘#box’).children()表示选择id是box元素，的所有子元素
$(’#box‘).siblings()表示选择id是box元素，的其它同级元素
$(‘#box’).find(‘.myClass’)表示选择id是box元素，的class等于myClass的元素
//选择集转移：以指定标签为参照物，选择和它有关系的其他标签
$(function(){
var $div = $('#box1');
$div.prev().css({'background': 'green', 'font-size': '1.5em'});
$div.prevAll().css({'color': 'orange', 'font-size': '1em', 'text-indent': '2em'});
$div.next().css({'color': 'blue', 'font-size': '1.2em', 'text-indent': '3em'});
$div.nextAll().css({'color': 'brow', 'font-size': '1.5em', 'text-indent': '4em'});
$div.siblings().css({'color': 'brow', 'text-decoration': 'underline', 'text-indent': '5em'});
$div.parent().css({'text-indent': '1em'});
$div.children().css({'color': 'red'});
$div.find('a').css({'color': 'red', 'font-size': '1.5em'});
});
六、获取和设置元素内容
jquery中的html方法可以获取和设置标签的html内容，给指定标签追加html内容使用append方法。
//获取和设置元素内容
$(function(){
var $div = $('#box1');
alert($div.html()); //获取标签内容
$div.html('<a href="https://www.baidu.com">百度</a>'); // 设置标签内容
$div.append('<a href="https://www.baidu.com">百度</a>'); // 追加标签内容
$div.append('<p>哈喽</p>'); // 追加标签内容
});
七、获取和设置元素属性
7.1 prop方法的使用
之前使用css方法可以给标签设置样式属性,那么设置标签的其它属性可以使用prop方法了
// 获取和设置元素属性
$(function(){
var $p = $('p');
var $px = $p.css('font-size'); //获取字体大小属性
// alert($px);
$p.css({'font-size': '1.5em','background': 'green'}); //设置样式属性
var $text = $('#text1');
//除了样式属性使用css方法，其他所有属性都使用prop方法
var $name = $text.prop('name'); //获取属性
alert($name);
$text.prop({'value': '张三', 'class': 'tname'}); //设置属性
alert($text.val()); // 使用val获取value属性值
$text.val('王五'); //使用val设置value属性值
});
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
