jQuery基础-定位与修改

目的:利用jQuery对于某个元素进行修改

1.找到该元素,

2.修改该元素

    定位:寻找到我们需要的元素,

    1.利用id $("#id") 定位id='id'的元素  id选择器

    2.利用class $(".class") 定位class='class'的元素 类选择器

    3.直接用元素$("input") 定位input元素  元素选择器

    一般使用id只能找到特定的一个元素,而类选择器和元素选择器常常会找到很多元素。一般id可以找到特定元素,比较好使用,但是当我们使用foreach循环添加元素的时候是没有id的,会选择使用class,但是class一般会用来添加样式,有时候会导致我们不能很好的使用它,比如为了使input长度固定某个格式(前端写好了class),我们这时候使用class就不是很好,可能其他元素也有这个类。元素选择器也类似,因为其定位的不是一个元素。所以我们为了定位某个元素,常常会加入筛选条件。

    筛选:在一群元素中选择其中某一个元素

    1.获取父级元素,同级元素,子级元素 ,一般先使用id选择器在调用这些方法

            父级元素   .parent();(获取当前元素的父级元素)

                            .parents();(获取当前元素的父级元素以及再上级的父级元素,页面一般会一直获取到html元素)

            同级元素  .next();(获取当前元素的下一个元素)

                            .nextAll();(获取当前元素后面的所有元素 PS 弟弟)

                            .prev();(获取当前元素的前一个元素)

                            .prevAll();(获取当前元素前面的所有元素 PS 哥哥)

            子级元素  .children;(获取当前元素的子元素)

    2.eq方法 .eq("0") ;(如果当前是多个元素,可以调用该方法,获取指定的第几个元素)

    3.也可以在定位元素时直接筛选

            $("input[name='type']") 筛选name=type的input元素。

            $("ul li") 获取ul 下面的所有li元素 “ ”表示获取所有子孙后代

            $("ul >li") 获取ul下面的li(只考虑子元素)    >只获取儿子

    4.可以jsp页面传当前元素到js去 当jsp页面调用js函数时可以传当前元素

            jsp   onclick ="changeType(this)", js function changeType(btn) js就可以直接获取到该元素$(btn).

修改:

        当我们定位到我们需要的元素后,就可以进行修改或者读取操作了

        1.常用的获取value和text方法

            $("#id").val();读取value值

            $("#id").text();读取text值

            $("#id").val("1");将id=id的元素value值改为1.如果改为空用.val("");

            $("#id").text("1");将id=id的元素text值改为1.如果改为空用.text("");

        2.获取select的值和赋值

            $("select[name='type']").val();获取name=type的下拉选的value值(选中的)

            $("select[name='type']").text();获取name=type的下拉选的text值(所有的)

            $("select[name='type']").find("option:selected").text();获取name=type的下拉选的text值(选中的)

            $("select[name='type'] option:selected").text();同上

            $("select[name='type']").val("1");将name=type的下拉选的value值为1的选项默认选中

        3.修改元素的某些属性

            $("#id").attr("class","active");将id=id的元素的class改为active.(对于只读属性,不可修改比如input的type)

            $("#id").prop("type","hidden");将id=id的input元素的type改为hidden隐藏

            

猜你喜欢

转载自blog.csdn.net/yijianqingyu/article/details/79958541
今日推荐