JQuery partOne

时间：2015-11-15 09:38:48 阅读：298 评论：0 收藏：0 [点我收藏+]

标签：

Dom中动态设置事件和静态设置。Jquery中一般习惯动态设置。

$(document).ready(function() {
            alert("加载完毕！");
        })

//注册事件的函数，和普通的dom不一样，不需要在元素上标记on**这样的事件

当页面Dom元素加载完毕时执行代码，可以简写为：

        $(function() {
            alert("加载完毕！");
        });

JQuery选择器用于查找满足条件的元素，比如可以用$("#控件Id")来根据控件id获得控件的jQuery对象，相当于getElementById：

$(“#div1”).html(“<font color=red>hello</font>”)

语法、意义类似于CSS选择器

ljQuery对象就是通过jQuery包装Dom对象后产生的对象：alert($(‘#div1‘).html())。Dom对象要想通过jQuery进行操作，先要转换为JQuery对象。

l$(‘#div1‘).html()等价于：document.getElementById("div1").innerHTML;

l$(‘#div1‘)得到的就是jQuery对象，jQuery对象只能调用jQuery对象封装的方法，不能调用Dom对象的方法，Dom对象也不能调用jQuery对象的方法，所以alert($(‘#div1‘).innerHTML是错的，因为innerHTML是DOM对象的属性。

lArray是JS语言本身的对象，不是Dom对象，因此不需要转换为Jquery对象才能用

（*）将Dom对象转换为JQuery对象的方法，$(dom对象)；

jQuery修改样式:

$(“#div1”).css(“background”, “red”);

value：$(“#un”).val(“abc”)

CSS选择器，同时选择拥有样式的多个元素（类似于CSS选择器）

<style type="text/css">
        .test{ background-color:Red}
    </style>
    <script type="text/javascript">
        $(function() {
        $(".test").click(function() {
                alert($(this).text());
            });
        });
    </script>   
    <p class="test">test1</p>
    <p class="test">test2</p>
    <p class="test">test3</p>

标签选择器，拥有样式的标签选择器

JQuery的迭代

l如何判断对象是否存在，jQuery选择器返回的是一个对象数组(数组中的每个对象还是Dom对象)，调用text()、html()、click()之类方法的时候其实是对数组中每个元素迭代调用每个方法，因此即使通过id选择的元素不存在也不会报错，如果需要判断指定的id是否存在，应该写：

if ($("#btn1").length <= 0) {
                alert("id为btn1的元素不存在！");
            }

JQuery的Dom操作

1、使用html()方法读取或者设置元素的innerHTML：

alert($("#btn1").html());
$("#btn1").html("hello");

2、使用text()方法读取或者设置元素的innerText:

alert($("#btn1").text());
$("#btn1").text("hello");

3、使用attr()方法读取或者设置元素的属性，对于JQuery没有封装的属性（所有浏览器没有差异的属性）用attr进行操作。

alert($(“#btn1").attr("href"));
        $("#btn1").attr("href", "http://www.rupeng.com");

节点遍历

next()方法用于获取节点之后的挨着的第一个同辈元素

l$(".menuitem").next("div")、nextAll()方法用于获取节点之后的所有同辈元素，$(".menuitem").nextAll("div")

lprev、prevAll兄弟中之前的元素。

siblings()方法用于获取所有同辈元素，

JQuery partOne

标签：

原文地址：http://www.cnblogs.com/nonameG/p/4966153.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行