Jquery에서 속성과 스타일을 설정하는 방법

속성을 설정하는 방법: attr()을 사용하고 "attr(속성, 값)" 구문을 사용하세요. 스타일을 설정하는 방법: 1. addClass()를 사용합니다. 구문은 "addClass(클래스 이름)"입니다. 2. css()를 사용합니다. 구문은 "css("property name", "style value")"입니다.

이 튜토리얼의 운영 환경: windows7 시스템, jquery3.2.1 버전, Dell G3 컴퓨터 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

Jquery에서 속성과 스타일을 설정하는 방법:

1 Jquery 속성 가져오기 및 설정

//找到第一个input，通过attr设置属性value的值
$("input:first").attr('value','新设值');
//同时为多个属性赋值
$("input:first").attr({'attr1':'v1','attr2':'v2'...});
//找到最后一个input，通过使用removeAttr删除属性
$("input:last").removeAttr('value');
//得到.first-div内的文本，并以此来设置最后一个p内的文本
$('p:last').text( $(".first-div").text() )
//.html() 不传入值，就是获取.first-div类的HTML内容，不仅仅是文本
//.html( htmlString ) 用之前得到的内容来设置第一个p标签的html内容
$('p:first').html( $(".first-div").html() ) ;
//.val()获取表单id为single元素的值
$("p").text( $("#single").val() );
//设置表单text字段内的值
$("input[type='text']").val('修改表单的字段')

.html(),.text() ,.val()세 가지 메소드는 모두 선택한 요소의 콘텐츠를 읽는 데 사용됩니다. .html()만 요소의 html 콘텐츠(html 태그 포함)를 읽는 데 사용됩니다. ()는 하위 요소를 포함하여 요소의 일반 텍스트 내용을 읽는 데 사용되며 .val()은 양식 요소의 "값"값을 읽는 데 사용됩니다. 그 중 .html() 및 .text() 메소드는 양식 요소에 사용할 수 없으며, .val()은 양식 요소에만 사용할 수 있습니다. 또한 .html() 메소드를 여러 요소에 사용할 경우, 첫 번째 요소만 읽습니다. .val() 메서드는 .html()과 동일합니다. 여러 요소에 적용되는 경우 첫 번째 양식 요소의 "값"만 읽습니다. )은 .text()가 여러 요소에 적용되면 선택한 모든 요소의 텍스트 내용을 읽습니다. .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()都可以使用回调函数的返回值来动态的改变多个元素的内容。

2、JQuery添加与删除样式

//为class=left下的div元素增加一个新样式
$('.left div').addClass('newClass')
//找到所有的div，然后通过addClass函数增加类名
$("div").addClass(function(index,className) {
 //找到类名中包含imooc的元素，为其添加类名
 if(-1 !== className.indexOf('imooc')){    
  $(this).addClass('imoocClass') //this指向匹配元素集合中的当前元素
 }
});
//class=left下div元素删除newClass样式
$('.left div').removeClass('newClass');
//如果该元素存在该类名就去除，否则就添加
$('.left div').toggleClass('newClass');
//获取class=first的字体大小样式值
$('p:eq(1)').text( $('.first').css("font-size"));
//获取一组属性值并返回为一个对象
var value = $('.first').css(['width','height']);
//通过对象访问到对应的值
document.write( "widht:" + value.width + " height:" +value.height) ;
//设置样式属性值
$('.fourth').css("background-color","red");
//设置多个属性值
$('.seventh').css({
 'font-size'  :"15px",
 "background-color" :"#40E0D0"
});

addClass与css两个方法均用于操作页面样式，两者比较。可维护性：.addClass()的本质是通过定义个class类的样式规则，给元素添加一个或多个类。css方法是通过JavaScript改变元素的样式。通过.addClass()我们可以批量的给相同的元素设置统一规则，变动起来比较方便，可以统一修改删除。

如果通过.css()方法就需要指定每一个元素一一修改，比较麻烦。灵活性：通过.css()方式可以很容易动态的去改变具体一个元素的属性，不需要繁琐的定义一个class类的规则。一般来说在不确定开始布局规则，通过动态生成的HTML代码结构中，都是通过.css()方法处理的。样式值：.addClass()本质只是针对class的类的增加删除，不能获取到指定样式的属性的值，.css()可以获取到指定的样式值。样式的优先级：css的样式是有优先级的，当外部样式、内部样式和内联样式同一样式规则同时应用于同一个元素的时候，优先级如下：外部样式 < 内部样式 < 内联样式。

.addClass()

.html(htmlString), .text(textString) 및 .val(value)는 모두 선택한 요소를 바꾸는 데 사용됩니다. 세 가지 방법을 여러 요소에 동시에 적용하면 선택한 모든 요소의 내용이 교체됩니다. .html(), .text() 및 .val()은 모두 콜백 함수의 반환 값을 사용하여 여러 요소의 내용을 동적으로 변경할 수 있습니다.

2. JQuery 스타일 추가 및 삭제

rrreee

addClass와 css는 모두 페이지 스타일을 조작하는 데 사용됩니다. 유지 관리성: .addClass()의 핵심은 클래스에 대한 스타일 규칙을 정의하여 요소에 하나 이상의 클래스를 추가하는 것입니다. CSS 방식은 JavaScript를 통해 요소의 스타일을 변경하는 것입니다. .addClass()를 통해 동일한 요소에 대한 일괄 규칙을 일괄 설정할 수 있어 변경이 더 편리하고 균일하게 수정 및 삭제가 가능합니다. 🎜🎜.css() 메소드를 사용하면 각 요소를 지정해서 하나씩 수정해야 하는데 그게 더 번거롭습니다. 유연성: 번거롭게 클래스 규칙을 정의할 필요 없이 .css() 메서드를 통해 특정 요소의 속성을 동적으로 쉽게 변경할 수 있습니다. 일반적으로 레이아웃 규칙을 정하지 않고 HTML 코드 구조를 동적으로 생성하는 경우에는 .css() 메소드를 통해 처리됩니다. 스타일 값: .addClass()의 본질은 클래스 추가 및 삭제에만 사용됩니다. 지정된 스타일의 속성 값을 얻을 수 없습니다. .css()는 지정된 스타일 값을 얻을 수 있습니다. 스타일 우선순위: CSS 스타일에는 외부 스타일, 내부 스타일, 인라인 스타일의 동일한 스타일 규칙이 동시에 동일한 요소에 적용되는 경우 우선순위는 다음과 같습니다. 외부 스타일 < . 🎜🎜.addClass() 메소드는 클래스 이름을 추가한 다음 이 스타일을 외부 파일이나 내부 스타일에 먼저 정의하고 필요할 때 CSS(를 통해 요소에 첨부합니다. ) 메소드는 요소의 스타일 속성을 통해 요소에 직접 첨부된 .css 메소드로 설정된 스타일 속성이 .addClass() 메소드보다 우선순위가 높습니다.🎜🎜🎜관련 무료 학습 권장사항: 🎜javascript 🎜( 영상)🎜🎜

위 내용은 Jquery에서 속성과 스타일을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!