jQuery 面试题

Engss

已于 2023-06-29 23:31:06 修改

阅读量357

点赞数 1

文章标签： jquery 前端 javascript

于 2023-06-29 17:59:41 首次发布

本文链接：https://blog.csdn.net/qq_45674825/article/details/131454057

版权

一、使用方式

1、引入jQuery的js文件
<script>
  // 第一种
  $(function{
    // 执行代码
  })

  // 第二种
  $(document).ready(function() {
    // jQuery推荐的写法
  });

  // 第三种
  window.onload = function() {
    // 不推荐
    // window.onload是在页面加载完成之后执行的函数，
    // 如果你的你页面没有加载完毕，或者说某个东西没有加载出来，卡在那了，
    // 那么window.onload就不会执行
  }

  // 自定义方法
  function submit () {
    
  }

  //法一：事件名(函数)  即事件名作为 方法名来用
	$("#btn").click(function() {console.log("点击了我");});
	$("#btn").mouseover(function() {console.log("over");});
	$("#btn").mouseout(function() {console.log("out")});
		
  //法二：bind('事件名', 函数)绑定
	$("#btn").bind('click', function() {console.log("点击");});
	$("#btn").bind('mouseover', function() {console.log("鼠标上来...")});
	$("#btn").bind('mouseout', function() {console.log("鼠标出去...")});

  function fun1(){
    //第一个 :first
    $('li:first').css('color','pink');

    //最后一个 :last
     $('li:last').css('color','pink');

    //:eq()参数是下标 从0开始
     $('li:eq(2)').css('color','pink');

    //:gt() 大于某个下标 :lt()小于某个下标
     $('li:gt(4)').css('color','pink');

    // :even 所有偶数 从0开始
     $('li:even').css('color','pink');

    // :odd所有奇数 从0开始
     $('li:odd').css('color','pink');

    //:not() 除了
     $('li:not(#a1)').css('color','pink');

    // :header h1-h6的
    $(':header').css('color','pink');

    // 选取当前获取焦点的元素
    :focus

    //注意！！在组合选择器在试用前下标会归位，即从0开始
    // 请求接口数据
    $.ajax({
      url:"#",
      type:"post",
      dataType:"json",
      success: function (newslist) {
        console.log(newslist)
      },
      error: function(err) {
        console.log(err)
      }
    })

    var configObj = {
       method   //数据的提交方式：get和post
       url   //数据的提交路劲
       async   //是否支持异步刷新，默认是true
       data    //需要提交的数据
       dataType   //服务器返回数据的类型，例如xml,String,Json等
       success    //请求成功后的回调函数
       error   //请求失败后的回调函数
    }
    $.ajax(configObj);//通过$.ajax函数进行调用。
  }
</script>
// 元素绑定事件
 <input type="button" name="" value="触发" onclick="fun1()" id="">

二、如何找到所有 HTML select 标签的选中项？

$('[name=selectname] :selected')

三、jquery怎么移除标签onclick属性

获得a标签的onclick属性:    $(“a”).attr(“onclick”)
删除onclick属性：          $(“a”).removeAttr(“onclick”);
设置onclick属性：          $(“a”).attr(“onclick”,“test();”);

四、addClass,removeClass,toggleClass的使用。

$(selector).addClass(class)：为每个匹配的元素添加指定的类名

$(selector).removeClass(class)：
从所有匹配的元素中删除全部或者指定的类，删除class中某个值；

$(selector).toggleClass(class)：如果存在（不存在）就删除（添加）一个类

$(selector).removeAttr(class);删除class这个属性；

$("p span")         // 后代选择器
// 注：后代选择器选择父元素所有指定选择的元素，不管是儿子级，还是孙子级

$("p>span")        // 子选择器
// 注：子选择器只选择直属于父元素的子元素

$(".one+p")        // 同辈选择器
// 选取class为one的下一个<p>同辈元素集合

$("#two~p")        // 同辈选择器
// 选取id为two的元素后所有<p>同辈元素集合

$("p:contains('我')")       // 内容过滤选择器
// 选取含有文本“我”的元素

$("p:empty") 
// 选取不包含子元素或者文本元素的空<p>元素（<p></p>）

$("p:has(p)")        // 选取含有选择器所匹配的元素的元素，返回元素集合
// 选取含有<p>元素的<p>元素（<p><p/></p>）

$("p:parent")        // 选取含有子元素或者文本的元素，返回元素集合
// 选取含有子元素或者文本元素的<p>元素

:focus             // 选取当前获取焦点的元素
:hidden            // 选取所有不可见的元素，返回元素集合
:visible           // 选取所有可见的元素，返回元素集合

// 属性过滤选择器
$("p[id]") 选取拥有id属性的p元素

$("input[name=text]") 选取拥有name属性等于text的input元素
$("input[name!=text]") 选取拥有name属性不等于text的input元素
$("input[name^=text]") 选取拥有name属性以text开始的input元素
$("input[name$=text]") 选取拥有name属性以text结束的input元素
$("input[name*=text]") 选取拥有name属性含有text的input元素
$("input[class~=text]") 选取拥有class属性以空格分割的值中含有text的input元素
[attribute1][attribute2][attributeN]   合并多个属性过滤选择器
:enabled             // 选取所有可用元素
:disabled            // 选取所有不可用元素
:checked             // 选取所有被选中的元素（单选框，复选框）
$("input:checked") 选取所有被选中的<input>元素
:selected           // 选取所有被选中的选项元素（下拉列表）
$("select option:selected")  选取所有被选中的选项元素

:text              // 选择所有的单行文本框
$(":text")         // 选取所有的单行文本框

:password          // 选择所有的密码框
:button            // 选择所有的按钮

:checkbox          // 选择所有的多选框

五、jQuery中的Delegate()函数有什么作用？

delegate()会在以下两个情况下使用到：

1、如果你有一个父元素，需要给其下的子元素添加事件，这时你可以使用delegate()了，代码如下：

$(“ul”).delegate(“li”, “click”, function(){ 
    $(this).hide(); 
});

2、当元素在当前页面中不可用时，可以使用delegate()

六、$(document).ready()方法和window.onload有什么区别？

(1)、window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。

(2)、$(document).ready() 方法可以在DOM载入就绪时就对其进行操纵，并调用执行绑定的函数。

七、如何用jQuery禁用浏览器的前进后退按钮？

<script type="text/javascript" language="javascript">　　

    $(document).ready(function() {
　　　　window.history.forward(1);
　　　  //OR window.history.forward(-1);　　
    });

</script>