整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
属性操作
attr(name)：获取属性值
attr(key,value)：设置属性值
attr(properties)：一次设置多个属性值, 要求参数是一个json对象
removeAttr(name)：移除属性
2 对class属性的操作
addClass(class)：添加class
removeClass(class)：移除class
toggleClass(class)：如果有对应的class属性值, 则移除, 反之则添加
hasClass(class)：如果有对应的class属性值, 则返回true, 反之返回false
3 对style属性的操作
css(name)：获取到指定的css属性值
css(name,value)：设置指定的css属性值
css(properties)：一次设置多个css属性值 要求参数必须是json对象
4 尺寸
width()： 获取元素的宽度
width(value)： 设置元素的宽度
height()： 获取元素的高度
height(value)：设置元素的高度
5 文本
innerHTML() javascript方法
html()： 获取双边标签中的内容
html(val)： 设置双边标签中的内容
innerTEXT javascript方法, 兼容性差
text()： 获取双边标签中的内容, 不能解析HTML标签
text(val)： 设置双边标签中的内容, 不能解析HTML标签
6 表单的值
val()： 获取元素的value属性值
val(val)：设置元素的value属性值
属性和属性值语法规则：
$("img").attr({
src: "img07.jpg",
title: "紫荆公寓",
width:300, //参考HTML语法, 可以不加单位
height:"200px", //也可以加单位, 但必须加引号
alt: "紫荆公寓"
});$('div').css({
"font-size":"40px", //带横线的必须加引号
"font-weight":"bold",
color:"red"
});$('div').css({
fontSize:"40px", //驼峰式写法, 可以不加引号
"font-weight":"bold",
color:"red"
});4 键/值的引号问题
键可以加引号, 也可不加引号;
但是对值要求很严格, 字符串型的必须加引号
$("img").attr({
src: "img07.jpg", //值是字符串型必须加引号
"title": "紫荆公寓", //键可加也可不加引号
width:300,
height:"200px",
alt: "紫荆公寓"
});5 采用json写法的键/值对格式：用英文","隔开
ext()方法会把包含的字符转义处理,html()则不会.所谓转义就是字符的另一种显示方法,例如"<" 显示成 "<",这就是转义了,其中的<就是<的转义字符.还有很多可以转义的字符,可以搜索下看看.
下边是项目中用到的2个语句:span中包含了jquery的语句输出结果.
1. $('.title').text("<img src=" ">");
显示结果为<img src=" ">,这里的<img src=" ">不会被解析成html的img标签,而是以存字母文字的形式显示,也就是单纯的字符串:<img src=" "> .并且f12查看源码时看到span包含的<img src=" ">文字内容外层有双引号哦.看下图,
?
如果你用右键选择编辑为html,则看到其中的转义字符<这就说明我们的<被转移了,
?
如果我们想把<img>显示成标签,被浏览器解析.那么就需要如下方法.
2. $('.title').html("<img >");
显示结果为解析后的html代码段,那么这里的<img >就会按照h5的标签img图片进行解析显示了.下图是f12的页面代码结果span中的<img>标签外层无双引号,且页面此时会显示出来图片.
?
?
jQuery官网：https://jquery.com/
jQuery是一个高效、轻量并且功能丰富的js库。
核心在于查询query。
jQuery是一个优秀的js函数库，是React/Vue/Angular框架之外中大型项目的首选。
jQuery的主旨是write less, do more。
引入jQuery的方式有2种，一种是项目中直接引入jQuery的min.js文件，一种是使用服务器端jQuery文件（使用cdn）脚本标签方式引入。
在官网的：https://jquery.com/download/ 链接下可以下载到完整的代码，放到项目文件的js文件夹下。
<script src="static/js/jquery-3.7.1.min.js"></script>在网站：https://www.bootcdn.cn/ 可以获得稳定、快速、免费的cdn加速服务。
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>开发过程中一般使用非min.js文件方便调试，生产环境部署上线时才使用min.js这种压缩文件。
从源码中可以看出，jQuery的整体逻辑可以用以下简单的结构进行描述：
( function( global, factory ) {
// 判断有无window环境的一堆逻辑代码
})( typeof window !=="undefined" ? window : this, function( window, noGlobal ) {
// 构造jQuery的一些逻辑代码
return jQuery
});从源码中可以看出，jQuery被定义为一个函数，函数中返回了一个实例对象（看new关键字）。
继续跟踪源码 new jQuery.fn.init( selector, context)，这个函数中调用了makeArray，当然在其他if判断语句中也有返回伪数组对象（比如，定义了length字段，还有[0]的操作），这里拿makeArray作为演示。
查看makeArray函数：
所以这个返回实例对象，是一个伪数组。
$('#menu-trigger') instanceof Array // false
$('#menu-trigger') instanceof Object // true从源码中可以看出，将jQuery函数和window.$ 以及window.jQuery绑定赋值，所以使用jQuery和$ 标识符就可以直接使用jQuery。通常在项目中直接使用$标识符，快捷简省。
所以在引入jQuery的项目中：
console.log(typeof $); // function
console.log($===jQuery); // true
console.log($() instanceof Object); // true通常形式为：$(param)
$(function() {
console.log("dom finished and execute this");
})
$('#btn').click(function () {
// 这里的this是id为#btn的dom元素
console.log(this.innerHTML)
console.log($(this).html())
})
$('<input type="number"></input>').appendTo('div')let list=[1, 2, 3]
$.each(list, function(i, ele) {
console.log(i, ele)
})
$.trim(' hello world ')// class中名为btn的dom元素有多少
$('.btn').length
$('.btn')[0]
$('.btn').get(0)
$('.btn').index()
// 设置名为btn的class对应的dom标签的文本内容
$('.btn').text('自定义文本内容')通过$(param)传入的是selector、element、标签情况下，返回的是包含1个或者多个dom元素对象的伪数组。
// 基础标签和class
// 选择了所有的div和span标签
$('div, span')
// 选择所有具有某个class的标签
$('div.container')
// 层次选择器
$('ul span') // ul标签下的所有span元素
$('ul>span') // ul标签下的所有子span元素
$('.container+li') // class为container的元素后的下一个li元素
$('ul .item~*') // class为item的元素后面所有兄弟元素
// 过滤选择器
$('div:first') // 选择第一个div
$('div:last') // 最后一个div
$('div:not(.container)') // class不为container的所有div
$('div:lt(3):gt(0)') // 所有div元素中的大于0小于3的div元素，表示1和2索引处的dom元素
$('div:containers("hello world")') // 内容为hellow world的div元素
$('div:hidden') // style中display: none的div元素
$('div[data]') // 有data属性的div元素, example: <div data=""></div>
$('div[data="123"]') // 有data属性且值为123的div元素, example: <div data="123"></div>
// 示例，使table表格的奇数行背景样式设置
$('table>tbody>tr:odd')
// form表单中
$(':text') // 所有单行输入框
$(':text:disabled') // 所有disabled的input输入框
$(':checkbox') // 所有checkbox
$(':checkbox:checked') // 所有选中的checkbox
$('select').val() // select标签选中的option的value值直接修改css属性（如果其dom标签存在这个css属性）
$('#container').css('background', 'red');
$('#container').css({ 'background' : 'red', 'color': 'blue' }) // 一组属性清空某标签下的所有dom：
$('.carousel-inner').empty();给某标签下添加dom标签：
$('.carousel-inner').append(domStr);移除、添加class：
$('.carousel-indicators li').removeClass('active');
$('.carousel-indicators li:first').addClass('active');获取dom标签上的属性：
$('.about-img-1>img').attr('src');设置标签的属性：
$('.about-img-1>img').attr('src', (data && data['image']) ? data['image'] : '');点击：
$('.category-product-page-ul>li').click(function(e) {
e.preventDefault();
console.log('this is:', this); // 打印对应的dom标签
});hover：
$('#container').hover(
function() {
// 当鼠标进入元素时执行的函数
},
function() {
// 当鼠标离开元素时执行的函数
}
);监听事件：
$('.bigImage').on("mousemove", function( e ) {
// do something
});const json='/static/js/data/xxx.json';
$.ajax({
url: json,
dataType: 'json',
success: function(data) {
// do something
},
error: function(jqXHR, textStatus, errorThrown) {
console.error('Fail to read json:', textStatus, errorThrown, json);
}
});post请求：
*请认真填写需求信息，我们会在24小时内与您取得联系。
