jquery基础

---恢复内容开始---

使用jQuery要引用jQuery文件

<head></head>写在头里

<body>
    <div></div>
    <span id="aa"></span>
    <p class="bb"></p>
    <input  type="button" name="cc" value="ff"/>
</body>
<script type="text/javascript">
    var a = document.getElementById("aa");//根据id获取
    var a = document.getElementsByClassName("bb");//根据class获取
    var a = document.getElementsByName("cc");//表单元素根据name获取
    var a = document.getElementsByTagName("div");//根据标签名查找
</script>

 jQuery中获取元素

<body>
    <div>
        <a id="dd"></a>
    </div>
    <span id="aa"></span>
    <p class="bb"></p>
    <input  type="button" name="cc" value="ff"/>
</body>
<script type="text/javascript">
    var a = $("#aa");//根据id找
    var a = $(".bb");//根据class找  class找到的是数组所以可以取索引
    alert(a[0]);
    alert(a[1]);
    var a = $("div");//根据标签名查找 找到的是数组所以可以取索引
    alert(a[1]);
    var a = $("[name='cc']");//根据属性查找
    var a = $("[id='aa']");//根据属性查找
    var a = $("div").children("#dd");//取子类
</script>

二、操作内容

js操作内容

<body>
    <div>
        <a id="dd"></a>
    </div>
    <span id="aa"><a>你好大家</a></span>
    <div class="bb"><p>大家好</p></div>
    <input  type="button" name="cc" value="ff"/>
</body>
<script type="text/javascript">
    var a = document.getElementById("aa");
    var b = document.getElementsByClassName("bb");
    var c = document.getElementsByName("cc");
    a.innerHTML = "<p>你好大家</p>"//修改代码和文字
    b.innerText //修改文字信息
    c.value//修改表单元素的value值
</script>

 jQuery操作内容

<body>
    <div>
        <a id="dd"></a>
    </div>
    <span id="aa"><a>你好大家</a></span>
    <div class="bb"><p>大家好</p></div>
    <input  type="button" name="cc" value="ff"/>
</body>
<script type="text/javascript">
    var a = $("#aa");
    var b = $(".bb");
    var c = $("[name='cc']");
    a.html("<p>你好大家</p>")//修改代码和文字//取值()为空
    b.text("hao")//修改文字信息     取值()为空
    c.val("hello")//修改表单VALUE  
</script>

三 操作属性

js操作属性

<body>
    <div>
        <a id="dd"></a>
    </div>
    <span id="aa"><a>你好大家</a></span>
    <div class="bb"><p>大家好</p></div>
    <input  type="button" name="cc" value="ff"/>
</body>
<script type="text/javascript">
    var a = document.getElementById("aa");
    var b = document.getElementsByClassName("bb");
    var c = document.getElementsByName("cc");
    a.setAttribute("","")//设置属性
    a.removeAttribute("")//移出属性
    a.getAttribute("")//获取属性
</script>

 jquery操作属性

<body>
    <div>
        <a id="dd"></a>
    </div>
    <span id="aa"><a>你好大家</a></span>
    <div class="bb"><p>大家好</p></div>
    <input  type="checkbox" name="cc" value="ff"/>
</body>
<script type="text/javascript">
    var a = $("#aa");
    var b = $(".bb");
    var c = $("[name='cc']");
    a.attr("","")//设置属性
    a.removeAttr("aa")//移出属性
    a.attr("aa")//获取属性
    c.prop("checked",true)//true是选中,false是不选中
</script>

 四、操作样式

js操作样式:只操作内联样式

<body>
    <div>
        <a id="dd"></a>
    </div>
    <span id="aa" style="background-color:#0FF; 20px; height:30px;"><a>你好大家</a></span>
    <div class="bb"><p>大家好</p></div>
    <input  type="button" name="cc" value="ff"/>
</body>
<script type="text/javascript">
    var a = document.getElementById("aa");
    var b = document.getElementsByClassName("bb");
    var c = document.getElementsByName("cc");
    a.style.backgroundColor = "red"//修改背景色
</script>

jQuery操作样式:可以操作内嵌样式

<body>
    <div>
        <a id="dd"></a>
    </div>
    <span id="aa"><a>你好大家</a></span>
    <div class="bb" ><p>大家好</p></div>
    <input  type="checkbox" name="cc" value="ff"/>
</body>
<script type="text/javascript">
    var a = $("#aa");
    var b = $(".bb");
    var c = $("[name='cc']");
    a.css("","")//设置css样式
    a.css("width")//获取css样式
    b.eq(0).addClass("")//增加class数组中索引为0的样式
    b.addClass("")//增加样式
    a.removeClass("")//移出样式
</script>

---恢复内容结束---

原文地址:https://www.cnblogs.com/xiaohaihuaihuai/p/8352039.html