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="https://www.baidu.com/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="https://www.sina.com.cn/";document.getElementById("btn").value="新浪网";document.getElementById("logo").src="img/google-search.png";}else{document.getElementById("myFrm").action="https://cn.bing.com/";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="https://www.baidu.com/"  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="https://www.baidu.com/s

必应规则：name=q action=“https://cn.bing.com/search”

解释原因：百度

必应：

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

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

Javascript第六章世上最全常用RegExp正则表达式及表单验证源码第七课
元字符: 很多不太懂正则的朋友,在遇到需要用正则校验数据时,往往是在网上去找很久,结果找来的还是不很符合要求.所以我最近把开发中常用的一些正则表达式整理了一下,在这里分享一下.给自己留个底,也给朋友们 ...
Javascript第五章DOM简介和window对象第一课
更多免费教学文章请关注这里 ECMAScript参考:https://blog.csdn.net/qq_30225725/article/details/88621180 Javascript第五章w ...
Javascript第五章location对象第五课
ECMAScript参考:https://blog.csdn.net/qq_30225725/article/details/88621180 DOM参考:Javascript第五章window对象的 ...
Javascript第五章history对象第四课
ECMAScript参考:https://blog.csdn.net/qq_30225725/article/details/88621180 DOM参考:Javascript第五章window对象的 ...
JavaScript获取DOM对象常用方法
获取DOM对象的常用方法有如下几种: getElementById() 通过元素的ID属性获取DOM对象,获取的是一个DOM对象. getElementsByTagName() 通过元素的标签名获取D ...
JavaScript原生态获取DOM对象,获取属性值以及设置属性值
一.获取DOM对象(标签,元素,节点)的三种方法 1.document.getElementById(); 根据元素的id获取当前的标签例如 <p id="demo"& ...
Javascript第五章倒计时第二课
HTML DOM setTimeout() 方法 ECMAScript参考:https://blog.csdn.net/qq_30225725/article/details/88621180 DOM ...
vue怎么给html元素加类选择器,Vue.js——获取Dom对象的类选择器名(className)
方法一:通过监听器监听方法event参数获取dom对象代码: vue自定义指令 .pop{ width:100px; background-color:#ffff00; height:100px; ...
APIS——获取dom对象、操作元素内容和属性、间歇函数
APIS 变量声明 Web API基本认知作用和分类 DOM DOM树 DOM对象获取DOM对象根据CSS选择器来获取DOM元素(重点) 其它获取DOM元素方法(了解) 操作元素内容操作元素属 ...

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

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

最新文章

热门文章