HTML+CSS+JS+Jquery面试题

本文整理了HTML、CSS、JavaScript和jQuery面试中的常见问题,涵盖了link与@import的区别、DOM操作方法、JavaScript编码规范、HTML5优势、jQuery与window.onload的对比、HTML全局属性、iframe优缺点、src与href的区别、元素隐藏方法,以及CSS定位等核心知识点。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

HTML+CSS+JS+Jquery面试题

1、CSS中 link 和@import 的区别

Link属于HTML标签,@import是css提供的,只能用来加载css
页面加载时link会同时加载,@import引用的css会在页面加载完加载
Link没有兼容问题
Link的权重高于@import
当使用js控制 DOM 去改变样式的时候,只能使用 link 方式

2、请列举设置和获取HTML、文本和值的方法

1)Html()方法:类似于JS中的innerHtml属性,可以用来读取或设置某个元素的HTML内容
2)Text()方法:类似于JS中的innerText属性,用来读取或设置某个元素的文本内容
3)Val()方法:类似于JS中的value属性,可以用来设置和获取元素的值。无论元素是文本框、下拉列表还是单选按钮,它者可以返回元素的值。

3、说几条写JavaScript的基本规范?

  1. 不要在同一行声明多个变量
  2. 请使用 ===/!==来比较true/false或者数值
  3. 使用对象字面量替代new Array这种形式
  4. 不要使用全局函数。
  5. Switch语句必须带有default分支
  6. 函数不应该有时候有返回值,有时候没有返回值。
  7. For循环必须使用大括号
  8. If语句必须使用大括号
  9. for-in循环中的变量 应该使用var关键字明确限定作用域,从而避免作用域污染。
### jQuery 面试题常见问题与解决方案 #### 1. jQuery 中的 `$()` 和 `jQuery()` 有什么区别? 在 jQuery 中,`$()` 和 `jQuery()` 是完全相同的函数[^3]。它们都用于选择 DOM 元素并返回一个 jQuery 对象。唯一的区别是,当页面中存在其他库(如 Prototype)时,可能会导致 `$` 符号冲突。在这种情况下,可以使用 `jQuery.noConflict()` 来释放对 `$` 的控制,并使用 `jQuery()` 来调用 jQuery 函数。 ```javascript // 使用 $() 选择元素 var element = $('#id'); // 使用 jQuery() 选择元素 var element = jQuery('#id'); ``` #### 2. 如何用原生 JavaScript 实现 jQuery 的 `$(document).ready()` 方法? `$(document).ready()` 的目的是在 DOM 完全加载后执行代码,但不需要等待所有资源(如图片)加载完成。可以用以下方式实现: ```javascript function ready(fn) { if (document.readyState !== 'loading') { fn(); } else { document.addEventListener('DOMContentLoaded', fn); } } ready(function() { console.log('DOM is fully loaded'); }); ``` #### 3. jQuery 中的 `each()` 和原生 JavaScript 的 `forEach()` 有何不同? `each()` 是 jQuery 提供的方法,用于遍历数组或对象。它支持回调函数中的上下文设置为当前元素,并且可以方便地处理 jQuery 对象。而 `forEach()` 是原生 JavaScript 的方法,只能用于数组,无法直接操作 DOM 元素集合。 ```javascript // 使用 jQuery each() $('div').each(function(index, element) { console.log($(element).text()); }); // 使用原生 forEach() Array.from(document.querySelectorAll('div')).forEach(function(element) { console.log(element.textContent); }); ``` #### 4. 如何使用 jQuery 动态添加和删除事件监听器? 可以通过 `on()` 和 `off()` 方法动态绑定和解绑事件监听器。这种方式比直接使用 `bind()` 和 `unbind()` 更加灵活,尤其是在处理动态生成的元素时。 ```javascript // 添加事件监听器 $('#myButton').on('click', function() { console.log('Button clicked'); }); // 移除事件监听器 $('#myButton').off('click'); ``` #### 5. jQuery 中如何获取和设置元素的值? 可以使用 `.val()` 方法来获取或设置表单元素的值。如果调用时不传递参数,则返回当前值;如果传递参数,则设置新值。 ```javascript // 获取输入框的值 var value = $('input').val(); // 设置输入框的值 $('input').val('New Value'); ``` #### 6. 如何使用 jQuery 操作 CSS 样式? 可以通过 `.css()` 方法来获取或设置元素的样式属性。如果只传入一个参数,则返回该属性的值;如果传入键值对,则设置样式。 ```javascript // 获取元素的背景颜色 var bgColor = $('#myElement').css('background-color'); // 设置多个样式属性 $('#myElement').css({ 'color': 'red', 'font-size': '16px' }); ``` --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值