jQuery的操作

最新推荐文章于 2022-12-19 10:48:33 发布

李可叵

最新推荐文章于 2022-12-19 10:48:33 发布

阅读量78

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_41573252/article/details/103939773

版权

html() 它可以设置和获取起始标签和结束标签中的内容。跟dom属性innerHTML一样。
在这里插入图片描述

text() 它可以设置和获取起始标签和结束标签中的文本。跟dom属性innerText一样。

val() 它可以设置和获取表单项的value属性值，注意点是表单项的value值。跟dom属性value一样。
val方法同时可以设置多个表单的选中状态

//导入相应的js库
<Script type="text/javaScript" Src="Script/jquery-1.7.2.js" >
<Script type="text/javaScript">
//在页面加载以后
$(function(){
             // 批量操作单选
             $(":radio").val(["radio2"]);
            // 批量操作筛选框的选中状态
            $(":checkbox").val(["checkbox1","checkbox2"])
            // 批量操作多选的下拉框选中状态
            $("#multiple").val(["mul2","mul3","mul4"]);
            // 操作单选的下拉框选中状态
            $("#single").val(["sin2"]);


});

```css
<body>
    单选：
    <input name="radio" type="radio" value="radio1" />radio1
    <input name="radio" type="radio" value="radio2" />radio2
    <br/>
    多选：
    <input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
    <input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
    <input name="checkbox" type="checkbox" value="checkbox3" />checkbox3
    <br/>

    下拉多选 ：
    <select id="multiple" multiple="multiple" size="4">
        <option value="mul1">mul1</option>
        <option value="mul2">mul2</option>
        <option value="mul3">mul3</option>
        <option value="mul4">mul4</option>
    </select>
    <br/>

    下拉单选 ：
    <select id="single">
        <option value="sin1">sin1</option>
        <option value="sin2">sin2</option>
        <option value="sin3">sin3</option>
    </select>
</body>

attr() 可以设置和获取属性的值，不推荐操作：checked、readonly、selected、disabled等等
attr方法还可以操作非标准的属性。
prop（） 可以设置和获取属性的值，checked……等Boolean值类型
内部插入
appendTo()            a.appendTo(b)   把a插入到b子元素的末尾，成为最后一个子元素。
prependTo()           a.prependTo(b) 把a插入到b子元素的开头，成为第一个子元素。
外部插入
insertAffter()         a.insertAtter(b)    将a外部插入到b的后面得到ba
insertBefore         a.inserBefore(b)  将a外部插入到b的前面得到ad
替换
replaceWith()               a.replaceWith(b)   用b替换掉a（最后只剩一个）
replaceAll()                 a.replaceAll(b)   用a替换所有的b
删除
remove()             a.remove( )          删除a标签不保留a标签
empty()               a.empty()             把a标签掏空，清空a标签里的所有的元素保留a标签
css的样式操作
addClass(0    添加样式
removeClass（） 删除样式 ,不写删除样式的属性默认全部删除
toggleClass()   有就删除，没有就添加样式
offset()   获取和设置元素的坐标
jquery动画
show(） 将隐藏的元素显示
hide()     将现实的元素隐藏
toggle()   可见就隐藏，不可见就显示
第一个参数是动画执行的时间，以毫秒为单位
第二个参数是动画的回调函数
fadeln()   淡入（慢慢可见）
fadeOut  淡出（慢慢消失）
fadeTo  在指定时长内慢慢的将透明度修改到指定的值。0透明，1完成可见
fadeToggle()  淡入/淡出 切换
jQuery事件操作

$( function(){} );
和
window.onload = function(){}
的区别？


他们分别是在什么时候触发？
1、jQuery的页面加载完成之后是浏览器的内核解析完页面的标签创建好DOM对象之后就会马上执行。
2、原生js的页面加载完成之后，除了要等浏览器内核解析完标签创建好DOM对象，还要等标签显示时需要的内容加载完成。


他们触发的顺序？
1、jQuery页面加载完成之后先执行
2、原生js的页面加载完成之后

他们执行的次数？
1、原生js的页面加载完成之后，只会执行最后一次的赋值函数。
2、jQuery的页面加载完成之后是全部把注册的function函数，依次顺序全部执行。



jQuery中其他的事件处理方法：
click()				它可以绑定单击事件，以及触发单击事件
mouseover()			鼠标移入事件
mouseout()			鼠标移出事件
bind()				可以给元素一次性绑定一个或多个事件。
one()				使用上跟bind一样。但是one方法绑定的事件只会响应一次。
unbind()				跟bind方法相反的操作，解除事件的绑定
live()				也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面动态创建出							来的也有效


事件的冒泡
什么是事件的冒泡？
事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应。


那么如何阻止事件冒泡呢？
在子元素事件函数体内，return false; 可以阻止事件的冒泡传递。



javaScript事件对象	
事件对象，是封装有触发的事件信息的一个javascript对象。
我们重点关心的是怎么拿到这个javascript的事件对象。以及使用。


如何获取呢javascript事件对象呢？
在给元素绑定事件的时候，在事件的function( event ) 参数列表中添加一个参数，这个参数名，我们习惯取名为event。
这个event就是javascript传递参事件处理函数的事件对象。

李可叵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的操作

html() 它可以设置和获取起始标签和结束标签中的内容。跟dom属性innerHTML一样。text() 它可以设置和获取起始标签和结束标签中的文本。跟dom属性innerText一样。val() 它可以设置和获取表单项的value属性值，注意点是表单项的value值。跟dom属性value一样。val方法同时可以设置多个表单的选中状态//导入相应的js库<...
复制链接

扫一扫