老师，绑定事件不知道什么原因报错了

HTML代码

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<span class="text1">慕课高铁客户服务中心</span>

</div>

<p> 建议反馈<a href="#" class="p_margin">imooc@com</a></p>

<p class="p_margin"> 我的IMOOC </p>

<ul>

<li><a href="#">未完成订单</a></li>

<li><a href="#">已完成的订单(改/退)</a></li>

<li><a href="#">查看个人信息</a></li>

<li><a href="#">常用联系人</a></li>

<li><a href="#">重点旅客预约</a></li>

<li><a href="#">遗失物品查找</a></li>

</ul>

</div>

</p>

</div>

</div>

</div>

</header>

<div class="banner_">您现在的位置：<span>客运首页 > 注册</span></div>

<form>

</div>

<br>

</div>

<br>

</div>

<br>

</div>

<br>

<option>二代身份证</option>

</select>

</div>

<br>

</div>

<br>

</div>

<br>

</div>

<br>

</select>

</div>

<br>

<label for="check">我已阅读并同意遵守</label>

<a href="#">《中国铁路客户服务中心网站服务条款》</a>

</div>

</div>

</form>

</div>

</body>

</html>

-------------------------------------------------

CSS代码

padding: 0;

margin: 0;

}

display: inline-block;

}

text-decoration: none;

color: #fb7403;

}

ul{

list-style: none;

line-height: 28px;

font-size: 13px;

padding: 10px;

padding-left: 20px;

background-color: white;

}

ul>li:nth-child(2),ul>li:nth-child(3),

ul>li:nth-child(5),ul>li:nth-child(6),

ul>li:nth-child(8),ul>li:nth-child(9){

border-bottom:1px dashed #abadb3;

}

ul>li>a{

color: #abadb3;

}

.arrow-down{

border-left:10px solid transparent;

border-right:10px solid transparent;

border-top:12px solid #000000;

position: relative;

}

header{

background-color: #efefef;

height: 125px;

border-bottom: 1px solid #2487c9;

}

.banner{

height: 804px;

background-color: #ffffff;

border-bottom: 1px solid #2487c9;

}

footer{

height: 110px;

background-color: #dcdcdc;

}

header>.title{

width: 1258px;

margin: 0 auto;

}

header>.title>.logo{

width: 110px;

height: 130px;

background-image: url(../img/logo.png);

background-repeat: no-repeat;

background-position:0px 5px;

float: left;

}

header>.title>.text{

line-height: 125px;

width: 260px;

float: left;

}

header>.title>.text>.text1{

font-size: 18px;

font-weight: bold;

}

header>.title>.text>.text2{

font-size: 24px;

}

header .txt{

line-height: 132px;

float: left;

margin-left: 115px;

}

header .p_margin{

margin-left: 5px;

margin-right: 5px;

}

header .tel{

float: left;

width: 30px;

height: 45px;

margin-top: 42px;

margin-left: 40px;

background-image: url(../img/1.png);

background-size:50% 50%;

background-position: 50%;

background-repeat: no-repeat;

}

header .tel_text{

margin-top: 53px;

}

header .arrow-down_other{

width: 150px;

height: 330px;

border:1px solid #fb7403;

position: absolute;

top: 90px;

right: 560px;

display: none;

}

header .arrow-down_other.active{

display: block;

transition: all .5s;

}

.banner>.banner_center{

width: 1258px;

margin: 10px auto;

}

.banner>.banner_center>.banner_{

height: 34px;

text-align: left;

}

.banner>.banner_center>.banner_>span{

color: gray;

}

.banner>.banner_center>.RegExp{

height: 630px;

border:1px solid #fb7403;

border-radius: 10px;

}

.banner>.banner_center>.RegExp>.RegExp_title{

height:40px;

background-color:#fb7403 ;

color: white;

border-radius: 8px;

line-height: 40px;

text-indent: 10px;

margin-bottom: 60px;

}

.item{

width: 500px;

padding-left:300px;

}

.item>.important{

color: red;

}

.item>select{

padding-right: 10px;

width: 175px;

}

.item>input[type=button]{

background-color: #fb7403;

color: white;

border:none;

width: 250px;

height:40px;

border-radius: 8px;

margin-left: 200px;

cursor: pointer;

}

JS代码---------------------------------------------------------

$(function(){

var p=false;

$('.arrow-down').mouseover(function(){

if(p==false)

{

$('.arrow-down_other').addClass('active');

p=true;

}

else{

$('.arrow-down').mouseout(function(){

$('.arrow-down_other').removeClass('active');

p=false;

})

}

})

var username=document.querySelector('#username');

var userpass=document.querySelector('#userpass');

var name=document.querySelector('#name');

var certificate_number=document.querySelector('#name');

var email=document.querySelector('#email');

var tel=document.querySelector('#tel');

var test1=false;

var items=document.querySelectorAll('.item_');

username.onfocus=function(){

items[0].innerText="6-30位字母，数字或'_'，字母开头";

items[0].style.color="red";

}

宗桦 2019-05-29

源自：项目：JS验证表单提交信息 3-10 作业题

收起

1回答

好帮手慕星星回答被采纳获得+3积分 2019-05-30 13:58:29

你好，是因为获取元素的代码放在了$(function(){})文档载入事件的外面，DOM元素没有加载完就获取元素是获取不到的，所以会出现问题。

将代码全部放在载入事件中就可以：

可以重新测试下，祝学习愉快！

收起回答

宗桦提问者 #1

为什么我看了一些之前的案例没有写$(function(){})也可以获取的到DOM元素呢？

2019-05-30 15:33:49
好帮手慕星星回复提问者宗桦 #2

你现在js代码引入在了head标签中，根据加载顺序，会先执行js然后再加载DOM，所以需要加$(function(){})，如果将js引入放在body底部，就不需要加$(function(){})了。

2019-05-30 15:40:48
宗桦提问者回复好帮手慕星星 #3

明白了老师！

2019-05-31 11:20:34