900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > Javascript第五章获取DOM对象的属性 加游览器搜索框内容点击跳转源码第七课

Javascript第五章获取DOM对象的属性 加游览器搜索框内容点击跳转源码第七课

时间:2022-07-01 15:47:25

相关推荐

Javascript第五章获取DOM对象的属性 加游览器搜索框内容点击跳转源码第七课

注意:其中

function $(id){return document.getElementById(id);}

表示:这个就是个方法, 方法名字叫$ 参数为id. 这个是元素id.

传入这个id, 会帮你拿到你的html代码元素里相应的id的对象.

document.getElementById(id)是获得id这个元素的。

相当于定义了一个方法,这样用 $(“id0”)就得到id为id0的控件了。

而这种定义的方法仅仅是在没有Jquery的工程中运用的,当你用啦$的话,再用Jquery的话,那么你所有关于Jquery的代码就都不能用啦,所以这里我们

不要被他的$唬住了,这只是一个变量名,随便取的,你用x也行,这样用的时候就是x(“id0”)。

将以上代码改成以下代码,即将$改成x即可

function x(id){

return document.getElementById(id);

}

$是jquery里面的运算符

第二种方法:原生js

<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><script type="text/javascript">function doChange(){if(document.getElementById("baidu").checked){document.getElementById("myFrm").action="/s";document.getElementById("btn").value="百度搜索";document.getElementById("logo").src="img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png"document.getElementById("txtSearch").name="wd";}else if(document.getElementById("goole").checked){document.getElementById("myFrm").action="/";document.getElementById("btn").value="新浪网";document.getElementById("logo").src="img/google-search.png";}else{document.getElementById("myFrm").action="/";document.getElementById("btn").value="必应搜索";document.getElementById("logo").src="img/google-search.png";document.getElementById("txtSearch").name="q";}}//function doChange(){////var a=$("baidu").checked;//console.log(a)//}//function $(name){////return document.getElementById(name);//}//</script></head><body><form action="/" id="myFrm"><input type="radio" name="search" id="baidu" checked="checked" onclick="doChange();"/><label for="baidu">百度</label><input type="radio" name="search" id="goole" onclick="doChange();" /><label for="goole">谷歌</label><input type="radio" name="search" id="bing" onclick="doChange();" /><label for="bing">必应</label></br><img src="img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png" style="height: 80px;width: 160px;" id="logo"/><input type="text" name="wd" id="txtSearch" placeholder="请输入查询关键字" /><input type="submit" value="百度搜索" id="btn"/></form></body></html>

结果:

功能:在文本框输入你想查询的内容,

百度规则:name=wd action="/s

必应规则:name=q action=“/search”

解释原因:百度

必应:

q= 和wd = 后面分别对应的你查询的内容

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。