从javascript到jQuery

色即是空却
63 阅读1分钟

1.1 javascript插入位置

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

2.1 变量

var name = "gaoqian";
console.log(name)； //在浏览器控制台输出内容
alert(name)； //弹窗输出
confirm（“是否退出”); //弹窗确认
document.write(name); //网页输出

2.1.2字符串

//定义
var name = "gaoqian";
var name = string("gaoqian");
//功能
var v1 = name.length;
var v2 = name[0];
var v3 = name.trim(); //去除空白
var v4 = name.substring(0,2); //前取后不取

2.1.3 数组

//定义
var v1 = [11,22,33];
var v2 = Array([11,22,33]);
//操作
v1[0] = "高倩";
v1.push("liantong");  //尾部追加 [11,22,33,liantong]
v1.unshift("liantong"); //尾部追加 ["联通",11,22,33]

v1.splice(索引位置,0,元素); 
v1.splice(1,0,"中国");  //尾部追加 [11，“中国”，22，33]

v1.pop(); //尾部删除
v1.shift(); //头部删除
v1.splice(索引位置,1);
v1.splice(2,1);  //索引为2的元素删除 [11,22]

//循环
for(var idx in v1){
  // idx=0/1/2
}

2.1.4 字典

info = {
    "name":"gaoqian",
    "age":18
}

info = {
    name:"gaoqian",
    age:18
}

info.age; //获取
info.name = "gaozhi";

info["age"];
info["name"] = "gaozhi";
delete info["name"];
//循环
for(var key in info){
    // key=name/age  data=info[key]
}

2.2 实例

  • DOM模块
<span id="txt">...</span>
var tag = document.getElementByld("txt");

//创建<li></li>
var tag = document.creatElement("li");

//获取标签中文本
tag.innerText();

//在li标签中设置内容
tag.innerText = "...";
  • 动态表格
<body>
<table>
    <thead>
        <tr>
        </tr>
    </thead>
    <tbody id="body">
        
    </tbody>
</table>

<script type="text/javascript">
    var info = {id:1, name:"gaozhi" ,age:19};
    
    var tr = document.createElement("tr");  //创建行标签
    for(var key in info){
        var text = info[key];
        var td = document.creatElement("td");  //创建列标签
        td.innerText = text;
        tr.appendChild(td);  //将td放入tr标签
    }
    var bodyTag = document.getElementById("body")
    bodyTag.appendChild(tr);  //将tr放入有id是“body”的标签
  • 用户点击输入添加数据
<input type="text" placeholder="请输入内容" id="txtUser" />
<input type="button" value="点击添加" onclick="addClickInfo()">
<ul id="city">

</ul>

<script type="text/javascript">
    function addClickInfo(){
        //找到输入标签
        var txtTag =document.getElementById("txtUser");
        // 获取用户输入内容
        var newString = txtTag.value;
        //判断用户输入是否为空
        if(newString.length > 0){
        // 创建标签
        var newTag = document.creatElement("li");
        newTag.innerText = newString;
        // 标签引入
        var parentTag = getElementById("city");
        parentTag.appendChild(newTag);
        //将输入清空
        txtTag.value = "";
       }else{
            alert(""输入不能为空)；
       }
       
    }

3.1 jQuery引入

<script src="static/jquery-3.6.0.min.js"></script>
<script>

</script>

3.1.1 直接寻找

  • ID选择器
<h1 id="txt">zhongguo</h1>
<h1>zhongguo</h1>
$("#txt");
  • 样式选择器
<h1 class="c1">zhongguo</h1>
<h1 class="c2">zhongguo</h1>

$(".c1");
  • 标签选择器
<h1 class="c1">zhongguo</h1>
<div class="c2">zhongguo</div>

$("h1");
  • 属性选择器
<input type='text' name="n1" />
<input type='text' name="n1" />
<input type='text' name="n2" />

$("input[name='n1']");

3.1.2 间接寻找

<div>
    <div>北京</div>
    <div id="c1">shanghai</div>
    <div>shenzhen</div>
</div>
//寻找上一个兄弟
$("#c1").prev()
//寻找下一个兄弟
$("#c1").next()
//寻找父亲
$("#c1").parent()
//寻找所有孩子
$("#c1").children()
$("#c1").children(".p10")  //找所有孩子中class=p10
//寻找所有兄弟
$("#c1").siblings()

3.2 值的操作

$("#c1").text() //获取文本内容
$("#c1").text("休息") //设置文本内容

<input type="text" id="c2" />
$("#c2").val() //获取用户输入数据
$("#c2").val("hhhh")  //设置用户输入数据

3.3 事件的操作

  • javascript
<input type="button" value="提交" onclick="getInfo()" />

<script>
    function getInfo(){
    
    }
</script>
  • jquery
<ul>
    <li>baidu</li>
    <li>google</li>
</ul>

<script>
    $("li").click(function(){
        //点击li标签时执行这个函数
        //$(this) 当前你点击的是那个标签
    })
</script>

3.4 实例

<body>
<table>
    <thead>
        <tr>
            <td>ID</td>
            <td>姓名</td>
            <td>操作</td>
        </tr>
    </thead>
    <tbody id="body">
        <tr>
            <td>1</td>
            <td>周杰伦</td>
            <td>
            <input type="button" value="删除" class="delete" />
            </td>
        </tr>
         <tr>
            <td>2</td>
            <td>周杰伦</td>
            <td>
            <input type="button" value="删除" class="delete" />
            </td>
        </tr>
         <tr>
            <td>1</td>
            <td>周杰伦</td>
            <td>
            <input type="button" value="删除" class="delete" />
            </td>
        </tr>
    </tbody>
</table>
<script src="static/jquery-3.6.0.min.js"></script>
<script>
    $(function(){
        //找到所有delete标签绑定事件
        $(".delete").click(function(){
            $(this).parent().remove();
        });
    })        
</script>
</body>
avatar
文章
阅读
粉丝